CSS에는 글자의 크기나 길이를 표현하기 위한 다양한 단위가 존재합니다. 단위는 크게 상대단위와 절대단위로 구분이 가능한데요.
상대단위는 기준이 되는 대상의 크기에 따라 동적으로 변하는 단위로 아래와 같은 단위들이 존재합니다.
1. em
부모에게 상속받은 현재 폰트를 1em으로 두고 그에 비례하여 크게 또는 작게 하는 단위. 부모에 비례하기 때문에 아래와 같이 여러 대의 부모를 가지는 경우 연속적으로 이전 부모에 의존하여 통제가 힘들어질 수 있습니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-size: 2em;">1</p>
<div style="height:100vh; background-color: lime;">
<div style="font-size: 2em;">1
<div style="font-size: 2em;">2
<p style="font-size: 2em;">3</p>
</div>
</div>
</div>
</body>
</html>
다만, 텍스트 요소가 다른 요소를 포함하는 경우 이러한 크기는 상속되지 않습니다.
<h1 style="font-size: 2em;">
no
<h1 style="font-size: 2em;">
no
</h1>
</h1>
2. rem
기본 폰트를 1rem으로 두고 그에 비례하여 크게 또는 작게 하는 단위. em에 root가 붙은 형태로 항상 루트를 기준으로 하여 통제가 쉽기 때문에 널리 사용됩니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="height:100vh; background-color: lime;">
<div style="font-size: 2rem;">1
<div style="font-size: 2rem;">2
<p style="font-size: 2rem;">3</p>
</div>
</div>
</div>
</body>
</html>
3. vw
viewport의 너비를 100%로 두고 비례해서 너비산정
4. vh
viewport의 높이를 100%로 두고 비례해서 높이산정
5. vmin
viewport의 높이와 너비 중 작은 값을 100%로 두고 비례해서 크기산정
6. vmax
viewport의 높이와 너비 중 큰 값을 100%로 두고 비례해서 크기산정
7. %
절대단위는 정적단위로 그 크기가 고정적인 단위를 말하며 종류는 아래와 같습니다.
1. cm
2. mm
3. in
4. px
5. pt
6.pc
<p> tag 기본 폰트 사이즈인 16px을 기준으로 단위를 환산해 보겠습니다.
16px = 100% = 1rem = 1em
마무리
이상으로 CSS 단위에 대해서 알아보았습니다.
참고
CSS Units
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 컴포넌트 - 로딩 (9) | 2023.02.03 |
|---|---|
| 기본 스타일 - 리셋 (0) | 2023.01.28 |
| Inline VS Block and Inline-block (0) | 2022.12.30 |
| Absolute (0) | 2022.12.29 |
| Fixed (0) | 2022.12.29 |
