본문 바로가기
CSS

CSS 단위

by 코딩 냠냠 2022. 8. 24.
728x90
반응형

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

댓글


자바스크립트

Javascript

자세히 보기
html
css
광고 준비중입니다.
<