CSS 단위 종류
css에서 여러가지 단위가 존재하는데 크게는 절대적 단위와 상대적 단위로 나뉘어 사용할 수 있다.
📌 절대 단위
| 단위 | 계산 |
|---|---|
| cm | 1cm = 96px/2.54 |
| mm | 1mm = 1/10th of 1cm |
| px | 1px = 1/96th of 1in |
| pt | 1pt = 1/72th of 1in |
👉 절대 단위는 다른 요소와 상관없이 절대적인 값을 가진다. 보통 절대 단위로는 px을 사용한다.
📌 상대 단위
| 단위 | 설명 |
|---|---|
| em | 요소의 글꼴 크기 |
| rem | 루트(root) 요소의 글꼴 크기. |
| vw | viewport 너비의 1%. |
| vh | viewport 높이의 1%. |
| vmin | viewport 의 작은 치수의 1%. |
| vmax | viewport 의 큰 치수의 1%. |
👉 상대 단위는 다른 요소와 관련이 있으며 이를 사용하면 텍스트나 다른 요소의 크기에 따라 유연하게 요소의 크기를 관리할 수 있다.
📌 상대 단위 사용법
💬 1. 부모와 상관이 있는가? - em, % 사용
💬 2. 부모와 상관이 없는가? - rem, v* 사용
💬 3. 요소(박스)의 높이와 너비에 따라 변경되어야 하는가? - %, v*, flex 사용
💬 1. 부모와 상관이 있는가?
부모 요소에 따라 변화할 필요가 있는 것들은 em이나 % 를 사용할 수 있다. em 단위는 부모요소 의 글꼴 크기를 의미한다. em의 예시를 살펴보자.
📝 html
<div class="parent">
Parent
<div class="child">Child</div>
</div>📝 css
.parent{
font-size: 8em;
/* 16px * 8 = 128px */
}
.child{
font-size: 0.5em;
/* 128px * 0.5 = 64px */
}📝 결과
기본적으로 body에 설정된 폰트 사이즈를 기준으로 em이 계산되는데, 여기에서는 16px로 지정되어있다. 따라서 위에 parent의 8em은 128px이 되고 그 자식요소는 그대로 128px를 물려받은 후 0.5em 을 환산하기 때문에 64px이 되는 것이다.
👉 주의할 점 (중첩된 형태)
📝 html
<div class="level1">
<h1>level 1</h1>
<div class="level2">
<h1>level 2</h1>
<div class="level3">
<h1>level 3</h1>
</div>
</div>
</div>📝 css
.level1 {
/* 32px */
font-size: 2em;
background-color: pink;
padding: 0.5em; /* 이렇게 해주면 폰트 사이즈에 따라 패딩 달라짐 */
}
.level2 {
font-size: 2em;
background-color: pink;
padding: 0.5em;
}
.level3 {
font-size: 2em;
background-color: pink;
padding: 0.5em;
}📝 결과
위와 같이 div 요소가 중첩되어 있음을 볼 수 있는데, 이런 경우에 em을 사용한다면 무분별하게 단위가 상속되어 중첩될 수 있으므로 주의해야한다.
💬 2. 부모와 상관이 없는가?
rem(root em) 은 root 에 지정된 size에 따라 값이 지정된다. 즉 최상위 요소(html)의 사이즈를 기준으로 삼는다. 1번의 예제에서 css만 변경해보겠다.
📝 css
.parent{
font-size: 8rem;
/* 16px * 8 = 128px */
}
.child{
font-size: 0.5rem;
/* 16px * 0.5 = 10px */
}📝 결과
글씨가 너무 작아서 잘보이지 않지만, em을 썼을 때에 부모 요소에 영향을 받았다면 rem을 사용했을 때에는 부모 요소에 영향을 받지 않고 root 요소 기준에 따라 계산된 것을 볼 수 있다.
💬 3. 요소(박스)의 높이와 너비에 따라 변경되어야 하는가?
요소의 크기에 따라 변해야한다면 %, vh, vw, flex 등을 사용할 수 있다. vh 등 화면 크기에 동적으로 대응하기 위한 % 요소를 viewport라고 부르는데, viewport 요소에 대하여 설명해보겠다.
1. vh
브라우저 높이에 따른 %
📝 css
.parent{
font-size: 8rem;
height: 100vh; /* 브라우저 높이에 100% 크기로 */
}📝 결과
다음과 같이 100vh 로 설정하면 브라우저 높이를 꽉 채운다.
2. vw
브라우저 너비에 따른 %
3. vmin
브라우저 높이와 너비(vh, vw) 중에 작은 값 기준으로 1/100
(이미지 출처: https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573)
4. vmax
브라우저 높이와 너비(vh, vw) 중에 큰 값 기준으로 1/100
(이미지 출처: https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573)
📌 마지막 정리~!
예제만 봐서는 어떤 상황에서 어떤 단위를 써야하는지 확 와닿지는 않는다. 많은 연습을 통해 익숙해지는 것이 중요하다. 디자인에 따라, 마크업에 따라 어떤 단위를 써야 적절할지 달라지기 때문이다.
👉 유용한 사이트
em과 px단위를 쉽게 계산해주는 사이트이다. 절대적 단위인 px에만 익숙해져 있다보니 위 사이트를 유용하게 사용하여 em을 연습할 수 있을 것 같다..!
