CSS에서 font-size를 지정할 때
pt, px, em, rem, vw, vh, vmax, vmin 등 다양한 단위들을 이용할 수 있다.
오늘은 그중 em과 rem의 차이에 대해 알아보자.
우선 em과 rem은 모두 가변 폰트이다.
그렇다면 em, rem만 사용하면 자동적으로 브라우저의 크기에 따라 가변 하는 것 일까?
일단 단독적으로는 아니라는 것을 먼저 알고 시작하자!
(왜인지는 포스팅 마지막으로,,,!)
em ?
em은 타이포그래피의 단위 중 하나로
과거 활자를 통해 폰트를 제작할 때
대문자 M을 1em의 기준으로 삼았다는 것에서 비롯되었는데
1em 은 현재 사용되는 12pt 크기의 대문자 M의 너비를 기준으로 정해진다.
(여기서 12pt는 16px과 같다.)
em은 가변 폰트로 자식의 폰트 사이즈는 부모 폰트 사이즈의 영향을 받는다.
즉, 상속을 받게 되는 것이다.
예제로 알아보자.
아래와 같이 부모 자식 관계인 p, span 태그에 각각 2em, 0.5em을 설정해줬다.
상속 관계가 없을 때의 2em(32px), 0.5em(8px)과 비교했을 때
상속 관계의 자식 span의 폰트 사이즈는 2em * 0.5로 계산되어
부모 p의 폰트 사이즈에 상대적으로 설정되었다는 것을 알 수 있다.
<p id="parent">
<span id="child"></span>
<p>P { font-size: 2em; }
span { font-size: 0.5em; }
하지만,
em은 상속 관계가 복잡해질수록
유지보수가 어려울 만큼 폰트의 사이즈 간의 관계도 복잡해진다.
아래의 두 span은 모두 font-size가 0.5em이지만,
p의 영향을 받는 span은 실제 16px에 해당하고,
span 내부의 span의 경우 실제 8px에 해당하는 값을 가지게 된다.
<p id="parent">
<span id="child">
<span></span>
</span>
<p>P { font-size: 2em; }
span { font-size: 0.5em; } /* 2em * 0.5 */
#child span { font-size: 0.5em; } /* (2em * 0.5) * 0.5 */
이러한 상속의 문제를 해결하기 위해 등장한 방식이
rem 단위이다.
rem ?
rem은 root em의 약자로
em이 부모를 기준으로 가변 하는 폰트라면,
em은 root <html>으르 기준으로 가변 한다.
그렇기 때문에 상대적이면서 일관성 있게 사이즈를 조절할 수 있는 것이다.
위 예제와 동일한 html 코드에
css font-size의 단위만 rem으로 바꾼 결과를 비교해보면 확실하게 알 수 있다.
P { font-size: 2rem; }
span { font-size: 0.5rem; }
#child span { font-size: 0.5rem; }
이러한 이유로
반응형 작업을 위해 px이 아닌 em, rem의 단위를 사용하는 것이고,
또한 루트 폰트 사이즈의 변경만으로 전체적인 페이지의 폰트를 조절할 수 있기 때문에
em보다는 rem 단위를 사용하는 것이 덜 복잡하다!
rem은 브라우저에 따라 변하는 가변 폰트가 아닌데 어떻게 반응형에 쓰는 것 일까? 👇🏻
+) rem 과 미디어 쿼리
em, rem 은 단독으로는 브라우저에 따라 자동으로 폰트 사이즈가 변하는 것은 아니라고 언급했다.
그 이유는 둘 모두 브라우저의 사이즈가 아닌 부모나 루트의 영향을 받아 상대적으로 변하는 가변 폰트이기 때문이다!
그렇기 때문에
미디어 쿼리와 함께 사용해야 반응형의 단위로 온전해지는? 것 이다.
미디어 쿼리를 통해 브라우저의 크기마다
root의 기본적인 폰트 사이즈를 설정준다면 브라우저에 따라 크기가 변할 수 있다.
다음 포스팅에서 미디어 쿼리에 대해 자세히 알아보자.
Guide: EM vs REM vs PX. Which should you use?
engageinteractive.co.uk
⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :) ⚠️
*** 혹시라도 잘못된 정보가 있다면 언제든지 알려주시면 감사하겠습니다 ! ***
'CSS' 카테고리의 다른 글
| [CSS] 선택자 : class 와 id 선택자의 차이 (0) | 2021.08.17 |
|---|---|
| [CSS] 미디어 쿼리(Media Queries) ? : #2 반응형 웹 (0) | 2021.08.10 |
| [CSS] position 속성 ? : 자유롭게 위치를 지정해보자. (0) | 2021.08.06 |
| [CSS] 줄바꿈 규칙 : word-break ? (0) | 2021.08.02 |
| [CSS] <button> : #1 Sign in with Apple 🍎 (0) | 2021.08.01 |