728x90
반응형
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .button {
            /* height: 마진값으로 알아서 크기를 조정하도록 하는 것이 좋다.
            사용자가 명시적으로 할 떄는 꼭 해야될 때만 */
            /* display :none > 보이지도 않고 자리 차지도 하지 않음
            block: 부모 요소의 가로 크기 전부를 전부 차지함(한줄 전부) 
            inline: 줄을 다 차지하지 않고 필요ㅕ한 만큼만 공잔 차지  *width, height, margin, padding 값 등이 무시된다.
            inline-block : 줄을 다차지하지 않으면서 크기 조정 가능*/
            
            display: inline-block;
            width: 10rem;
            background-color: darkseagreen;
            border-radius: 20%;
            padding: 0.5rem;
            margin: 0.0825rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="button">로그인</div>
    <div class="button">회원가입</div>
</body>
</html>
728x90
반응형

'정보 > WEB' 카테고리의 다른 글

float예제1  (0) 2022.12.28
3단 레이아웃  (0) 2022.12.28
표 스타일2  (0) 2022.12.28
표 스타일  (0) 2022.12.28
font연습2  (0) 2022.12.28
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>display</title>
            <meta charset="UTF-8">
            <style>
                div {
                    display: inline-block;
                    /* display : 요소 표시 상태 설정
                    none: 보이지 않고 공간도 차지하지 않음
                    block : 부모 요소의 가로 크기를 한줄 다 차지하게 된다.
                    inline: 필요한 만큼 공간 차지(width, height 안먹힘)
                    inline-block : 필요한 만큼 공간 차지(width, height 작동)
                    */
                }


                div:nth-child(1) {
                    width: 100px;
                    height: 100px;
                    background-color: black;
                   
                }
                div:nth-child(2) {
                    width: 100px;
                    height: 100px;
                    background-color: purple;
                }
            </style>
    </head>
    <body>
        <div></div>
        <div></div>
    </body>
</html>
728x90
반응형

'정보 > WEB' 카테고리의 다른 글

flex  (0) 2022.12.24
filter(이미지나 요소에 효과주기)  (0) 2022.12.24
cursor(커서모양)  (0) 2022.12.24
color(색상)  (0) 2022.12.24
box-sizing(박스크기)  (0) 2022.12.21

+ Recent posts

728x90
반응형
">