면접을 보고나면 항상 후회가 남지만 그중에서도 후회 of 후회는 공부했는데 기억이 안나는 것과 '공부해야지' 하고 생각만 하다가 안했는데 그걸 질문으로 받을 때다..
이번 포스트에선 많고 많은 후회중에 CSS 단위들에 대해서 정리 해보자 🏃♂️
절대 단위
절대 단위란 고정된 값을 출력하며 어떠한 환경에서도 항상 같은 크기를 가지게 된다.
| 단위 | 이름 | 설명 |
|---|---|---|
| px* | 픽셀 | 1px = 1/96th of 1in |
| pt | 포인트 | 1pt = 1/72 of 1in (문자 크기를 지정할때 사용) |
| pc | 파이카 | 1pc = 12 pt |
| mm | 미리미터 | 1mm = 1/10th of 1cm |
| cm | 센티민터 | 1cm = 96px/2.54 |
| in | 인치 | 1in = 96px = 2.54cm |
*px(픽셀)은 디바이스의 사이즈에 상대적이다.
저해상도 디바이스의 경우 1px = 하나의 픽셀 (도트)
고해상도 디바이스의 경우 1px = 여러 픽셀주로 px(픽셀) 값을 사용한다.
상대 단위
상대 단위란 부모 요소나 다른 요소의 크기에 영향을 받아 상황에 따라 크기가 상대적으로 변한다.
| 단위 | 설명 |
|---|---|
| em | 부모 요소의 크기에 영향을 받음 |
| rem* | 최상위 요소인 html 요소의 크기에 영향을 받음 |
| % | 부모 요소의 크기에 영향을 받음 |
| vw | viewport width의 약자 / 80vw="뷰포트 너비의 80%" |
| vh | viewport height의 약자 / 80vh="뷰포트 높이의 80%" |
| vmin | viewport의 최소값 |
| vmax | viewport의 최대값 |
*html의 기본 폰트 사이즈는 16px이므로 기본 상황에서 1rem = 16px을 의미한다.반응형 웹사이트를 제작할 때 rem을 주로 사용한다.
Frontend Developer