절대 길이 단위
CSS에는 절대 길이 단위(Absolute length units)와 상대 길이 단위(Relative length units)개념이 있는데, 화면의 가장 작은 단위인 픽셀은 절대 길이 단위이다.
반응형 웹에서 폰트를 픽셀같은 절대 길이 단위로 지정하면 컨테이너 사이즈를 조정해도 폰트 크기가 고정값으로 유지되어 변하지 않는다. 또한, 사용자가 브라우저 내 설정에서 폰트 사이즈를 변경해도 적용되지 않는다.
이같은 상황을 피하기 위해서는 컨텐츠 크기를 상대 길위 단위로 설정해야 하며, %를 비롯해 자주 쓰이는 상대 길이 단위를 아래에서 알아본다.
상대 길이 단위
em - relative to parent element
브라우저에서 html에 디폴트로 할당하는 폰트 사이즈는 16px이고, 이 때 1em은 기본값인 16px이 된다.
.parent {
font-size: 8em; /* 128px */
}
.child {
font-size: 0.5em; /* 64px */
}그러므로 부모 요소의 폰트 사이즈인 8em은 16px * 8 = 128px가 된다.
자식 요소는 부모의 0.5배이므로, 128px * 0.5 = 64px이다.
%와 동일하게 작동하므로, 8em은 800%, 0.5em은 50%으로 지정하는 것과도 같다.
rem - relative to root element
rem은 루트에 지정된 폰트 사이즈를 기준으로 상대적으로 크기를 결정한다.
.parent {
font-size: 8em; /* 128px */
}
.child {
font-size: 0.5em; /* 8px */
}부모 요소의 폰트 사이즈는 16px (루트 요소의 폰트 사이즈 = html에서 디폴트로 지정한 값) * 8 = 128px이 된다.
자식 요소의 폰트 사이즈는 16px (루트 요소의 폰트 사이즈 = html에서 디폴트로 지정한 값) * 0.5인 8px이다.
vw, vh - viewport related
viewport는 간단히 말하면 사용자에게 보여지는 영역이다.
100vw는 viewport width의 100%를, 50vh는 절반인 50%를 쓰겠다는 뜻이다.
vmin, vmax - viewport related
vmin은 브라우저의 너비와 높이 중에 더 작은 값을 기준으로 한다.
50vmin은 브라우저의 너비와 높이 중 더 작은 값의 50%를 쓰겠다는 뜻이다. 즉, 50vmin = (브라우저의 너비와 높이 중에 더 작은 값) * 0.5이다.
%
em과 같은 원리로, 부모 요소를 기준으로 삼아 상대적으로 크기를 정한다.
