[번역] CSS 길이 단위 이해하기

원문: Making Sense of CSS Length Units

CSS를 막 시작한 주니어 개발자라면 온갖 길이 단위들 때문에 머리가 아플 겁니다. 절대 단위는 반응형 디자인에서 변하지 않기 때문에 px를 쓰지 말라고 하는 사람들이 있는데, 정말 그럴까요?

절대 단위

px(픽셀)은 화면에서 표현할 수 있는 가장 작은 점입니다. 하지만 고해상도의 레티나 디스플레이가 등장하면서, 오늘날의 픽셀은 실제 모니터의 물리적 픽셀이 아니라 가상의 픽셀을 의미하게 되었습니다. 이는 매우 중요한 변화인데, 이제 픽셀이 더 이상 절대적인 단위가 아니라는 뜻이기 때문입니다. 이 부분에 대해서는 뒤에서 다시 다루겠습니다.

cm, mm, q, in, pc, pt(센티미터, 밀리미터, 쿼터밀리미터, 인치, 피카(1/6인치), 포인트(1/72인치))는 주로 인쇄용으로 권장되는 단위입니다. 초창기 컴퓨터 프린터는 인치당 1/72의 작은 점을 인쇄할 수 있었기 때문에, 저해상도 프린터에서는 1pt가 1도트에 해당했습니다. 요즘 프린터는 인치당 150, 300, 600, 심지어 1200포인트까지 인쇄할 수 있으니, 1포인트가 얼마나 작은지 짐작할 수 있습니다. 따라서 프린터의 해상도와 관계없이 페이지가 의도한 대로 인쇄되길 원한다면, 다른 측정 방법이나 상대 단위를 사용하는 것이 더 현명할 수 있습니다.

상대 단위

%(퍼센트)는 부모 요소를 기준으로 하므로 비교적 이해하기 쉽습니다. 다만, 무엇이 부모로 간주되는지 상황에 따라 다를 수 있어 주의가 필요합니다. 보통은 명확하지만 해당 요소의 position이 absolute일 때는 조금 까다로워집니다.

 

em은 부모의 글꼴 크기를 기준으로 한 비율 단위입니다(특히 "m" 문자의 너비를 참조). 예를 들어, 2em은 현재 글꼴 크기의 두 배가 됩니다. 이해하기 쉽지만 CSS 컴포넌트를 만들 때 크기가 부모 컨테이너의 영향을 받는다는 문제가 있습니다.

 

rem은 em과 비슷하지만, 기준이 부모가 아니라 루트(html) 요소의 글꼴 크기입니다. 따라서 컴포넌트가 어디에 있든 항상 동일한 크기를 유지할 수 있습니다.

 

기본적으로 브라우저의 기본 글꼴 크기는 16px이지만, 아래와 같이 설정하면 1rem이 10px이 되어 계산이 쉬워집니다.

html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
}

그렇다면 왜 그냥 픽셀을 쓰지 않을까요? 16px이 기본 크기이지만, 사용자가 접근성 설정에서 글꼴 크기를 변경할 수 있기 때문입니다. 레이아웃이 px 기준이면 사용자의 설정을 무시하게 되고, 레이아웃이 깨지거나 글자가 너무 작아질 수 있습니다.

 

[s,l,d]v[h,w,i,b,min,max]는 웹 페이지의 표시 영역(뷰포트)을 기준으로 하는 24가지 단위입니다.

 

*vh는 뷰포트의 높이, *vw는 너비를 의미합니다.

 

*vmin과 *vmax는 각각 뷰포트 치수 중 작은 값과 큰 값을 기준으로 합니다.

 

*vi(인라인)와 *vb(블록)는 텍스트 방향에 따라 너비 또는 높이를 나타냅니다. 영어처럼 가로쓰기 언어에서는 vi가 vh, vb가

vw와 같지만, 일본어처럼 세로쓰기 언어에서는 반대가 될 수 있습니다.

 

sv*(small)은 브라우저 컨트롤이 표시되는 디바이스의 뷰포트 크기입니다.

 

lv*(large)은 컨트롤이 숨겨져 있을 때의 뷰포트 크기입니다. sv*와 lv*는 컨트롤의 표시 여부와 관계없이 고정된 값이라는 점을 기억하세요. dv*(dynamic)은 현재 뷰포트(작든 크든)를 나타냅니다. 이는 뷰포트 전체 높이에 꼭 맞는 레이아웃을 만들려고 할 때 중요하지만, 컨트롤이 사라지는 즉시(예를 들어 사용자가 스크롤을 시작했기 때문에) 변경됩니다. s|l|d를 지정하지 않으면 원래 v*는 lv*(large)와 같습니다.

특이한 단위(모든 브라우저에서 지원되는 것은 아님)

좀 더 특수한 용도의 단위들도 있습니다.

 

ch: "0" 문자의 너비

ex: "x" 문자의 높이

cap: 대문자 높이(텍스트 옆에 아이콘을 맞출 때 유용)

ic: 한중일 문자의 '물(水)' 너비

lh: 부모 요소의 줄 높이

rlh: 루트 요소의 줄 높이

핵심 정리

여전히 복잡하게 느껴진다면, 아래 세 가지 정도만 기억해도 충분합니다.

 

인쇄용 디자인에는 정확한 크기(mm 등)를 사용하세요.

 

웹 페이지에서는 rem을 쓰면 크기 조정이 쉽고, 1rem=10px로 설정하는 것도 고려해볼 만합니다(선택 사항).

 

웹 애플리케이션에서는 뷰포트 단위를 활용해 레이아웃을 잡는 것이 좋습니다. 만약 이 외의 단위를 써야 한다면, 정말 특별한 경우일 테니 자신감을 가져도 좋습니다.

 

🚀 한국어로 된 프런트엔드 아티클을 빠르게 받아보고 싶다면 Korean FE Article을 구독해주세요!