상대 단위
✅ 특징
- 다양한 플랫폼들에 유동적으로 적용할 수 있다.
단위 | 의미 |
em | 폰트의 기본 크기 값에 비례한 단위 |
ex | 폰트의 기본 X 높이에 비례한 단위 |
ch | "0"의 기본 폭에 비례한 단위 |
rem | 최상위 요소의 폰트 크기에 비례한 단위 |
vw | 뷰포트 너비에 비례한 단위 |
vh | 뷰포트 높이에 비례한 단위 |
vmin | 뷰포트의 최소 너비, 높이에 비례한 단위 |
% | 브라우저 기본 글꼴을 100%하고 상대적 크기를 나타냄 |
절대 단위
✅ 특징
- 규격이 정해져 있다
- 각 단위들 끼리 값 변환이 가능하다.
단위 | 의미 |
cm | 센티미터 단위 |
mm | 밀리미터 단위 |
in | 인치(inch) 단위로, 2.54cm과 같음 |
px | 픽셀(pixels) 단위로, 1/96inch와 같음 |
pt | 포인트(point) 단위로, 1/72inch와 같음 |
pc | 피카(picas) 단위로, 12pt와 같음 |
기타 단위
단위 | 의미 |
deg | 각도 |
grad | |
rad | |
turn | |
s | 시간 |
ms | |
Hz | 빈도 |
kHz | |
dpi | 해상도 |
dpcm | |
dppx |
'HTML&CSS' 카테고리의 다른 글
[CSS] 이미지 스프라이트(Image Sprite) (0) | 2022.07.18 |
---|---|
[HTML] 블록(block)을 감싸는 a태그 (0) | 2022.07.18 |
[HTML] <a> 태그에 target="_blank"추가 시 생길 수 있는 보안적 취약성 (0) | 2022.07.14 |
[HTML] form (0) | 2022.07.14 |
[HTML] tabindex (0) | 2022.07.13 |