절대적 길이와 상대적 길이
css에 사용되는 모든 속성들에는 속성 마다 허용되는 값이 있고 가장 자주 쓰이는 값은 바로 length, 길이다.
이 길이 값의 단위는 절대적 길이 단위와 상대적 길이 단위로 크게 두 가지로 분류된다.
웹에서 많이 쓰이는 픽셀(px)은 모니터의 스크린에서 나타낼 수 있는 가장 작은 절대적 길이의 단위를 말한다.
기본적으로 브라우저에서 html에 할당되는 기본 폰트 사이즈가 16px이다.
폰트, 이미지, 박스 등 웹을 구성하는 모든 콘텐츠의 사이즈는 픽셀로 시작하고 픽셀로 끝난다. 하지만 우리는 웹 클라이언트를 개발할 때 모든 콘텐츠의 크기를 직접 픽셀로 지정하지 않고 픽셀 대신 em과 rem 또는 % 등을 자주 사용한다.
왜 안 픽셀?
요즘 대부분의 웹 사이트들은 사용자 임의로 조절하는 브라우저 창의 크기에 맞춰 콘텐츠의 크기가 변하는 반응형 기능을 가지고 있을 뿐만 아니라, 창의 크기는 같아도 브라우저 설정에서 사용자 임의로 폰트 크기를 키우거나 줄일 수 있어 좋은 사용자 경험을 제공한다.
이러한 상대적인 박스나 폰트의 크기는 상대적인 길이 단위를 사용하는 것에서부터 시작한다. 절대적 단위인 px을 사용한다면, 창의 크기에 따른 콘텐츠 크기를 조절할 수는 있지만 상대적 길이 단위를 사용할 때 보다 개발하는 입장에선 작업이 더 번거로워지고 사용자 입장에서 브라우저 설정을 사용한 폰트 크기 조절은 할 수 없다.
위와 같은 이유로 웹을 구성하는 콘텐츠에 픽셀만을 사용해서 크기를 지정하는 것은 좋지 않다.
그럼 뭐 쓰라고!
em이나 rem 같은 상대적 길이 단위를 쓰면 된다.
상대적 길이 단위 종류
| 단위 종류 | 설명 |
|---|---|
| em | 부모 폰트 크기를 기준으로 크기 계산. |
| rem | 최상위 폰트 크기(기본값: 16px)를 기준으로 계산. |
| vw | 뷰포트 너비 기준으로 계산. |
| vh | 뷰포트 높이 기준으로 계산. |
| vmin | 뷰포트 너비와 높이 중 작은 값 기준으로 계산. |
| vmax | 뷰포트 너비와 높이 중 큰 값 기준으로 계산. |
| % | 부모 요소 크기 기준으로 크기 계산. |
em, rem 계산법은 어렵지 않다.
N em === (부모 폰트 크기) x ( N ) px 이 된다.
예를 들어, 부모 폰트 크기가 16px 이라면 8em은 128px이 되는 것!
rem도 동일하다.
em과 %는 둘 다 부모를 기준으로 두고 크기가 계산된다는 점이 비슷하다.
하지만, em은 폰트 크기"만"을 기준으로 둔다는 것에 주의하자. %는 폰트 크기 말고도 모든 길이를 기준으로 둔다.
