CSS 단위 (Unit)

단위

CSS는 길이를 표현하기 위한 몇 가지 다른 단위를 가지고 있습니다.

SS 속성들은 width, margin, padding, font-size 등과 같은 “길이” 값을 취합니다.

길이는 10px, 2em 등과 같이 길이 단위 뒤에 오는 숫자입니다.

h1 {
  font-size: 60px;
}

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

Note: 숫자와 단위 사이에는 공백을 사용할 수 없습니다. 그러나 값이 0이면 단위를 생략할 수 있습니다.

일부 CSS 속성의 경우 음의 길이가 허용됩니다.

길이 단위에는 절대 단위와 상대 단위의 두 가지 유형이 있습니다.

절대 길이 단위는 고정되며, 이 중 하나로 표현되는 길이는 정확히 그 크기로 나타납니다.

절대 길이 단위는 화면 크기가 매우 다양하기 때문에 화면에 사용하지 않는 것이 좋습니다. 그러나 인쇄 레이아웃과 같이 출력 매체가 알려진 경우 사용할 수 있습니다.

상대 길이 단위는 다른 길이 속성에 상대적인 길이를 지정합니다. 상대 길이 단위는 서로 다른 렌더링 매체 간에 더 잘 확장됩니다.

단위	설명
em	요소의 글꼴 크기에 비례(2em은 현재 글꼴 크기의 2배를 의미합니다).
ex	현재 글꼴의 x-height에 상대적 크기(거의 사용되지 않음)
ch	“0”의 너비를 기준으로 함 (0)
rem	루트 요소의 글꼴 크기에 비례
vw	뷰포트 폭의 1%에 상대적
vh	뷰포트 높이의 1%에 상대적
vmin	뷰포트의 작은 차원의 1%에 상대적
vmax	뷰포트의 더 큰 차원의 1%에 상대적
%	상위 요소에 상대적

em과 rem 단위는 완벽하게 확장 가능한 레이아웃을 만드는 데 실용적입니다!
뷰포트 = 브라우저 창 크기. 뷰포트의 너비가 50cm인 경우 1vw = 0.5cm입니다.

표의 숫자는 길이 단위를 완전히 지원하는 최소 브라우저 버전을 지정합니다.