[CSS] 절대 단위와 상대 단위 정리
절대단위와 상대단위는 반응형 웹을 구현하기 위한 기본 지식 중 하나이다. 이 글에서는 이들에 대해 간단히 정리한다.
두 단위의 차이
두 단위는 화면의 크기(뷰포트)에 따라 값이 변동되는지의 여부로 구분한다.
절대단위는 뷰포트에 상관없이 늘 일정한 크기를 유지한다. 반면, 상대 단위는 그렇지 않다.
따라서 절대단위는 화면 크기에 상관없이 일정한 크기를 유지해야 할 때 사용하고, 상대 단위는 그 반대의 경우에 사용한다. 여기서는 주로 반응형 웹에 많이 사용되는 상대 단위를 중심으로 알아보자.
절대 단위를 많이 사용하지 않는 이유
px 처럼 익숙한 단위 외에도 pt, cm, mm, in 등 다소 생소한 단위들도 몇 가지 있다.
cm, mm, in는 현실에서 사용하는 단위와 동일하지만 화면 상에서는 px 단위로 전환되어 출력된다. 이 전환은 상대 단위도 마찬가지다.
따라서, 개발자는 절대단위를 사용할 때 px을 사용하는 편이고, 위 단위들은 인쇄물에서 대상의 크기를 계산할 때 주로 사용한다.
절대 단위를 잘 사용하지 않는 이유
웹 디자인에서 절대 단위는 상대 단위에 비해 많이 사용되지 않는데, 그 이유는 다음과 같다.
DPI에 따른 일관성 문제
DPI란, 화면 상 1인치 당 들어가는 픽셀 수이다. 따라서, DPI가 높은 모니터일수록 같은 크기라도 해상도가 더욱 선명하다. 하지만, 동일한 픽셀의 요소가 DPI에 따라 크기가 달라지므로 웹디자이너의 관점에서는 화면 간에 크기를 예측하기 어려워진다.
이는 px에서도 동일하게 나타날 수 있는 문제다.
스타일 일괄 관리의 불편함,
rem이나 em같은 상대단위는 웹 문서의 기본적인 글꼴 크기와 연동되기 때문에, 최고 레벨이나 부모 레벨의 단위를 수정하는 것으로 하위 레벨의 단위를 일괄 수정할 수 있다. 반면, 절대 단위는 레이아웃 요소 간에 연동이 안되기 때문에, 수정이 필요하면 일일히 수정해야 한다. 이는, 서로 다른 뷰
반응형 디자인의 어려움
현대의 모니터와 디바이스는 다양한 크기를 가지고 있기 때문에, 웹 서비스는 모든 뷰포트에서 일관된 레이아웃을 제공할 수 있어야 한다. 하지만, 절대 단위는 앞서 말한 연동 기능이 없기 때문에 어렵다.
접근성
상대 단위는 사용자가 글꼴의 크기를 변경할 때 같이 연동된다. 반면, 절대단위는 그렇지 않다.
이런 이유들 때문에 반응형 디자인이 필수인 요즘 웹 디자인에서는 상대단위를 주로 사용한다
상대단위
상대 단위란, 뷰포트나 브라우저의 font-size에 의존하여 유동적인 값을 의미한다.
em, rem
배경 지식으로, font size는 상위 요소로부터 상속된다. 그리고 html 문서의 최상위 요소는 html 태그이고 기본 값은 16px로 설정된다. 만약 요소에 font size를 명시하지 않았다면 부모로부터 상속받은 font size가 적용되어 16px이 될 것이다.
이제 두 단위에 적용 예시는 다음과 같다.
- 1em => 16px * 1 = 16px
- 2em => 16px * 2 = 32px
- 0.5rem => 16px * 0.5 =8px
em과 rem의 차이
기준점이 되는 요소가 차이난다. em은 요소 자신의 font size를 참조한다. 반면, rem은 root 요소인 html을 기준으로 삼는다.
둘 중 어떤 걸 사용하는가
em이 참조하는 요소 자신의 font size는 부모로부터 상속된다. 그러나, 그 부모도 역시 자신의 부모로부터 상속받을텐데, 이런 중첩 태그 간에 em을 사용하면 예측이 어려워지고 부모를 수정할 때 자식도 크게 영향을 받는다. 따라서 최 상위 요소만 신경쓰면 되는 rem이 유지보수에 편리하다.
사례
적응형 웹 디자인을 위해서 뷰포트 크기에 따라 html의 font size 조정
html {
font-size: 62.5%;
}
@media screen and (max-width: 500px) {
html {
font-size: 31.25%;
}
}
소수점 문제
1rem은 기본적으로 16px로 설정된다. 따라서, 여기서 1px이나 2px을 줄이려면 약간의 계산이 필요하다.
가령, 15px을 구한다면
15px == 15/16 rem = 0.9375rem이 된다.
제대로 계산되지 않은 rem은 소수점 px 값이 되기 쉽다. 소수점 px은 웹 브라우저에서 안티엘리어싱 처리를 통해 구현되므로 표면이 흐려지고 가독성에 좋지 않다.
여기에는 두 가지 방법이 있는데, 하나는 rem 기준 값을 16px로 잡고 주로 사용되는 px을 공식으로 따로 구하는 방법이다.
이 공식을 난 아래의 사이트를 참조한다.
CSS - 반응형 웹 텍스트의 핵심 em과 rem 을 이해하자 - Understand CSS em & rem
지정이 됩니다. 이에 반해 em은 상위 요소의 크기를 상속받아 배율로 크기를 정합니다. rem은 호환성이 em보다 조금 떨어지지만, 현재 웹브라우저에서는 거의 모든 버전에서 지원하기 때문에 호환
apost.dev
두 번째 방법은 기준 rem 값을 10px로 잡는 것이다. 보통은 html의 font-size를 62.5%로 작성한다.
상대 단위인 vw, vh, vmin, vmax에 비해 이 두 단위는 상대적인 제어가 편하면서도 뷰포트에 의해 너무 수시로 변동되지 않아야 할 때 유용하다. 따라서 font size를 제어할 때 편리하다.
반응형 웹에서 모범 사례
rem을 기반으로 모든 요소의 font size를 컨트롤한다. 그리고 media-query로 화면 크기에 따라 font-size를 조정해준다.
일반적으로 컴포넌트가 어디서 사용되든 일관적 사이즈를 가져야 한다면 rem, 컴포넌트가 부모 요소에 의존적이면 em을 사용하자.
%
부모로부터 상속받은 요소 자신의 값을 기준으로 배율을 설정한다.
요소 자신의 width가 100px이면, 200%로 설정하면 100 * 2 =200px 이 되는 원리
주로 box model의 content 크기를 계산할 때 많이 사용하는데, 고정 값을 주는 게 아니라 자기가 상속받은 기본 값을 이용하다 보니, box model의 상속에 대해 잘 알고 있어야 한다.
예컨대, width는 기본적으로 상속이지만, flex 설정된 box는 width가 내부 요소만큼으로 줄어든다.
vh, vw
뷰포트를 기준으로 한다.
vh는 뷰포트의 높이
vw는 뷰포트의 너비다.
보통 독립적인 컴포넌트의 최상위 너비와 높이를 규정할 때 사용한다.
예컨대, 모달같은 거
특정 레이아웃에 종속된 내부 요소에 사용하면 거의 무조건 오버플로우가 나고 레이아웃이 깨지기 때문에 사용하면 안된다.
vmin, vmax
뷰포트의 가로와 세로 중 더 낮은 쪽이나 더 높은 쪽을 기준으로 삼는다.
아직 나도 한번도 사용해보지 못했다.
참고자료
https://www.daleseo.com/css-em-rem/
https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units