티스토리 뷰
요즘은 대부분 반응형 브라우저이기 때문에 반응형에서 사용되는 단위를 사용해야 할 것이다. 그중에서도 가장 많이 사용되는 단위가 rem과 em, 그리고 % 인데 도대체 언제 어떤 걸 사용해야 하는 걸까? 이번 기회에 제대로 알고 제대로 사용해보자.
em과 rem의 공통점
두 단위 모두 폰트 사이즈에 따라 변하는 가변 단위이다. 같은 방식이지만 어떤 엘리먼트이 폰트 사이즈가 기준이냐에 따라 나뉜다. 비율에 따른 가변 단위이지만 브라우저 상에는 픽셀 단위로 표현된다.
em 계산
상위 엘리먼트 폰트 사이즈 * em값 = 픽셀값
(상위 엘리먼트 폰트 사이즈가 18일 때)
1em = 18 * 1 = 18px
2em = 18 * 2 = 36px
10em = 18 * 10 = 180px
rem 계산
최상위 엘리먼트 폰트 사이즈 * rem값 = 픽셀 값
(최상위 엘리먼트 폰트 사이즈가 16일 때)
1rem = 16 * 1 = 16px
2rem = 16 * 2 = 32px
10rem = 16 * 10 = 160px
em과 rem의 차이점
rem(root em)은 최상위 엘리먼트 폰트 사이즈의 영향만 받는다. 최상위 엘리먼트에서 정한 폰트 사이즈가 기준인데 보통은 <html>의 폰트 사이즈이며 사용자가 임의로 설정하지 않는 이상 브라우저의 기본 폰트 사이즈는 대부분 16px이다. 사용자가 지정한 폰트 사이즈에 따라 반응하기 때문에 작업한 레이아웃이 유지된다.
em은 현재 엘리먼트의 폰트 사이즈에 대한 비율을 사용한다. 현재 엘리먼트의 특정 폰트 사이즈가 지정되어 있지 않다면, 폰트 사이즈가 지정되어 있는 가장 가까운 상위 엘리먼트의 상속을 받는다. 최상위 엘리먼트의 영향만 받는 em과는 달리, rem에 영향을 주는 상위 엘리먼트가 고정이 아닐 확률이 높다. 또한 em을 계속 사용하면 피라미드 식으로 계속 상속되므로 em을 사용할 시에는 상속에 유의해야 한다.
em 예시1
상위 엘리먼트에 폰트 사이즈가 지정이 되어있지 않다면, 최상위 엘리먼트의 폰트 사이즈인 16px를 기준으로 정해진다. 따라서 .txtBox의 패딩 사이즈는 16px이다.
16 * 1 = 16px
em 예시2
상위 엘리먼트에 폰트 사이즈가 지정되어 있다면, 그 엘리먼트의 폰트 사이즈가 기준이 되며 이 경우 피라미드 식으로 계산해야 한다.
.container 폰트 사이즈 = 16(브라우저 기본 폰트 사이즈) * 1.5 = 24px
.txtBox 패딩 사이즈 = 24 * 1 = 24px
em과 rem 언제 쓸까?
em은 변동성이 큰 요소의 경우 em을 사용하면 좋다. 내비게이션 메뉴의 경우 화면 사이즈의 변화에 따라 폰트 사이즈도 변한다면, 각 메뉴 사이 여백도 조절해주는 게 보기 좋은데 이 경우 padding, margin을 em으로 주면 대처하기 유용하다. 하지만 em은 상속에 계속 주의해야 하므로 꼭 필요할 때만 사용하도록 하자.
rem의 경우 최상위 폰트 사이즈의 비율이므로 사용자가 브라우저의 기본 폰트 사이즈를 조절하더라도 작업한 레이아웃이 틀어지지 않게 반응한다는 큰 장점이 있다. 브라우저에서 설정한 기본 폰트 사이즈에 따라 크기가 변해야 되는 곳에 쓴다. 고정 단위인 픽셀로 작업하는 경우가 종종 있는데, 이럴 경우 사용자가 시력의 문제 등으로 기본 폰트 사이즈를 조절하더라도 변하지 않기 때문에 사용자 입장에서는 불편할 수밖에 없다. 때문에 반응형 브라우저를 작업할 때는 고정 단위인 픽셀은 지양하는 게 좋다. 계산하기 번거롭다면 'rem 계산기'를 구글에 찾아보면 많이 나오니 자신에게 맞는 걸로 사용해보길 추천한다.
반응형에서 무조건 rem을 써야 할까?
화면 크기에 따라 변해야 하는 다중 칼럼 레이아웃의 경우 % 단위를 쓰는 게 더 적절하다. 꼭 고정해야 하는 요소라면 픽셀을 쓰는 게 맞다. 하지만 이러한 경우는 드물기 때문에, rem을 사용해도 되는지 꼭 살펴보길 바란다.
마치며
아무리 글로 설명해도 직접 사용해보기 전까지는 이해가 잘 되지 않을 것이다. 꼭 스스로 사용해보고 어떤 단위를 어떤 상황에 사용해야 적절한지 터득하길 바란다.
em, rem 지원 브라우저
IE 11 / Edge 14 버전 이후 / Firefox 52 버전 이후 / Chrome 49 버전 이후 / Safari 10.1 버전 이후 / Opera 45 버전 이후
'CSS' 카테고리의 다른 글
| CSS → CSS 전처리기 → BEM → CSS Module → CSS in JS (0) | 2022.06.23 |
|---|---|
| [CSS] 여러 형태의 삼각형(세모) 그리는 방법 (5) | 2021.07.03 |
| [CSS] 박스 모델(box model) 그리고 박스 사이징(box-sizing) (0) | 2021.07.02 |
| [CSS] 구체성 / 상속 / 캐스케이딩(Cascading) 정복하기 (0) | 2021.06.28 |
| [반응형웹] 모바일 퍼스트 CSS 작성하기 / 데스크탑 퍼스트 (3) | 2020.12.09 |