[CSS] CSS 단위 종류 및 고찰

CSS 단위 종류 및 단위의 고찰

CSS의 단위의 종류를 설명하는 포스팅입니다.

font-size, 단위의 고찰

문자의 글자 크기를 지정하는 속성이며 크기를 명시하지 않을 시 기본 크기는 16px입니다.

1. px

해상도에 따라 상대적으로 달라지는 기본 단위입니다.

font-size: 12px;

2. %

부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로, 다음과 같이 표현합니다.
특별한 설정이 없다면 16px이 100%가 되므로, 150%는 24px이 됩니다. 부모 요소가 10px이라면 150%는 15px이 되죠.

font-size: 150%;

3. em

부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로, 다음과 같이 표현합니다.
특별한 설정이 없다면 16px이 1em가 되므로, 1.5em은 24px(16px × 1.5 = 24px)이 됩니다. 부모 요소가 10px이라면 1.5em는 15px이 되죠.

font-size: 1.5em;

글자 크기를 각 단위로 환산하면 다음과 같습니다.

px	%	em	pt
8px	50%	0.500em	6pt
12px	75%	0.750em	9pt
16px	100%	1.000em	12pt
20px	125%	1.250em	15pt
24px	150%	1.500em	18pt

4. rem

rem은 em과 비슷하나 부모요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산합니다. rem의 r은 root 즉, html 요소를 뜻하므로 html 요소에서 지정한 글자 크기가 1rem이 됩니다.

font-size: 1.5rem;

아래의 예제에서 em과 rem의 차이점을 알아봅시다.

<head>
    <meta charset="UTF-8">
    <title>글자의 단위</title>
    <style type="text/css">
        ① html { font-size: 24px; }
        ② ul { font-size: 12px; }
        ③ li { font-size: 1.5em; }
        ④ li:nth-child(4) { font-size: 1.5rem; }
    </style>
</head>
<body>
    <p>오늘 진료는 본관에서 실시합니다.</p>
    <ul>
        <li>내과</li>
        <li>이비인후과</li>
        <li>정형외과</li>
        <li>피부과</li>
    </ul>
</body>
</html>

① root - 최상위 요소의 글자 크기를 24px로 지정
② ul의 글자 크기는 12px로 지정
③ 모든 li의 글자 크기는 부모 요소인 ul 글자 크기 12px의 1.5배 즉, 18px
④ 네 번째 li의 글자 크기는 최상위 요소 html의 글자 크기의 1.5배 즉, 36px

5. vw, vh

vw는 뷰포트 너비값의 100분의 1 단위, vh는 뷰포트 높이값의 100분의 1 단위이며 다음과 같이 표현합니다.

font-size: 10vw;

위 예문은 글자 크기가 뷰포트 너비의 10% 크기라는 의미입니다.

다음 예제에서는 h3는 뷰포트의 5%에 해당하는 글자 크기를 갖게 되고, p는 뷰포트의 50%에 해당하는 가로 크기를 가지게 됩니다.

<head>
<meta charset="UTF-8">
<title>뷰포트 기준 단위</title>
<style type="text/css">
    h3 { font-size: 5vw; }
    p { font-size: 50vw; }
</style>
</head>
<body>
    <h3>과일</h3>
    <p>여름 복숭아는 장마철 재배했을 때 비를 맞아 당도가 떨어지는 경우가 많다.</p>
</body>
</html>

'CSS' 카테고리의 다른 글

[CSS] 요소 숨기는 방법 알아보기 (9)	2022.08.25
[CSS] 색상 표현하는 방법 알아보기 (8)	2022.08.23
[CSS] 이미지 스프라이트 + 백그라운드 & IR 효과 (4)	2022.08.20
[CSS] SCSS & Pug 활용 - 강아지 애니메이션 만들기🐶 (10)	2022.08.18
[CSS] Sass(SCSS) 알아보기 (3)	2022.08.18

코딩공책📚

[CSS] CSS 단위 종류 및 고찰

CSS 단위 종류 및 단위의 고찰

font-size, 단위의 고찰

1. px

2. %

3. em

4. rem

5. vw, vh

'CSS' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[CSS] CSS 단위 종류 및 고찰

CSS 단위 종류 및 단위의 고찰

font-size, 단위의 고찰

1. px

2. %

3. em

4. rem

5. vw, vh

'CSS' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바