728x90
CSS에서 사용되는 다양한 단위들이 있다.
- em
- rem
- ch
- ex
- vh
- vw
- vmin
- vmax
천천히 알아보겠다.
em이란?
부모 요소의 font-size를 기준으로 한 상대 단위
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 부모의 font-size 16px * 1.5 = 24px */
}
rem이란?
최상위 루트 요소(html)의 폰트 크기를 기준으로 한 상대 단위 (전체 사이트에서 일관된 크기로 설정하기 유용)
r은 root(최상위)를 뜻한다.
html {
font-size: 16px;
}
.container {
font-size: 2rem; /* 16px * 2 = 32px */
}
em과 rem의 다른점?
<html>
<body>
<div>
<div>Inner Divs<div>
</div>
</body>
</html>
html {
font-size: 16px;
}
div {
font-size: 2rem or 2em;
}위의 코드가 있을 때 rem의 경우 div가 몇 개 있든지 font-size는 16 * 2 = 32px로 표현되지만, em의 경우 div가 2개 있기 때문에 Inner Divs의 font-size는 16 * 2 * 2 = 48px로 표현된다. 즉, 각 부모의 font-size를 상속받아 점점 커지게 된다.
ch란?
문자 (char) 하나의 너비를 기준으로 한 단위로, 입력 필드의 너비나 코드 블록 등 고정폭 글자 기준의 레이아웃에 사용된다.
input {
width: 20ch; /* 영문자 20개의 너비 */
}
ex란?
현재 글꼴의 소문자 x의 높이 (x-height)를 기준으로 한 단위로, 폰트의 비율적 레이아웃을 만들 때 사용된다. (세밀한 조정 필요시)
sup {
position: relative;
bottom: 1ex;
}
sub {
position: relative;
bottom: -1ex;
}위첨자와 아래첨자 사용시에 유용하다.
vh란?
viewport height의 약자이며, 브라우저의 화면 높이 대비 백분율을 말한다.
.full-width {
width: 100vw; /* 화면 전체 너비 */
}
vw란?
viewport width의 약자미여, 브라우저의 너비와 높이 중 작은 쪽을 기준으로 한 백분율을 말한다.
.square {
width: 50vmin;
height: 50vmin; /* 뷰포트의 작은 쪽의 절반 크기 */
}
vmin이란?
브라우저의 뷰포트의 너비와 높이 중 작은 쪽을 기준으로 한 백분율을 말한다.
.square {
width: 50vmin;
height: 50vmin; /* 뷰포트의 작은 쪽의 절반 크기 */
}vmax란?
브라우저의 뷰포트의 너비와 높이 중 큰 쪽을 기준으로 한 백분율을 말한다.
responsive-box {
width: 50vmax;
height: 50vmax; /* 뷰포트의 큰 쪽의 절반 크기 */
}
표로 정리해보면 다음과 같다.
| em | 부모 요소 폰트 크기 |
| rem | 루트 요소 폰트 크기 |
| ch | 0 문자 너비 |
| ex | x-height |
| vh | 뷰포트 높이 |
| vw | 뷰포트 너비 |
| vmin | 뷰포트 너비·높이 중 작은 값 |
| vmax | 뷰포트 너비·높이 중 큰 값 |
728x90
'TECH' 카테고리의 다른 글
| Vue / React / Angular 🛜 (6) | 2025.06.13 |
|---|---|
| canvas (4) | 2025.05.31 |
| as const (0) | 2025.05.27 |
| setHTMLUnsafe (2) | 2025.05.26 |
| content-visibility 속성 (2) | 2025.05.22 |
