모든 CSS 단위를 둘러보세요 — 절대(px, cm, pt), 폰트 상대(em, rem, ch), 뷰포트(vw, dvh), 컨테이너 쿼리, 그리드(fr), 각도, 시간, 해상도 — 설명, "사용 시점" 메모, 복사 가능한 토큰과 함께 검색·유형 필터 가능한 참조표에서. 브라우저에서, 무료.

모든 CSS 단위를 설명합니다. 모든 처리는 내장 참조표를 바탕으로 브라우저에서 실행됩니다 — 서버로 전송되는 것은 없습니다.

검색과 일치하는 단위가 없습니다.
다른 단위나 카테고리를 시도해 보세요 — 예: rem, dvh, fr 또는 angle.

CSS 단위 참조 소개

CSS 단위 레퍼런스는 언어가 제공하는 모든 단위, 총 45개를 유형별로 정리해 문서화합니다: px, cm, pt 같은 절대 단위, em, rem, ch, lh 같은 폰트 상대 단위, vw와 vh부터 최신의 svh, lvh, dvh까지의 뷰포트 단위, cqw와 cqi 같은 컨테이너 쿼리 단위, 그리드 fr 단위, 그리고 각도, 시간, 해상도, 백분율까지 포함합니다.

각 카드는 단순한 정의 이상을 제공합니다. 복사 가능한 모노스페이스로 표시된 단위 토큰, 정식 이름, 카테고리, 계산 방식에 대한 쉬운 설명, 그리고 이 단위가 진가를 발휘하는 상황과 다른 단위가 더 나은 상황을 알려주는 실용적인 "언제 사용할지" 참고사항이 담겨 있습니다.

검색은 토큰, 이름, 의미에 모두 일치하므로 rem, viewport width, root 모두 해당 단위를 찾아주며, 유형 칩으로 그리드를 한 계열로 필터링할 수 있습니다. 모든 것이 내장 레퍼런스를 기반으로 브라우저에서 실행되며 서버로 아무것도 전송되지 않습니다.

CSS 단위 참조 사용 방법

  1. 토큰, 이름 또는 의미로 단위를 검색하세요. 예: rem, viewport width 또는 angle.
  2. 유형 칩을 사용해 absolute, font-relative, viewport, container, grid, angle, time, resolution, percentage 단위로 그리드를 필터링하세요.
  3. 각 단위의 설명과 "언제 사용할지" 참고사항을 읽고 알맞은 단위를 고르세요.
  4. 복사 버튼을 클릭해 스타일시트에 사용할 단위 토큰을 가져오세요.

자주 묻는 질문

폰트 크기나 사용자가 선호하는 텍스트 크기에 맞춰 스케일되어야 하는 요소에는 rem을 사용하세요. rem은 루트 폰트 크기를 따르므로 브라우저 접근성 설정이 제대로 작동합니다. 가는 테두리처럼 시각적으로 일정하게 유지되어야 하는 요소에는 px를 사용하세요.

em은 현재 요소 자체의 폰트 크기를 기준으로 하므로 중첩된 요소에서 값이 누적됩니다. rem은 항상 루트 요소를 기준으로 해 예측 가능한 결과를 줍니다. 그래서 rem이 여백과 타입 스케일의 기본 선택지가 되었습니다.

모바일 브라우저는 툴바를 표시하거나 숨겨 보이는 높이가 바뀌지만, vh는 더 큰 레이아웃 크기에 고정되어 있습니다. 동적 단위 dvh는 툴바가 움직임에 따라 실제로 보이는 높이를 추적하며, svh와 lvh는 각각 가장 작은 상태와 가장 큰 상태에 고정됩니다.

fr은 그리드 컨테이너의 여유 공간을 비율로 분배합니다. grid-template-columns: 2fr 1fr은 고정 트랙과 간격을 뺀 나머지 너비를 첫 번째 열에 두 번째 열보다 두 배 더 줍니다. fr은 그리드 트랙 정의 안에서만 존재합니다.

이 단위들은 뷰포트가 아니라 가장 가까운 쿼리 컨테이너를 기준으로 요소 크기를 정합니다. cqw는 컨테이너 너비의 1%, cqi는 인라인 크기의 1%입니다. 이를 통해 화면 크기와 무관하게 컴포넌트가 자신이 속한 박스에 맞춰 스케일될 수 있습니다.

네. 45개 단위 전부가 브라우저에서 완전히 실행되는 페이지에 무료로 문서화되어 있습니다. 가입도 서버 요청도 필요 없습니다.

도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.
문제 신고

이 무료 도구를 귀하의 웹사이트에 추가하세요 — 아래 코드를 복사하여 붙여넣으세요.