CSS 단위 정리
CSS에는 다양한 단위가 존재한다.
각 단위들에 대한 설명과 특징을 정리해봤다.
px
- 절대적인 값
- 다른요소의 값에 영향을 받지 않는다.
em
- 상대적인 값
- 1em은 현재 요소의 font-size를 의미한다.
font-size는 자식 요소로 상속된다.
👉 자식 요소는 font-size 기본값으로 부모 요소의 font-size ( = 1em ) 를 갖는다.
rem
- 상대적인 값
- 1rem은 최상위 요소 ( 보통
<html>태그 )의 font-size를 의미한다.
%
- 상대적인 값
- 상속된 사이즈, 또는 기본값으로 지정된 사이즈에 대해 백분율 단위의 상대적인 사이즈를 지정한다.
vw, vh
- 상대적인 값
- 각각 view width, view height을 의미
- 뷰포트, 즉 브라우저 화면의 너비값과 높이값을 100분할한 단위
- 브라우저 화면을 확대하거나 축소하면 그에 따라 유동적으로 바뀐다.
vmin, vmax
- 상대적인 값
- 브라우저 화면의 너비값과 높이값 중 작은 값은 vmin 값이, 큰 값은 vmax 값이 된다.
- 브라우저 화면을 확대하거나 축소하면 그에 따라 유동적으로 바뀐다.
- 브라우저의 높이 또는 너비를 가득 채우는 요소의 크기 제어에 유용하게 사용된다.
ex, ch
- 상대적인 값
- ex, ch는 em, rem과 유사
ex, ch와 em, rem의 차이점
👉 ex, ch는 폰트의 특정 수치에 기반하지만 em, rem은 font-family 자체에 의존한다 - ex
- 현재 폰트의 x-높이값 또는 em의 절반 값
- x-높이값은 소문자
x의 높이값이다. - 폰트의 중간 지점 높이를 알아내기 위해 자주 사용한다.
- 위첨자, 아래첨자 설정 등 폰트에 대한 세밀한 조정이 필요할 때 사용한다.
🔍 더 자세한 내용은 웹 타이포그래피 해부학 참고
- ch
- 글꼴의 단위
- 제로 문자
0의 너비값의 고급 척도로 정의 width: 40ch;는 너비값이 40개의 문자열을 포함한다는 의미이다.
참고한 글
개발에 뛰어든 UX/UI 디자이너