본문 바로가기

Webstoryboy

Category

Explanation

CSS

[CSS] CSS size

CSS 단위

CSS는 길이를 표현하기 위한 다양한 단위들이 있습니다.


CSS 단위

CSS는 길이를 표현하기 위한 다양한 단위들이 있습니다.

정의(Definition)

  • 상대단위 (px, em, ex, %, rem, vw, vh, vmin, vmax) : 어떤 기준을 통해 상대적으로 변할 수 있는 단위이며, 다양한 매체에 쓰기 적절합니다.
  • 절대단위 (in, cm, mm, pt, pc) : 정확한 기준에 의해 고정된 단위이며, 출력 매체에 쓰기 적절합니다.

CSS Size

속성값 설명
px 모니터의 1dot이 1pixel을 의미하며, pixel은 해상도에 따라서 상대적인 크기를 갖습니다.
em 부모 요소의 대문자 너비를 기준으로 상대적인 값을 갖습니다.
ex 부모 요소의 소문자 너비를 기준으로 상대적인 값을 갖습니다.
% 부모 요소의 길이를 기준으로 상대적인 값(%)을 갖습니다.
rem 루트(root em) 요소의 크기를 기준으로 상대적인 값을 갖습니다.
vw 뷰포트(viewport) 브라우저 가로 크기를 기준으로 상대적인 값을 갖습니다.
vh 뷰포트(viewport) 브라우저 세로 크기를 기준으로 상대적인 값을 갖습니다.
vh 뷰포트(viewport) 브라우저 세로 크기를 기준으로 상대적인 값을 갖습니다.
vmin 뷰포트(viewport) 브라우저 가로 크기 또는 세로 크기 중 작은 값을 기준으로 상대적인 값을 갖습니다.
vmax 뷰포트(viewport) 브라우저 가로 크기 또는 세로 크기 중 큰 값을 기준으로 상대적인 값을 갖습니다.
in in은 인치를 의미합니다. inch 단위로 계산(1in = 96px = 2.54cm)
cm cm은 센치미터를 의미합니다. centimeter 단위로 계산(1cm = 10mm = 37.8px)
mm mm는 밀리미터를 의미합니다. mm단위로 계산(1mm = 0.1cm = 3.78px)
pt pt는 포인트를 의미합니다. point 단위로 계산(1pt = 1/72inch)
pc .pc는 파이카를 의미합니다. pica단위로 계산(1pc = 12pt)

CSS Comparative

Point Pixel em %
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%

크기 단위 환산표

픽셀 포인트 파이카 인치 밀리미터
1pixel 1px 0.75pt 0.063pc 0.0104in 0.265mm
1point 1.333px 1pt 0.083pc 0.0138in 0.353mm
1pica 16px 12pt 1pc 0.1667in 4.233mm
1inch 96px 72pt 6pc 1in 25.4mm
1mm 3.779px 2.835pt 4.233pc 0.039in 1mm

호환성(Compatibility) 더보기

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
px 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
em 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
ex 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
% 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
rem 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
vw 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
vh 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
vmin 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
vmax 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능
in 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
cm 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
mm 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
pt 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
pc 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기