반응형
CSS에서 font-size를 줄 때 px, em, rem 등을 볼 수 있습니다. 그동안은 무지성으로 px 써왔는데 반응형 웹이 등장하면서 em과 rem을 써야만 하게 됐습니다. 각 폰트 사이즈 단위의 특성을 알아보도록 하겠습니다.
PX (픽셀)
px는 고정적인 단위입니다. 하지만 전세계의 1cm가 같듯이 모든 1px이 같다고는 할 수 없습니다.
픽셀은 모니터에 따라 고정적인 크기로 모니터가 바뀌지 않는 한 브라우저에서는 절대적인 고정값으로 한번 설정한 폰트 사이즈는 변하지 않게 되므로 반응형에 적합하지 않습니다. 따라서, px의 사용은 추천하지 않지만 반응형 웹이 아니라면 얼마든지 사용해도 좋습니다.
EM
em과 rem은 가변적인 단위입니다. em의 가장 큰 특성은 상위 요소의 폰트 사이즈를 상속받는 점입니다.
html{ font-size : 10px; }
div { font-size : 2em; /* 10px의 2배 */ }
li { font-size : 2em; /* 10px의 2배의 2배 */ }
<html> 폰트 10
<div> 폰트 20
<li>폰트 40</li>
</div>
</html>
em은 px보다는 반응형에 맞지만 중간 요소의 사이즈가 바뀌거나, depth가 많아질 수록 관리가 어려운 단점이 있습니다.
REM
rem은 가변적이면서도 관리가 수월한 폰트 사이즈입니다. rem은 상위 요소에 영향을 받지 않고, 최상위 엘리먼트를 기준으로 가변합니다.
html{ font-size : 10px; }
div { font-size : 2rem; /* 10px의 2배 */ }
li { font-size : 3rem; /* 10px의 3배 */ }
<html> 폰트 10
<div> 폰트 20
<li>폰트 30</li>
</div>
</html>
아래 예시에서는 최상위 엘리먼트 html의 10px을 기준으로 rem이 적용됩니다.
반응형에서는 관리가 편한 rem이 가장 나아보이지만 실제 업무에서의 상황은 워낙 다양하기 때문에 본인 시스템에 맞는 폰트를 결정하시기 바랍니다.
CSS가 제일 어려운듯..
그리드형
'IT > Web' 카테고리의 다른 글
| [Web] 웹브라우저에서 현재 내 쿠키 확인하기/쿠키 조회 방법 (1) | 2022.02.23 |
|---|---|
| [HTML] 모바일웹에서 전화걸기, 문자보내기, 메일보내기 (0) | 2021.12.04 |
| [JS] 유니코드 변환기(Unicode Converter). 자바스크립트 유니코드 변환 방법 (0) | 2021.11.28 |
| [JS] 자바스크립트 제곱과 루트 (0) | 2021.11.23 |
| [Web] jQuery ajax 기본 형태 (HTTP) (0) | 2021.11.19 |
댓글