CSS

font-size

font-size

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

rem

html 태그에 적용된 font-size의 영향을 받습니다. html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 이해하기 쉽습니다. 가장 바람직한 단위입니다. 이것을 사용하세요. 

px

모니터 상의 화소 하나의 크기에 대응되는 단위입니다. 고정된 값이기 때문에 이해하기 쉽습니다만, 사용자가 글꼴의 크기를 조정할 수 없기 때문에 가급적 사용을 하지 않는 것이 좋습니다. 

em

부모 태그의 영향을 받는 상대적인 크기입니다. 부모의 크기에 영향을 받기 때문에 파악하기가 어렵습니다. rem이 등장하면서 이 단위 역시 사용이 권장되지 않습니다. 

예제 - font-size.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      #px{font-size:16px;}
      #rem{font-size:1rem;}
    </style>
  </head>
  <body>
    <div id="px">PX</div>
    <div id="rem">REM</div>
  </body>
</html>

 

댓글

댓글 본문
  1. kdb5869
    24.04.25
  2. 마우스오른쪽버튼
    완료
  3. 곤비
    02.16
  4. 미래도비
    0204
  5. 새콤달콤
    완료
  6. 덕자
    폰트 사이즈는 rem사용할 것!
  7. 다겸란
    수강완료
  8. DreamBoy
    2023.09.16. CSS - 타이포그래피 - font-size 파트 완료했습니다.
  9. AgainstartJH
    2022년 11월 06일 일요일 학습완료!
  10. 헤밍웨이
    220823 감사합니다!
  11. 주재윤
    강의완료
  12. vigorously27
    2022년 7월 19일 화요일 학습완료!
  13. 이슬유치원
    22.7.3 폰트사이즈는 rem 으로 쓰는게 좋다 변환이 가능하기때문이다.
  14. 초보자바
    22-02-13 font-size 완료
    px은 고정된 값이다.
    rem은 변환가능하며 태그의 사이즈를 따른다.(추천)
  15. jjy_lee2468
    22.02.07 수강완료
  16. 강수빈
    22.2.4 완료
  17. 임앤강
    2022-01-27 font-size 감사합니다.
  18. 드림보이
    2021.11.10. font-size 파트 수강완료
  19. 황금아가리
    211003
  20. 이현수
    2021.09.07(화)
  21. 두드
    2021.07.21 완료
  22. jeisyoon
    2021.06.21 font-size - OK
  23. barozaqu
    62.5%
  24. barozaqu
    20210518. html font-size rem
  25. choi
    완료
  26. Minint
    2021.03.06
  27. HyeonHui Jeong
    20210217
  28. css 폰트 사이즈는 rem을 추천, html폰트 크기에 비례하기에 사용자가 바꾸기 편함
  29. 임태경
    완료했어요 감사해요
  30. 임태경
    완료했어요 감사해요
  31. 스마일가이
    2021.01.26 완료 감사합니다
  32. 개발자
    폰트 사이즈를 바꾼다는 것은 결국 html 태그의 폰트 사이즈를 바꾼다는 것임. rem은 html폰트 크기에 비례함.
  33. datsciseol
    20210115
  34. 몽실엄마
    12/22/2020 오늘도 아이들 학교 보내고 하나 봤습니다.
  35. 201214 제 스스로 조금씩 헤이해지네요 ㅎㅎ 빨리 제대로 끝내도록 다시 마음 잡겠습니다
  36. switpotato
    20201122: 2차학습 완료
  37. 켄드릭
    2020년 10월 29일(목) 1차 학습완료
  38. jaehyunlee
    완료
  39. 오석민
    완료
  40. 박병진
    2020.10.02 완료
  41. 콜라
    20200926 완료
  42. 여니여니
    20200923 감사합니다
  43. 김성곤
    20200717 감사합니다!
  44. jaehyunlee
    완료
  45. 한강
    폰트 사이즈는 rem
    감사합니다~~^^!
    200528
  46. 안틴
    크기가 변할 필요가 없으니 그런게 아닐까요?
    대화보기
    • R0nde_v_us
      개발자 도구에서 computed 탭에서 default 속성이 안보이는 분들은 Filter 우측에 있는 Show all 체크박스에 체크하시면 font-size를 포함한 속성들이 보일겁니다.
    • laqah
      다른사이트 소스 볼때마다 궁금했던건데! 감사합니다!
    • 문형
      rem을 사용하면 모바일 디바이스에서 OS 설정을 따라가겠군용 ㅋㅋ
    • 무지개반사
      완료
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기