티스토리 뷰

CSS 단위

pilot376 2018. 12. 17. 10:53

em

em은 font-size를 정의한다. em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받는다.

<body>
    <div>테스트</div>
</body>

body {
    font-size: 14px;
}
div {
    font-size: 1.2em; /* 14px * 1.2 = 16.8px */
}

em으로 정의한 폰트 사이즈를 모든 자식 div 태그에 선언하면, div는 각 부모의 폰트 사이즈를 상속받아 점점 커지게 된다.

<body>
    <div>
        테스트1 <!-- 14 * 1.2 = 16.8px -->
        <div>
            테스트2 <!-- 16.8 * 1.2 = 20.16px -->
            <div>
                테스트3 <!-- 20.16 * 1.2 = 24.192px -->
            </div>
        </div>
    </div>
</body>

rem

rem의 "r"은 "root를 뜻한다. 최상위 html 태그에 지정한 사이즈를 기준으로 삼는다.

html {
    font-size: 14px;
}
div {
    font-size: 1.2rem;
}

<body>
    <div>
        테스트1 <!-- 14 * 1.2 = 16.8px -->
        <div>
            테스트2 <!-- 14 * 1.2 = 16.8px -->
            <div>
                테스트3 <!-- 14 * 1.2 = 16.8px -->
            </div>
        </div>
    </div>
</body>

rem 사용 시 모든 div는 16.8px의 폰트 사이즈로 표현된다. rem은 폰트에서만 사용하진 않는다. 레이아웃을 위한 단위로도 사용할 수 있다.

.container {
    width: 70rem; /* 70 * 14px = 980px */
}

vh와 vw

vh와 vw는 브라우저 크기를 기준으로 계산된다.

1vh는 브라우저 높이값의 1/100이고, 1vw는 브라우저 넓이값의 1/100이다.

예)
브라우저 높이 900px : 1vh는 9px
브라우저 넓이 700px : 1vw는 7px

<div class="box"></div>

.box {
	width:1vw;
    height:1vh;
    background: black;
}

vmin과 vmax

vmin과 vmax는 넓이값과 높이값에 따라 최대, 최소값을 지정할 수 있다.

예)
브라우저 넓이 1100px, 높이 700px일 때 : 1vmin 7px, 1vmax 11px

해상도와 상관없이 언제나 화면에 노출되어야 하는 요소의 경우 아래와 같이 사용할 수 있다.

.box {
    height: 100vmin;
    width: 100vmin;
    background: black;
}

커버처럼 뷰포트 화면에 보여야 하는(모든 네 변이 스크린에 꽉 차 있는) 경우 아래과 같이 사용할 수 있다.

.box {
    height: 100vmax;
    width: 100vmax;
    background: black;
}

출처

https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573

댓글