CSS 단위

CSS에는 길이 표현을 위한 여러 가지 단위가 있습니다.

많은 CSS 속성은 width, margin, padding, font-size 등과 같은 "길이"값을 사용합니다.

길이는 10px, 2em 등의 길이 단위가 숫자 다음에 옵니다.

공백은 숫자와 단위 사이에 나타날 수 없습니다. 그러나 값이 0이면 단위를 생략 할 수 있습니다.

일부 CSS 속성의 경우 음수 길이를 사용할 수 있습니다.

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

절대 길이(Absolute Lengths) 

절대 길이 단위는 고정되어 있으며 이 중 임의의 길이로 표현 된 길이는 정확히 같은 크기로 표시됩니다.

절대 길이 단위는 화면 크기가 너무 다양하기 때문에 화면에서 사용하지 않는 것이 좋습니다.

그러나 프린트 레이아웃과 같이 출력 매체가 알려져 있는 경우 사용할 수 있습니다.

** 픽셀 (픽셀)은 보기 장치와 관련이 있습니다. 낮은 dpi 장치의 경우 1px는 디스플레이의 장치 픽셀(점)입니다. 프린터 및 고해상도 스크린의 경우 1px는 여러 장치 픽셀을 의미합니다.

상대 길이(Relative Lengths) 

상대 길이 단위는 다른 길이 등록 정보와 관련된 길이를 지정합니다. 상대 길이 단위는 서로 다른 렌더링 매체간에 보다 잘 확장됩니다.

** em 및 rem 단위는 완벽하게 확장 가능한 레이아웃을 만드는 데 실용적입니다!

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

Fraction(fr) 단위

fr은 분수 단위이며 CSS Grid에서 공간을 분수로 나누는데 사용됩니다. (CSS Grid강좌 참조)

브라우저 지원 

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

** Internet Explorer 9은 vmin의 비표준 이름인 vm을 지원합니다.