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>margin</title>
            <meta charset="UTF-8">
            <style>
                span {
                    background-color: red;
                    margin: 15px;
                    /* margin : 외부 여백을 지정한다.*/
                    /* margin-top, matgin-right, margin-bottom 사요가능.*/
                }



            </style>
     
    </head>
    <body>
       <span>A</span><span>B</span><span>C</span><span>D</span>
    </body>
</html>
728x90
반응형

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

position  (0) 2022.12.24
opacity(투명도 설정)  (0) 2022.12.24
font(폰트 설정과 외부 폰트 적용)  (0) 2022.12.24
flex  (0) 2022.12.24
filter(이미지나 요소에 효과주기)  (0) 2022.12.24

+ Recent posts

728x90
반응형
">