CSS 단위

CSS는 길이를 나타내는 여러 가지 단위가 있습니다.

많은 CSS 속성이 '길이' 값을 받아들이며, 예를 들어 width、margin、padding、font-size 등.

길이는 길이 단위를 따르는 숫자입니다. 예를 들어}} 10px、2em 등.

px(픽셀)를 사용하여 다른 길이 값을 설정합니다:

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

숫자와 단위 사이에는 공백이 없어야 합니다. 그러나 값이 0이라면 단위를 제외할 수 있습니다.

일부 CSS 속성에서는 음의 길이를 사용할 수 있습니다.

길이 단위는 두 가지 유형이 있습니다:절대 단위와대비 단위.

절대 길이

절대 길이 단위는 고정되어 있으며, 절대 길이로 표현된 길이는 정확하게 해당 크기로 표시됩니다.

화면에서 절대 길이 단위를 사용하지 않는 것이 좋습니다. 그러나 출력 매체가 이미 알려져 있다면 사용할 수 있습니다. 예를 들어, 인쇄 레이아웃에 사용할 수 있습니다.

* 픽셀(px)는 시청 장치에 대한 것입니다. 저dpi 장치에서는 1px는 모니터의 장치 픽셀(점)입니다. 프린터와 고해상도 화면에서는 1px는 여러 장치 픽셀을 의미합니다.

대비 길이 단위는 다른 길이 속성에 대한 길이를 규정합니다. 대비 길이 단위는 다른 렌더링 매체 간에서 더 잘 확장됩니다.

단위	설명	TIY
em	요소의 글꼴 크기(글꼴 크기)에 대한 비율(2em은 현재 글꼴 크기의 2배를 의미)	시도해보세요
ex	현재 글꼴의 x-height에 대한 비율(보통 사용되지 않음)	시도해보세요
ch	0에 대한 너비	시도해보세요
rem	루트 요소의 글꼴 크기(글꼴 크기)	시도해보세요
vw	비전포트에 대한 너비의 1%	시도해보세요
vh	비전포트에 대한 높이의 1%	시도해보세요
vmin	비전포트에 대한 작은 크기의 1%	시도해보세요
vmax	비전포트에 대한 큰 크기의 1%	시도해보세요
%	부모 요소에 대한 비율	시도해보세요

ヒント:em 및 rem 단위는 완벽한 확장 가능 레이아웃을 만들 수 있습니다!

* 비전포트(Viewport) = 브라우저 창의 크기. 비전포트 너비가 50cm 이내라면 1vw = 0.5cm입니다.

표中的 숫자는 이 길이 단위를 완전히 지원하는 첫 번째 브라우저 버전을 명시하고 있습니다.