<length>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS <length> 자료형은 거리 값을 나타냅니다. width, height, margin, padding, border-width, font-size, text-shadow 등 다양한 속성에 사용할 수 있습니다.

참고: <percentage> 값을 일부 속성의 <length> 값으로 사용할 수는 있지만 <percentage>와 <length> 는 다릅니다. <length-percentage>를 참고하세요.

구문

<length> 자료형은 <number> 다음에 아래 나열한 단위 중 하나를 붙여 구성합니다. 다른 CSS 단위와 마찬가지로 숫자와 단위 문자 사이에 공백은 존재하지 않습니다. 숫자 0 뒤에는 단위를 붙이지 않아도 됩니다.

참고 : 일부 속성은 음의 <length>를 받지만 다른 속성은 그렇지 않습니다.

단위

상대길이 단위

상대길이는 어떤 다른 거리와의 상대적 비율을 표현합니다. 어떤 다른 거리란 단위에 따라 특정 문자, line-height, 아니면 뷰포트일 수 있습니다.

글꼴 상대 길이

글꼴 상대 길이는 <length> 값을 특정 문자나 현재 요소가 사용하는 글꼴의 특정 속성을 기준으로 설정합니다.

참고 : 아래 단위들, 특히 em과 rem은 사용자가 글꼴 크기를 늘려도 페이지의 수직 흐름을 유지하는, 확대 가능한 레이아웃을 만들기 위해 많이 쓰입니다.

cap

요소 font의 "cap height"(영문 대문자의 평균 높이 값)를 나타냅니다.

ch

요소 font의 문자 "0"(영, 유니코드 U+0030)의 너비를 나타냅니다. 문자 "0"의 너비를 측정하는 것이 불가능하거나 실용적이지 않은 경우 너비 0.5em에 높이 1em이라고 가정해야 합니다.

em

요소 font-size의 계산값. 요소의 font-size 속성에 사용한다면 상속받는 font-size 값을 나타냅니다.

ex

요소 font의 x높이를 나타냅니다. "x"문자를 가진 글꼴에서는 보통 소문자 높이와 같습니다. 많은 글꼴에서 1ex ≈ 0.5em입니다.

ic

"水" (한중일 한자 "물", U+6C34) 문자를 렌더링할 때 사용하는 글꼴에서의 너비를 나타냅니다.

lh

요소가 line-height를 가지고 있는 경우, line-height의 계산값을 절대 길이로 변환해 나타냅니다.

rem

루트 요소(보통 <html>)의 font-size를 나타냅니다. 루트 요소의 font-size에 사용할 경우 최초값(보통 브라우저 기본값은 16px이나 사용자 설정으로 변할 수 있음)을 나타냅니다.

rlh

루트 요소(보통 <html>)의 line-height를 절대 길이로 변환해 나타냅니다. 루트 요소의 font-size나 line-height에 사용할 경우 최초값을 나타냅니다.

뷰포트 백분율 길이

뷰포트 백분율 길이는 <length> 값을 뷰포트, 즉 문서에서 볼 수 있는 부분의 크기를 기준으로 설정합니다. 뷰포트 길이는 @page 선언 블록에서는 유효하지 않습니다.

vh

뷰포트의 초기 컨테이닝 블록 높이 1%와 같습니다.

vw

뷰포트의 초기 컨테이닝 블록 너비 1%와 같습니다.

vi

초기 컨테이닝 블록의 인라인 축 크기 1%와 같습니다.

vb

초기 컨테이닝 블록의 블록 축 크기 1%와 같습니다.

vmin

vw와 vh 중 작은 것과 같습니다.

vmax

vw와 vh 중 큰 것과 같습니다.

절대길이 단위

절대길이 단위는 프린트 등 출력 수단의 크기를 알 수 있을 때의 물리적 측정 거리를 나타냅니다. 구현은 어떤 단위를 물리적인 실제 거리에 맞춰 기준으로 삼고, 나머지 단위를 상대적으로 계산해 설정합니다. 기준 단위는 화면 등 저해상도 장치와 프린터 등 고해상도 장치에서 다릅니다.

저해상도 장치에서 px 단위는 물리적인 픽셀을 의미하며 나머지는 이에 상대적입니다. 따라서 1in은 96px로 정의하며 이는 72pt와 동일합니다. 그러나 인치(in), 센티미터(cm), 밀리미터(mm) 등 이렇게 정의하는 단위가 같은 이름을 가진 물리적인 측정 단위와 일치하지 않을 수 있다는 문제점이 있습니다.

고해상도 장치에서 인치(in), 센티미터(cm), 밀리미터(mm)가 기준이 되어 물리적 거리와 동일합니다. 그래서 px 단위도 이에 맞춰 1인치의 1/96로 정의합니다.

참고 : 많은 사용자가 사용자 에이전트의 기본 글꼴 크기를 늘려 읽기 쉽도록 설정합니다. 절대길이는 사용자 설정을 따르지 않기 때문에 접근성 문제를 유발할 수 있습니다. 따라서 font-size를 설정할 땐 em, rem 등 상대길이를 선택하세요.

px

1 픽셀. 화면에서는 전통적으로 하나의 장치 픽셀(점)을 의미했지만, 프린터나 고해상도 화면에서는 1/96 in을 맞출 수 있도록 여러 개의 장치 픽셀을 의미합니다.

cm

1 센티미터, 1cm = 96px/2.54.

mm

1 밀리미터, 1mm = 1/10 cm.

Q

1/4 밀리미터, 1Q = 1/40 cm.

in

1 인치, 1in = 2.54cm = 96px.

pc

1 피카, 1pc = 12pt = 1/61in.

pt

One point. 1pt = 1/72nd of 1in.

보간

애니메이션에서 <length> 자료형의 값은 부동소수점 실수로 간주하며 보간은 계산값을 사용합니다. 보간 속도는 애니메이션에 연결된 타이밍 함수가 결정합니다.

예제

길이 단위 비교

아래 데모에서는 주어진 하나의 입력 칸에 300px, 50%, 30vw 등 <length> 값을 입력한 후 Return을 누르면 그 길이만큼의 막대를 생성합니다.

서로 다른 길이 단위를 입력하고 비교해보세요.

HTML

html
<div class="outer">
  <div class="input-container">
    <label>길이:</label>
    <input type="text" id="length" />
  </div>
  <div class="inner"></div>
</div>
<div class="results"></div>

CSS

css
html {
  font-family: sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.outer {
  width: 100%;
  height: 50px;
  background-color: #eee;
  position: relative;
}

.inner {
  height: 50px;
  background-color: #999;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.5),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
}

.result {
  height: 20px;
  background-color: #999;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.5),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
  background-color: orange;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.result code {
  position: absolute;
  margin-left: 20px;
}

.results {
  margin-top: 10px;
}

.input-container {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
}

label {
  margin: 0 10px 0 20px;
}

JavaScript

js
const inputDiv = document.querySelector(".inner");
const inputElem = document.querySelector("input");
const resultsDiv = document.querySelector(".results");

inputElem.addEventListener("change", () => {
  inputDiv.style.width = inputElem.value;

  const result = document.createElement("div");
  result.className = "result";
  result.style.width = inputElem.value;
  result.innerHTML = `<code>너비: ${inputElem.value}</code>`;
  resultsDiv.appendChild(result);

  inputElem.value = "";
  inputElem.focus();
});

결과

명세

Specification
CSS Values and Units Module Level 4
# lengths

브라우저 호환성

BCD tables only load in the browser