CSS 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 | 뷰포트의 최소값, 설정한 viewpoert값에 따라 변함 |
| vmax | 뷰포트의 최대값, 설정한 viewpoert값에 따라 변함 |