⭐ CSS = 단위

　CSS를 사용하다 보면 느끼는 점이 하나 있다. CSS는 결국 단위가 좌우한다는 것이다. 같은 속성이라도 어떤 단위를 적용하는지에 따라 천차만별의 결과를 도출할 수 있기 때문에, 각 단위의 의미와 사용 목적을 잘 알 필요가 있다. 그러므로 이번 글에서는 CSS에서 사용할 수 있는 단위를 자세히 살펴보고자 한다.

🔍 CSS의 단위를 파헤쳐보자!

　CSS의 단위는 크게 절대 단위와 상대 단위로 구분할 수 있다. 이를 구분하는 기준은 바로 '값의 고정 여부'다. 즉 요소의 값을 고정적으로 설정할 것인지, 가변적으로 설정할 것인지에 따라 각각 절대 단위와 상대 단위로 분류할 수 있는 것이다. 좀 더 구체적으로 살펴보면 다음과 같다.

🔸 절대 단위

💡 절대 단위의 종류

단위	설명
cm	센티미터
mm	밀리미터
Q	1/4 밀리미터
in	인치
pc	Picas
pt	포인트
px	픽셀

　MDN에서는 CSS에서 사용할 수 있는 절대 단위의 종류를 위와 같이 명시하고 있다. 사실 웹에서 절대 단위는 px을 제외하고 잘 쓰이지 않는다. 보편적으로 책이나 신문과 같은 인쇄 콘텐츠는 항상 그 크기가 고정적이므로 절대 단위를 사용해야 한다. 그러나 웹은 디바이스나 사용자 환경에 따라 콘텐츠 크기가 유동적으로 변하기 때문에 절대 단위를 사용하면 콘텐츠의 유연성이 저하된다.

🔸 상대 단위

💡 상대 단위의 종류

단위	설명
em	요소 기준 글꼴 크기
ex	요소 글꼴의 x-height
ch	요소 글꼴의 glyph "0"의 사전 길이
rem	루트 요소(html) 기준 글꼴 크기
lh	요소의 줄 간격 높이
vw	뷰포트 기준 너비
vh	뷰포트 기준 높이
vmin	뷰포트 너비와 높이 중 작은 값 기준 단위
vmax	뷰포트 너비와 높이 중 큰 값 기준 단위

　MDN에서 명시하고 있는 CSS의 상대 단위 종류는 위와 같다. 상대 단위도 뭐가 굉장히 많지만, 실질적으로 자주 사용되는 단위는 em, rem, vw, vh 정도가 있겠다. 추가적으로 percentage 데이터 형식을 표현할 수 있는 %도 상대 단위로 자주 사용된다.

🤔 절대 단위 VS 상대 단위

　지금까지 살펴봤듯 웹에서는 콘텐츠의 유연성을 고려한다면 절대 단위보다는 상대 단위를 사용하는 편이 바람직하다고 볼 수 있다. 그렇다고 해서 무조건 상대 단위만 사용해야 하는 것은 아니다. 반응형 웹에서는 상대 단위의 사용이 유리하지만, 고정형 웹에서는 이야기가 또 달라진다. 오히려 고정형으로 만들어야 하는 경우에는 콘텐츠 크기가 유동적으로 변하면 안 되므로 절대 단위를 사용하는 것이 바람직하다. 또한 반응형 웹이라고 해서 모든 UI가 다 상대적인 크기를 가질 필요는 없다. 사용자에게 UI를 고정적인 크기로 보여주어야 하는 경우에는 당연히 절대 단위를 사용해야 할 것이다. 이처럼 제작하려는 사이트의 특성과 UI의 고정성을 토대로 절대 단위를 사용할지, 상대 단위를 사용할지 판단할 수 있어야겠다.

🙏 출처

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units