CSS CSS 단위
CSS 단위
절대단위
고정된 값을 출력하며 절대 크기가 변하지 않는다.
이 방법은 크기가 가변적인 웹사이트가 아닌 경우에는 유용하나, 반응형 사이트에 적용하기 위해서는 매우 복잡하다는 단점이 있다.
*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값에 따라 변함 |