CSS 단위 표현

단위의 고찰

CSS는 길이를 표현하는 몇가지 다른 단위가 있습니다. 오늘은 이 단위의 종류들을 알아보고자 합니다.

1.숫자와 단위 사이에는 공백을 쓸 수 없습니다.
2. 0은 단위 생략이 가능합니다.
3. 일부 CSS 속성의 경우 음수 길이가 허용됩니다.

---

절대 길이 단위

다음은 모두 절대 길이 단위입니다. 고정된 값을 출력하며 절대 크기가 변하지 않습니다. 이 방법은 크기가 가변적인 웹사이트가 아닌 경우에는 유용하나, 반응형 사이트에 적용하는데는 복잡하다는 단점이 있습니다. 주로 픽셀 값을 사용합니다.

단위	이름	다음과 동일함
cm	센티미터	1cm = 96px/2.54
mm	밀리미터	1mm = 1/10th of 1cm
Q	4분의 1 밀리미터	1Q = 1/40th of 1cm
in	인치	1in = 2.54cm = 96px
pc	Picas	1pc = 1/6th of 1in
pt	포인트	1pt = 1/72th of 1in
px	픽셀	1px = 1/96th of 1in

상대 길이 단위

상대 길이 단위는 부모 요소나 다른 요소의 와 관련이 있습니다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다는 이점이 있습니다. 반응형 웹사이트를 작업할 때 주로 사용합니다.

단위	설명
em	부모 요소의 크기의 영향을 받아 크기가 변함.
rem	최상위 요소 html 요소의 크기의 영향을 받아 크기가 변함. (익스 9.0이상 부터 지원)
%	부모 요소의 크기의 영향을 받아 크기가 변함.
vw	viewport width의 약자 / 80vw="뷰포트 영역의 80%" (익스 9.0이상 부터 지원)
vh	viewport height의 약자 / 80vh="뷰포트 영역의 80%" (익스 9.0이상 부터 지원)
vmin	뷰포트의 최소값 / 설정한 viewport값에 따라 변함(익스 12.0이상 부터 지원)
vmax	뷰포트의 최소값 / 설정한 viewport값에 따라 변함(익스 12.0이상 부터 지원)