CSS 단위
CSS에는 다양한 형태의 단위가 있으며, 이것을 상황에 맞게 효율적으로 사용하는 것이 좋습니다.
font-size
문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다.
px
font-size: 12px;
픽셀(px)은 해상도에 따라 상대적으로 달라지는 기본 단위 입니다.
%
font-size: 150%;
부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위 입니다. 특별한 설정이 없다면 16px가 100%입니다.
em
font-size: 1.5em;
부모 요소의 글자 크기를 100% 기준으로 계산한 100 분의1 단위 입니다. 특별한 설정이 없다면 16px이 1em 입니다.
rem
font-size: 1.5rem;
rem은 em과 비슷하지만 부모 요소가 아닌 "최상위 요소"의 크기를 100% 기준으로 계산합니다.
vw, vh
font-size: 10vw;
vw는 뷰포트 너비값의 100분의 1단위, vh는 뷰포트 높이값의 100분의 1 단위 입니다.
단위 환산
CSS의 각각의 단위마다 서로 대응되는 단위 값 입니다.
px | % | em | pt |
---|---|---|---|
6 px | 37.50% | 0.375 em | 5pt |
7 px | 43.80% | 0.438 em | 5 pt |
8 px | 50% | 0.500 em | 6 pt |
9 px | 56.30% | 0.563 em | 7 pt |
10 px | 62.50% | 0.625 em | 8 pt |
11 px | 68.80% | 0.688 em | 8 pt |
12 px | 75.00% | 0.750 em | 9 pt |
13 px | 81.30% | 0.813 em | 10 pt |
14 px | 87.50% | 0.875 em | 11 pt |
15 px | 93.80% | 0.938 em | 11 pt |
16 px | 100% | 1.000 em | 12 pt |
17 px | 106.30% | 10.063 em | 13 pt |
18 px | 112.50% | 1.125 em | 14 pt |
19 px | 118.80% | 1.188 em | 14 pt |
20 px | 125.00% | 1.250 em | 15 pt |
21 px | 131.30% | 1.313 em | 16 pt |
22 px | 137.50% | 1.375 em | 17 pt |
23 px | 143.80% | 1.438 em | 17 pt |
24 px | 150.00% | 1.500 em | 18 pt |
'CSS' 카테고리의 다른 글
Illustrator - 사슴 그리기 (9) | 2022.08.24 |
---|---|
색상 표현 방법 (5) | 2022.08.24 |
Illustrator - 토끼 그리기 (5) | 2022.08.22 |
이미지 스프라이트 / IR효과 / 백그라운드 표현 (3) | 2022.08.20 |
강아지 애니메이션 만들기 (4) | 2022.08.18 |
댓글