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. jeisyoon
    2021.06.21 font-size - OK
  2. barozaqu
    62.5%
  3. barozaqu
    20210518. html font-size rem
  4. 완료
  5. Minint
    2021.03.06
  6. HyeonHui Jeong
    20210217
  7. css 폰트 사이즈는 rem을 추천, html폰트 크기에 비례하기에 사용자가 바꾸기 편함
  8. 임태경
    완료했어요 감사해요
  9. 임태경
    완료했어요 감사해요
  10. 스마일가이
    2021.01.26 완료 감사합니다
  11. 개발자
    폰트 사이즈를 바꾼다는 것은 결국 html 태그의 폰트 사이즈를 바꾼다는 것임. rem은 html폰트 크기에 비례함.
  12. datsciseol
    20210115
  13. 몽실엄마
    12/22/2020 오늘도 아이들 학교 보내고 하나 봤습니다.
  14. 201214 제 스스로 조금씩 헤이해지네요 ㅎㅎ 빨리 제대로 끝내도록 다시 마음 잡겠습니다
  15. switpotato
    20201122: 2차학습 완료
  16. 켄드릭
    2020년 10월 29일(목) 1차 학습완료
  17. jaehyunlee
    완료
  18. 오석민
    완료
  19. 박병진
    2020.10.02 완료
  20. 콜라
    20200926 완료
  21. 여니여니
    20200923 감사합니다
  22. 김성곤
    20200717 감사합니다!
  23. jaehyunlee
    완료
  24. 한강
    폰트 사이즈는 rem
    감사합니다~~^^!
    200528
  25. 안틴
    크기가 변할 필요가 없으니 그런게 아닐까요?
    대화보기
    • R0nde_v_us
      개발자 도구에서 computed 탭에서 default 속성이 안보이는 분들은 Filter 우측에 있는 Show all 체크박스에 체크하시면 font-size를 포함한 속성들이 보일겁니다.
    • laqah
      다른사이트 소스 볼때마다 궁금했던건데! 감사합니다!
    • 문형
      rem을 사용하면 모바일 디바이스에서 OS 설정을 따라가겠군용 ㅋㅋ
    • 무지개반사
      완료
    • Blanc
      2020.01.05
    • alpha
      191001 수강완료
    • 태태
      수강완료
    • 치디우기
      수강완료
    • 류석현
      수강완료

      >>div 태그 이번강의에서 처음 보는데 혹시 소개된적이 있었나요?? 정확한 뜻을 잘 이해를 못했어요 ㅠㅠ
    • 세븐나이츠
      완료
    • FIRE
      20190728 완료
    • 다나가
      190722 - 수업완료!!
    • 유나
      아마 직접 하셔도 될거 예요
      대화보기
      • 노혜주
        완료
      • lygon
        2019-02-22 완료
      • 태용
        네이버, 유투브, 페이스북, 핀터레스트 공신력 있는 사이트들 모두 rem이 아니라 px값으로 코딩되어 있는 것 같은데
        (크롬 옵션 텍스트 크기 변화에 반응이 없는) 무슨 이유일까요?
      • 득구태웅
        computed 탭이 제 크롬 개발자 버전에서는 안보이는데 저만 그런가요ㅠ?
      • 숨이
        완료햇습니당
      • OHOHAOHO
        html이라고 확장자 명을 명시하셔야 끝까지 나올거에요)
        대화보기
        • 김민영
          완료
        • An Hyunjun
          atom에서 자동완성기능이 저는 <di 까지치면 <div하고 끝나는데
          어떻게 해야 <div></div>가 나오게 될까요
        • 로버트한
          감사합니다.
        • SlowStarter
          감사합니다!
        • 스페이스몽키
          rem이 먼지 궁금했는데 한방에 이해가 됐어요 감사합니다. ㅎㅎ
        • 옥슬이
          rem 인데 em 이라고 잘못 말씀하신듯? 강의에서 rem만 설명하시다가 마지막에 "폰트 사이즈는 em을 쓰시면 됩니다!" ㅋㅋㅋㅋㅋㅋㅋ
          대화보기
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기