CSS - Relative Unit

최대 1 분 소요

CSS - Relative Unit

  • %를 사용해서 요소를 해당 요소의 outer의 설정 값에 비례해서 선택하도록 할 수 있습니다.
  • vw, vh를 사용하면 현재 브라우저의 width, height에 따라서 해당 요소의 크기가 변하게 되죠.
  • vmin, vmax는 각각 “width, hegith 중에서 작은 값의 1%, 큰 값의 1%”를 의미합니다. 이 값에 비례해서 상대적인 값을 결정할 수 있죠.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style>
            div {
                /* 
                - 1vw: 현재 브라우저의 width의 1%
                - 1vh: 현재 브라우저의 height의 1% 
                */
                width: 50vw;
                height: 50vh;
                background-color: red;
                font-size: 20px;
            }
            div p {
                width:75%;
                height:125%;
                font-size: 2em; /* 200%와 같음*/;
                background-color: blue;
            }
            /*
            - 1vmin: 현재 브라우저의 width, heigth 중에서 작은 값의 1%
            - 1vmax: 현재 브라우저의 width, heigth 중에서 큰 값의 1%
            */
            #id1 {
                width: 50vmin;
                height: 20vmax;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div>
            This is div
            <p>
                This is p in div
            </p>
        </div>
        <p id='id1'>This is id1</p>
    </body>
</html>

댓글남기기