프로그래밍/CSS

생활코딩 css 정리 - 7. font-size

가카리 2017. 9. 26. 22:57
반응형
7. font-size

글꼴의 크기를 지정합니다. 주요 단위로는 px, em, rem이 있습니다.

      1. rem
html 태그에 적용된 font-size의 영향을 받습니다. html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 이해하기 쉽습니다. 가장 바람직한 단위입니다. 이것을 사용하세요.
 
      1. px
모니터 상의 화소 하나의 크기에 대응되는 단위입니다. 고정된 값이기 때문에 이해하기 쉽습니다만, 사용자가 글꼴의 크기를 조정할 수 없기 때문에 가급적 사용을 하지 않는 것이 좋습니다.
 
      1. em
부모 태그의 영향을 받는 상대적인 크기입니다. 부모의 크기에 영향을 받기 때문에 파악하기가 어렵습니다. rem이 등장하면서 이 단위 역시 사용이 권장되지 않습니다.

예제. font_size.html
<!DOCTYPE html>
<html>
<head>
<style>
      #pxfont-size:16px;
      #remfont-size:1rem;
</style>
</head>
<body>
<divid="px">PX</div>
<divid="rem">REM</div>
</body>
</html>

실행 화면

다음과 같이 출력됨을 알 수 있습니다.


다음과 같이 크롬 세팅에서 사용자의 폰트를 변경하면 PX는 변경이 안되고 REM은 변경됩니다.



반응형