지난번 포스팅에서는 미디어 쿼리(Media Query)를 적용하여 화면 크기에 따라 화면 요소를 보이거나 가리는 작업을 진행하였다. 원하는 기준점에 맞는지 미디어 쿼리를 통해 확인을 하고 해당 조건이 맞을 경우 작성한 css 스타일을 적용하였다.
[반응형 웹] 미디어 쿼리 적용하기
지난번 포스팅에서는 가변 그리드/마진/패딩을 적용해서 화면의 크기에 따라서 가변적으로 컴포넌트의 크기가 변하도록 하는 작업을 진행하였다. 컴포넌트 간 포함 관계를 이용해서 % 단위로
firsteast.tistory.com
이번 포스팅에서는 `em`과 `rem`을 사용해서 반응형 폰트 크기 적용기를 기록하려고 한다.
em / rem
em과 rem은 둘 다 기본 개념은 %와 유사하다. 부모 요소의 폰트 크기를 기반으로 반응형으로 적용하고 싶은 폰트 크기를 비율로 표현한 것이다. %와 차이점이 있다면 %는 자식 요소의 크기를 부모 요소의 크기로 나눈 값의 100을 곱한 수치를 작성했지만 em과 rem은 100을 곱하지 않고 그대로 소수점으로 사용한다. em/rem의 값이 1보다 크다면 자식 요소는 부모 요소 폰트 크기에 비례하여 큰 폰트 크기를 갖게 되고 반대의 경우는 부모 요소 폰트 크기에 비례하여 작은 폰트 크기를 갖게 된다.
rem은 em과 차이점이 있다면 상속받는 부모 요소의 차이이다. 요소를 포함하고 있는 부모 요소로부터 폰트 크기를 상속받아 표현하는 em과 달리 rem은 최상위 요소인 html 태그의 폰트 크기를 상속받아 표현한다. 즉, 전체 페이지에 설정된 폰트 크기를 기반으로 표시한다는 것이다.
예를 들어 폰트 크기가 25px인 html 태그와 폰트 크기가 20px인 div, 그리고 div의 자식 태그인 span 태그를 예로 들어보자.
<html style="font-size: 25px">
<head>
...
</head>
<body>
<div style="font-size: 20px">
<span style="font-size: 10px">
</div>
</body>우리는 이 span 태그의 폰트를 10px로 만들고 싶다.
- em으로 이를 표현하면 span 태그의 폰트 크기인 10px를 span 태그를 감싸고 있는 div 태그의 폰트 크기인 20px로 나눈 0.5em으로 표시하면 된다.
- rem으로 이를 표현하면 span 태그의 폰트 크기인 10px를 html 태그의 폰트 크기인 25px로 나눈 0.4rem으로 표시하면 된다.
em과 rem은 상황에 맞게 사용하면 된다. 만약 화면을 구성하는 개별 요소에 따라서 폰트 크기를 조절하고 싶다면 em을, 화면 전체에 맞게 비율적으로 조절하고 싶다면 rem을 사용하면 되겠다.
rem 적용하기
나는 rem을 적용하였다. 이를 위해 html 태그의 폰트 크기를 화면 크기에 따라 다르게 설정해주기 위해서 미디어 쿼리를 적용하여 다음과 같이 수정하였다.
html 태그에 미디어 쿼리를 적용하지 않고 그대로 1.2rem을 쓸 경우 화면 크기에 상관없이 글씨 크기가 매우 크기 때문에 작성해둔 디자인이 깨지거나 글씨가 넘어가는 등의 상황이 발생한다. 이를 막기 위해 미디어 쿼리를 적용하여 작은 화면에서는 html 태그 자체의 폰트 크기를 줄여줌으로써 줄여진 폰트 크기에 비례하여 요소들이 폰트 크기를 가변적으로 조절하도록 작성하였다.
정리
em과 rem은 부모 요소(html 태그)와 요소 자체의 폰트 크기의 비율을 표현한 값으로 이를 통해 반응형으로 폰트 크기를 조절할 수 있다. 다만, 사용을 하면서 느낀 점은 화면 전체의 크기가 바뀔 때 대응하는 앱에서는 미디어 쿼리를 통해 html 태그의 크기 또한 변경해줘야 보다 반응형 폰트 크기라고 말할 수 있을 것 같다고 느꼈다.
이 외에도 반응형 폰트 크기를 적용하는 방법은 뷰포트(viewport)를 기반으로 하는 vm, vmin, vmax 등과 같은 단위들도 존재한다.
'개발 > Front-end' 카테고리의 다른 글
| [TIL] react-router-dom으로 페이지 이동하기 (0) | 2021.11.04 |
|---|---|
| [CSS] 선택자 :hover로 onMouse 효과 내기 (0) | 2021.11.03 |
| [React] 가상화폐 자동거래 프로젝트 리팩토링하기(2/2) (0) | 2021.10.23 |
| [반응형 웹] 미디어 쿼리 적용하기 (0) | 2021.10.18 |
| [반응형 웹] 가변 그리드, 마진, 패딩 적용하기 (0) | 2021.10.17 |
