[CSS]: ch unit 왜 사용하면 안돼요?

개요

작업 중에 길이를 제한하여 정보를 제공해야 하는 경우가 있어서 이런저런 방법을 찾다가 발견한 ch unit.

잘 모르고 사용한다면 낭패를 볼 수 있겠다는 생각에 작성해 봅니다.

Length Units

CSS 에서는 길이를 지정하기 위해 여러 유닛들을 제공한다. 대략 나열해보자면 px , em , rem , % , ch , etc…

각각의 단위들은 절대 및 상대, 2개의 유형이 있습니다.

절대 길이 단위

단위	이름	다음과 동일
cm	센티미터	1cm = 37.8px = 25.2/64in
mm	밀리미터	1mm = 1/10th of 1cm
Q	4분의 1밀리미터	1Q = 1/40th of 1cm
in	인치	1in = 2.54cm = 96px
pc	Picas	1pc = 1/6th of 1in
pt	포인트	1pt = 1/72nd of 1in
px	픽셀	1px = 1/96th of 1in

이 중 사용하는 단위는 px이 유일합니다.

상대 길이 단위

단위	관련 사항
em	요소의 글꼴 크기
ex	요소 글꼴의 x-height
ch	요소 글꼴의 glyph "0"의 사전 길이 (너비)
rem	루트 요소의 글꼴 크기
lh	요소의 라인 높이
vw	뷰포트의 초기 컨테이닝 블록 너비 1%와 같음
vh	뷰포트의 초기 컨테이닝 블록 높이 1%와 같음
svw, svh	작은 뷰포트 각각의 너비 및 높이 1%
lvw, lvh	큰 뷰포트 각각의 너비 및 높이 1%
dvw, dvh	동적인 뷰포트 각각의 너비 및 높이 1%

CSS에서 ch unit을 사용하지 말아야 하는 이유

• 일관성 문제: ch 단위는 "0" 문자의 너비를 기준으로 하는데, 이는 폰트마다 다릅니다. 따라서 같은 ch 값이라도 다른 폰트에서는 다른 크기로 표시됩니다.
• 가독성 저하: 모든 문자의 너비가 동일하지 않기 때문에, 긴 텍스트에서 ch 단위로 너비를 설정하면 일부 줄이 예상보다 길거나 짧아질 수 있습니다.
• 브라우저 호환성: 오래된 브라우저에서는 지원이 제한적일 수 있습니다.
• 반응형 디자인 어려움: 다양한 화면 크기와 폰트 크기에 대응하기 어렵습니다.

참고

• mdn - CSS 값과 단위