em과 rem
em과 rem은 CSS 상대 단위 중 하나이다. 절대 단위인 px와는 다르게 동작한다. 상대 단위와 절대 단위의 차이는, 현실에서 km²와 여의도 x배의 면적 차이와 동일하다. 마찬가지로, 1px는 어느 곳에서나 1px이지만, 1em이나 1rem은 상황에 따라 달라질 수 있다.
em은 요소의 글꼴 크기
1em은 요소의 글꼴 크기다. 1em은 해당 element의 font-size 값과 동일하다. element의 글꼴 크기가 12px이면, 1em은 12px이 되고, 2em은 24px이 된다.
rem은 루트 요소의 글꼴 크기
1rem은 루트 요소의 글꼴 크기다. 1rem은 루트 요소(일반적으로 <html> 태그) font-size 속성의 값과 동일하다. 일반적으로는 브라우저에서 지정한 값인 16px을 나타내게 된다. 루트 요소의 글꼴 크기가 16px이면 1rem은 16px이고 2rem은 32px이 된다.
브라우저 글꼴 크기는 달라질 수 있다.
브라우저 글꼴 크기는 사용자가 변경할 수 있다. 기본 값을 사용하면 16px를 나타내지만, 저시력 사용자는 20px로 지정할 수도 있다.
em과 rem 선택하기
정말 특정 요소의 글꼴 크기에 비례하여 사이즈를 지정해야 하는 경우(예: 윗 첨자 등)가 아니라면, rem을 선택하는 것이 좋다. %나 vw, vh에 비해 em은 현재 element의 font-size를 알지 못하면, 예측하기 어려워진다. 현재 element에 font-size 속성이 없으면 부모의 font-size을 알아야 한다. 그렇기 때문에 되도록 rem 속성을 사용하는 것이 좋다.
em, rem을 꼭 써야 하는 걸까?
웹 페이지를 반응형으로 설계하는 것은 필수라고 할 수 있을 정도로 많이 고려되고 있다. 하지만 무턱대고 em이나 rem을 사용하는 것은 문제가 될 수 있다. rem을 사용하면 문제가 없는 것 아니냐고 할 수도 있지만, 위에서 말했듯이 브라우저의 글꼴 크기는 사용자가 변경할 수 있다. 사용자가 글꼴 크기를 변경했을 때의 경우를 대비하여 디자인한 것이 아니면, rem을 사용할 필요도 없다. 16px를 1rem으로 바꿔서 사용했을 뿐이다. em과 rem을 사용한 것이 반응형 디자인을 보여주는 것은 아니다.
em과 rem을 사용하면 좋은 경우
접근성 향상에 있어서 em과 rem은 좋은 도구다. 네이버 뉴스의 사례가 좋은 예시라고 볼 수 있다. 네이버 뉴스는 아래와 같이 글꼴 사이즈를 조정할 수 있다.
글꼴 크기를 '작게'에서, '최대 크게'로 조정함에 따라 특정 element의 font-size를 17px에서 21px 사이로 변경한다. 뉴스 본문 콘텐츠들은 이 font-size에 따라 움직이게 되는 것이다.
반응형 디자인과 em, rem
em과 rem을 정말, 16px의 대체 표현으로 사용하지 않으려면, 표현부터 변경해야한다. 16px인 본문 글씨 크기보다 12px 작은 글씨가 필요할 때를 가정해본다. 이때, 12px라고 표현하는 것이 아니라, 0.75em, 혹은 75%으로 표현해야 한다.
요약
1. em과 rem은 px과 다르게 상대적인 단위이다.
2. em은 현재 element에, rem은 root element의 font-size에 기반한다.
3. em을 꼭 써야할 필요가 없다면, rem을 우선적으로 사용하는 것이 좋다.
4. em과 rem을 꼭 써야 하는지는 디자인 표현이 상대적인지가 중요하다.
'Web Programming > HTML & CSS' 카테고리의 다른 글
| [CSS] img태그의 src를 css로 대체하는 방법 (2) | 2022.01.20 |
|---|---|
| [CSS] img태그에서 ::after 및 ::before 안되는 이유 (0) | 2022.01.20 |
| [CSS] span에서의 ... 말 줄임표(text-overflow: ellipsis 속성) 처리 (0) | 2020.10.07 |
| CSS) 한가운데 div 배치하기(가로세로중앙정렬) (0) | 2019.02.08 |
| CSS에서의 vh와 vw (0) | 2018.09.26 |
