Width & Height - logaegae/project_study GitHub Wiki

Width & Height Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html{
            border: solid
            /*html의 부모는 브라우저*/
            }
        body{
            border : green solid;
            /*기본적으로 body의 margin은 8px*/
        }
        div{
            width: 200px;
            height: 200px;
            /*width 안쓰면 auto값이 됨
              총 가로길이 = width, padding, margin, border 모두의 합
              auto를 써야 유지보수가 쉽다
              auto는 padding, margin, border을 뺀 나머지가 width
            */
            border: 1px #F00 solid;
            padding : 10px;
            margin: 20px;
            }
    </style>
</head>
    <body>
        <div>
        box
        </div>
     </body>
</html>

Min & Max Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        .box
        {
            border: 1px #F00 solid;
            min-width: 500px;
            max-height: 200px;
            /*브라우저 크기를 조절해도 지정값 이상, 이하로는 변하지 않음*/
        }
    </style>

</head>
<body>
    <div class="box">fdafd<br />
                     fdafd<br />
                     fdafd<br />
                     fdafd<br />
                     fdafd<br />
                     fdafd<br />
                     fdafd<br />
                     fdafd<br />
                     fdafd<br />
                     fdafd<br />
                     fdafd<br />
                     fdafd<br />
                     fdafd<br />
    </div>
</body>
</html>

Auto Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .menu{
            border: 1px red solid;
            width: 350px;
            }
        .menu div{
            border: 1px blue solid;
            width: auto;
            /*
            width : auto;는 화면에 맞춰서 계산
            height: auto;는 컨텐츠 크기만큼
            
            수식 선택후 ctrl + shift + y 누르면 계산값 출력
            */
            margin: 20px;
            }
    </style>
</head>
<body>
    <div class="menu">
        <div>
            <a href="">test</a><br />
            <a href="">test</a><br />
            <a href="">test</a><br />
            <a href="">test</a><br />
            <a href="">test</a><br />
            <a href="">test</a><br />
        </div>
    </div>
</body>
</html>
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️