CSS의 단위비교 (%, vh, vw, em, rem)

%

%란 전체의 몇 %인지에 대한 값이다. 부모를 기준으로 자식의 넓이를 %라고 한다. 예를 들어 부모태그의 넓이가 1200px일 때 자식에게 50%를 적용하면 자식태그의 넓이는 600px이 되는 것이다.

vh와 vw

vh, vw의 v는 Viewport의 축약어 이며, 웹사이트에서 보여지는 영역을 뜻한다.
검색창, 최소화 끄기 등의 브라우저 기능을 제외하고 실제로 눈에 보이는 부분을 말하는 것이다.

vh

세로로 Viewport 크기를 조절해보면 vh 단위를 사용한 부분이 달라지게된다.

만일 1vh로 속성을 설정할 경우 뷰포트의 높이의 1%만큼 계산이 된다.

1vh = 1%의 높이

vw

vw는 vh와 마찬가지의 의미로 넓이를 의미한다. Viewport weight의 축약어이며 1vw로 속성값을 설정할 경우 Viewport 넓이 1%만큼 계산이 된다.

1vw = 1%의 넓이

rem & em

em

em 단위는 상위 요소 크기의 몇 배인지를 정하는 단위이다. 예를 들어 상위 태그의 폰트 크기가 16px인 경우 하위 태그에 폰트 크기에 1em으로 적용한다면 1em = 16px이 되는 것이다. 즉, 부모 엘리먼트의 폰트 사이즈를 기준으로 하는 단위인 것이다.

font size : 1em = 부모 엘리먼트의 font size의 1배 크기

예시

.parent {
    font-size: 20px;

}

.child {
    font-size: 2em; // 40px의 크기를 갖게 됨.
}

rem

rem은 root em으로 최상위에 있는 엘리먼트의 사이즈를 기준으로 한 단위이다. 그래서 가장 상위인 HTML태그에 적용된 폰트 사이즈가 기준이 되는것이다. em과 다르게 현재 태그 위치를 기준으로 부모 태그의 폰트 사이즈는 전혀 연관이 없어 사용하기 편리한 장점이 있다.

font size : 1rem = 최상위 엘리먼트의 font size의 1배 크기

예시

body {
    font-size: 50px;
}

.parent {
    font-size: 20px;

}

.child {
    font-size: 2rem; // 최상의 root body를 기준으로 100px의 크기를 갖게 됨.
}

reference
반응형 웹 뚝딱 만들기