CSS CSS 단위
CSS 단위
CSS에서 사용하는 단위는 font-size, text-indent, line-height, width, height, padding 등 크기를 나타내는 값에 쓰입니다. 크게보면 절대 크기가 변하지 않는 절대 단위와 상황에 따라 크기가 변하는 상대 단위로 나뉩니다.
절대 단위
고정된 값을 출력하며 절대 크기가 변하지 않습니다. 이 방법은 크기가 가변적인 웹사이트가 아닌 경우에는 유용하나, 반응형 사이트에 적용하기 위해서는 매우 복잡하다는 단점이 있습니다. ※px(픽셀) 값을 주로 사용합니다.
| cm (센티미터) | mm (미리미터) | in (인치) |
| px (픽셀) | pt (포인트) | pc (파이카) |
상대 단위
부모 요소나 다른 요소의 크기에 영향을 받아 상대적으로 크기가 변합니다. 반응형 웹사이트를 작업할 때 주로 사용합니다. ※em, rem, % 값을 주로 사용합니다.
| em | 부모 요소의 크기의 영향을 받아 크기가 변함 |
| rem | 최상위 요소인 html요소의 크기의 영향을 받아 크기가 변함 |
| % | 부모 요소의 크기의 영향을 받아 크기가 변함 |
| vw | viewport width의 약자 / 80vw = "뷰포트 영역의 80%" |
| vh | viewport height의 약자 / 80vh = "뷰포트 영역의 80%" |
| vmin | 뷰포트의 최소값 / 설정한 viewport값에 따라 변함 |
| vmax | 뷰포트의 최대값 / 설정한 viewport값에 따라 변함 |
em은 부모 크기에 영향을 받기 때문에 파악하기 쉽지 않을 수 있으며 미디어 쿼리 작성시 여러 요소를 수정해야만 합니다. 그러나 rem은 최상위 요소인 html의 요소의 영향을 받기 때문에 미디어쿼리 작성시 이 요소의 크기 하나만 변경하면 나머지는 자동으로 변합니다. 그래서 반응형 웹사이트를 제작할 때 rem을 주로 사용합니다.