CSS <length> 자료형: 길이
CSS <length> 자료형은 길이를 나타내며, 다양한 CSS 속성의 값으로 사용됩니다. width, height, padding처럼 너비와 높이, margin과 inset처럼 거리, 그리고 font-size처럼 크기 자체를 나타낼 때 모두 <length>가 쓰입니다.
일부 CSS 속성에서는 <length>를 받을 수 있는 곳에 <percentage>도 사용할 수 있지만, <percentage>는 <length>와 다른 별도의 자료형입니다. <length-percentage>를 참고하세요.
구문
<length> 자료형은 <number>와 그 뒤의 단위로 구성됩니다. 다른 모든 CSS의 수치와 마찬가지로 수와 단위 리터럴 사이에 공백이 있어선 안됩니다. 수가 0일 땐 단위를 붙이지 않아도 됩니다.
일부 속성은 음의 <length>를 허용하지만, 모든 <length>를 사용하는 속성이 음수를 받을 수 있는 것은 아닙니다.
길이의 지정 값(“지정 길이”)은 크기와 단위를 사용해 표현됩니다. 길이의 계산 값(“계산 길이”)은 절대 길이로 이행한 값으로, 단위를 구별하지 않습니다.
<length>의 단위에는 크게 상대 단위와 절대 단위 두 범주로 나뉩니다. 상대 단위는 어떤 다른 단위를 기준으로 삼아 길이를 표현합니다. 상대 단위의 정확한 기준은 단위에 따라 다른데, 어떤 특정 문자의 크기, 줄 간격, 뷰포트 크기 등을 사용합니다. 상대 단위를 사용하면 다양한 출력 환경에 더 쉽게 대응할 수 있습니다.
자식 요소들은 부모의 상대 길이 값을 지정한 그대로 상속하지 않고 계산 값, 즉 절대 길이로 상속합니다.
글꼴 상대 길이 단위
글꼴 상대 길이는 현재 요소에 적용된 글꼴의 특성 값이나 어떤 특정 문자의 크기를 기준으로 <length> 값을 정의합니다.
cap요소 글꼴의 대문자 높이(cap height)를 나타냅니다.
ch요소 글꼴에서 문자 “0”(숫자 0, Unicode
U+0030)의 진행 척도(advance measure)를 나타냅니다. 진행 척도란 요소의 인라인 방향에 따라 어떤 문자가 차지하는 너비(가로쓰기) 또는 높이(세로쓰기)를 말합니다.문자 “0”의 진행 척도를 불가능하거나 어려운 경우, 너비로는
0.5em, 높이로는1em으로 취급합니다.em요소
font-size속성의 계산 값을 나타냅니다.font-size속성에em단위를 사용하는 경우 요소가 상속한font-size값을 나타냅니다.ex요소 글꼴에서 문자 “x”의 높이를 나타냅니다. “x”를 포함하는 글꼴에서는 보통 다른 알파벳 소문자의 높이와도 같으며, 많은 글꼴에서
1ex≈0.5em입니다.ic요소 글꼴에서 문자 “水”(CJK 물 한자, Unicode
U+6C34)의 진행 척도(advance measure)를 나타냅니다. 진행 척도의 정의는ch단위의 설명을 참고하세요.lh요소
line-height속성의 계산 값을 나타냅니다.line-height의 값이normal이면 절대 길이로 변환해 사용합니다.rem루트 요소 (보통
<html>)font-size속성의 계산 값을 나타냅니다. 루트 요소의font-size속성에rem단위를 사용하는 경우font-size의 초기 값을 나타냅니다. 대부분의 브라우저에서 초기 값은16px이지만, 사용자 설정에 따라 달라질 수 있습니다.rlh루트 요소 (보통
<html>)line-height속성의 계산 값을 나타냅니다.line-height의 값이normal이면 절대 길이로 변환해 사용합니다. 루트 요소의font-size또는line-height속성에rlh단위를 사용하는 경우 각 속성의 초기 값을 나타냅니다.
뷰포트 상대 길이 단위
뷰포트 백분율 길이 단위는 뷰포트의 네 가지 크기, 즉 소형, 대형, 동적, 기본 크기에 기반한 길이입니다. 뷰포트의 크기가 다양한 이유는 브라우저, 특히 모바일 브라우저의 인터페이스가 사용자 동작에 따라 늘어나거나 줄어들면서 그 아래의 콘텐츠가 보이기도, 가려지기도 하기 때문입니다.
- 소형 (small)
브라우저 인터페이스가 가장 커졌을 때, 즉 뷰포트가 가장 작을 때의 크기가 필요할 때는 소형 뷰포트 크기를 사용해야 합니다. 소형 뷰포트 크기를 사용하면 브라우저 인터페이스가 최대로 확장됐을 때 뷰포트를 가득 채울 수 있습니다. 반면 브라우저 인터페이스가 축소됐을 땐 빈 공간이 보일 수 있습니다.
예를 들어, 소형 뷰포트 백분율 길이 단위를 사용한 크기의 요소는 동적 브라우저 인터페이스가 커져도 콘텐츠가 잘리지 않고 화면에 완벽하게 맞습니다. 하지만 인터페이스가 줄어들거나 숨겨지면 요소 주위에 공간이 남습니다. 따라서 소형 뷰포트 크기는 일반적인 사용에 ‘안전’하다고 할 수 있지만, 사용자가 볼 때 가장 매력적인 레이아웃을 만들진 못할 수 있습니다.
소형 뷰포트 크기는
sv접두사를 사용한sv*뷰포트 백분율 단위로 표현합니다. 소형 뷰포트 백분율 길이는 안정된 고정 값으로, 뷰포트 자체의 크기가 변하지 않으면 달라지지 않습니다.- 대형 (large)
브라우저 인터페이스가 가장 작아졌을 때, 즉 뷰포트가 가장 클 때의 크기가 필요할 때는 대형 뷰포트 크기를 사용해야 합니다. 대형 뷰포트 크기를 사용하면 브라우저 인터페이스가 최대로 줄어들었을 때 뷰포트를 가득 채울 수 있습니다. 하지만 브라우저 인터페이스가 확장되면 콘텐츠가 가릴 수 있다는 점을 주의해야 합니다.
예를 들어, 화면 위의 작은 영역조차 귀한 모바일 장치에서는, 사용자가 페이지를 스크롤하기 시작하면 페이지 제목과 주소 표시줄 영역을 일부 혹은 완전히 숨기곤 합니다. 대형 뷰포트 백분율 길이 단위를 사용한 크기의 요소는 이렇게 인터페이스가 숨겨졌을 때 화면의 보이는 영역 전체를 채울 수 있습니다. 하지만 브라우저 인터페이스가 다시 보이게 되면 대형 뷰포트 백분율 길이 단위를 사용한 요소의 콘텐츠는 크기와 위치에 따라 브라우저 인터페이스가 가려버릴 수 있습니다.
대형 뷰포트 크기는
lv접두사를 사용한lv*뷰포트 백분율 단위로 표현합니다. 대형 뷰포트 백분율 길이는 안정된 고정 값으로, 뷰포트 자체의 크기가 변하지 않으면 달라지지 않습니다.- 동적 (dynamic)
브라우저 인터페이스가 동적으로 작아지거나 커질 때, 바뀐 뷰포트 크기에 맞춰 대응하려면 동적 뷰포트 크기를 사용하세요. 동적 뷰포트 크기를 사용하면 브라우저 인터페이스의 유동적인 크기에 상관하지 않고 정확히 현재 뷰포트 크기에 맞출 수 있습니다.
동적 뷰포트 크기는
dv접두사를 사용한dv*뷰포트 백분율 단위로 표현합니다. 동적 뷰포트 백분율 길이는 안정적이지 않은 유동 값으로, 뷰포트 자체의 크기가 변하지 않더라도 바뀔 수 있습니다.동적 뷰포트 크기는 유연하고 제어하기도 좋지만, 남용하면 페이지의 스크롤 방향이 바뀔 때마다 콘텐츠의 크기가 달라져서 사용자 인터페이스 품질 뿐만 아니라 애플리케이션의 성능도 떨어질 수 있습니다.
- 기본
기본 뷰포트 크기는 브라우저가 정합니다. 따라서 기본 뷰포트 크기에 기반한 뷰포트 백분율 길이의 정확한 값은 소형이나 대형 뷰포트 크기일 수도 있고, 그 중간일 수도 있고, 동적 뷰포트 크기와 같을 수도 있습니다.
뷰포트 백분율 길이는 초기 컨테이닝 블록의 크기 백분율로 <length> 값을 정의합니다. 그리고 초기 컨테이닝 블록은 뷰포트 또는 페이지 영역, 즉 현재 문서에서 볼 수 있는 부분의 크기에 기반합니다. 다음은 각각의 뷰포트 크기에 기반한 뷰포트 백분율 길이 단위의 목록입니다.
@page 선언 블록에는 뷰포트 백분율 길이를 사용할 수 없습니다.
vh뷰포트 최초 컨테이닝 블록 높이의 백분율입니다.
1vh는 뷰포트 높이의 1%와 같습니다. 예를 들어, 뷰포트 높이가300px이라면70vh는210px과 같습니다.소형, 대형, 동적 뷰포트 크기의 경우 각각
svh,lvh,dvh단위를 사용합니다.vh는 브라우저 기본 뷰포트 크기에 기반한 뷰포트 백분율 길이 단위입니다.vw뷰포트 최초 컨테이닝 블록 너비의 백분율입니다.
1vw는 뷰포트 너비의 1%와 같습니다. 예를 들어, 뷰포트 너비가800px이라면50vw는400px과 같습니다.소형, 대형, 동적 뷰포트 크기의 경우 각각
svw,lvw,dvw단위를 사용합니다.vw는 브라우저 기본 뷰포트 크기에 기반한 뷰포트 백분율 길이 단위입니다.vmaxvw와vh중 큰 값과 같습니다.소형, 대형, 동적 뷰포트 크기의 경우 각각
svmax,lvmax,dvmax단위를 사용합니다.vmax는 브라우저 기본 뷰포트 크기에 기반한 뷰포트 백분율 길이 단위입니다.vminvw와vh중 작은 값과 같습니다.소형, 대형, 동적 뷰포트 크기의 경우 각각
svmin,lvmin,dvmin단위를 사용합니다.vmin는 브라우저 기본 뷰포트 크기에 기반한 뷰포트 백분율 길이 단위입니다.vb루트 요소의 블록 축 방향에 대한 뷰포트 최초 컨테이닝 블록의 크기 백분율입니다.
소형, 대형, 동적 뷰포트 크기의 경우 각각
svb,lvb,dvb단위를 사용합니다.vb는 브라우저 기본 뷰포트 크기에 기반한 뷰포트 백분율 길이 단위입니다.vi루트 요소의 인라인 축 방향에 대한 뷰포트 최초 컨테이닝 블록의 크기 백분율입니다.
소형, 대형, 동적 뷰포트 크기의 경우 각각
svi,lvi,dvi단위를 사용합니다.vi는 브라우저 기본 뷰포트 크기에 기반한 뷰포트 백분율 길이 단위입니다.
절대 길이 단위
절대 길이는 출력 매체의 물리적 속성에 기반한 길이를 나타냅니다. 먼저 어떤 단위 하나를 출력 매체의 물리 단위와 연관지어 기준으로 삼고, 다른 단위는 기준 단위에 상대적으로 정의하는 방식입니다. 화면과 같은 저해상도 장치와, 프린터와 같은 고해상도 장치에서의 기준 단위가 서로 다릅니다.
저해상도 장치에서는 px 단위가 물리적인 픽셀 하나의 크기에 대응하며, 다른 단위는 픽셀에 상대적으로 정의됩니다. 예컨대, 1in은 96px이자 72pt입니다. 이 방식의 부작용은 인치(in), 센티미터(cm), 밀리미터(mm) 단위를 사용한 길이가 실제 물리적 인치, 센티미터, 밀리미터 길이와 다를 수 있다는 점입니다.
고해상도 장치에서는 인치(in), 센티미터(cm), 밀리미터(mm) 단위가 물리적 길이와 일치하며, px이 물리적 길이에 상대적으로 정의됩니다. (1in의 1/96)
많은 사용자들이 사용자 에이전트의 기본 글씨 크기를 키워서 사용합니다. 절대 길이 단위는 사용자 설정의 영향을 받지 않는 고정된 단위므로 접근성을 저해할 수 있습니다. 그러므로, font-size를 정할 땐 em이나 rem처럼 상대 길이 단위를 사용하세요.
px픽셀 한 개입니다. 전통적으로 화면에서는 장치의 픽셀 하나를 나타냈습니다. 하지만 프린터와 고해상도 화면에서는 하나의 CSS 픽셀이 다수의 장치 픽셀에 대응합니다. 이때는
1px을1in의 1/96으로 정의합니다.cm1 센티미터입니다.
1cm=(96 / 2.54)px입니다.mm1 밀리미터입니다.
1mm=(1 / 10)cm입니다.Q0.25 밀리미터입니다.
1Q=(1 / 40)cm입니다.in1 인치입니다.
1in=2.54cm=96px입니다.pc1 피카입니다.
1pc=12pt=(1 / 6)in입니다.pt1 포인트입니다.
1pt=(1 / 72)in입니다.
보간
애니메이션에서 <length> 값은 부동소수점 실수로서 보간됩니다. 보간에는 계산 값을 사용합니다. 보간 속도는 애니메이션이 사용하는 타이밍 함수가 결정합니다.
명세
CSS Values and Units Module Level 5
브라우저 호환성
| IE | Edge | Chrome | Safari | Firefox | iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet | |
|---|---|---|---|---|---|---|---|---|---|---|
<length> | ||||||||||
Q unit | ||||||||||
cap unit | ||||||||||
ch unit | ||||||||||
Container query length units cqw, cqh, cqi, cqb, cqmin, cqmax | ||||||||||
em unit | ||||||||||
ex unit | ||||||||||
ic unit | ||||||||||
lh unit | ||||||||||
rcap unit | ||||||||||
rch unit | ||||||||||
rem unit | ||||||||||
rex unit | ||||||||||
ric unit | ||||||||||
rlh unit | ||||||||||
vb unit | ||||||||||
vh unit | ||||||||||
vi unit | ||||||||||
dvb, dvh, dvi, dvmax, dvmin, dvw units | ||||||||||
lvb, lvh, lvi, lvmax, lvmin, lvw units | ||||||||||
svb, svh, svi, svmax, svmin, svw units | ||||||||||
vmax unit | ||||||||||
vmin unit | ||||||||||
vw unit |
browser-compat-data