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. 김찬호
    선생님, 강의 잘 듣고 있습니다. 초중등학교때 HTML만으로 홈페이지를 만들다가 한동안 홈페이지 작성을 접고 31살 나이에 쇼핑몰을 만드려 책을 샀는데 내용이 많이 변해있었습니다. HTML만으로 홈페이지를 만들던 시기가 그립기도 하지만 CSS기능을 이용하면 더욱 강력한 홈페이지를 만들 수 있을 것 같네요. 책으로만 공부하려 하니 힘들었는데 이렇게 좋은 강의를 제공해 주셔서 여러가지로 감사합니다.
  2. 푸른하늘
    10일차 공부 감사합니다
  3. 박민철
    그대로 복사해도 안되는건 왜그런건가요?!
    php는 다 깨지고
    저번 수업 방문함 방문안함 수업에서도
    마우스 커서 올려놨을 때
    초록색으로 바뀌는 것은 안되더라구요;;
  4. 오빠는다르다
    감사합니다~!
  5. <!--font-size-->
    <!--글꼴의 크기를 지정합니다. 주요 단위로는 px, em, rem이 있습니다.

    rem

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

    px

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

    em

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

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #px {
    font-size: 16px;
    }

    #rem {
    font-size: 1rem;
    }

    </style>
    </head>

    <body>
    <div id="px">PX</div>
    <div id="rem">REM</div>
    </body>

    </html>
  6. 토마토신
    1rem은 브라우저의 설정된 폰트 크기를 따르는것 같아요.
    그래서
    medium일때 1rem = 16px
    very Large일때 1rem=24px, 2rem은=48px이 됩니다.
  7. 세븐나이츠
    감사합니다
  8. 강지후
    강의 완료 20170713
  9. 궁금
    전자책에는 em을 거의 사용됩니다
  10. > px폰트 크기 고정
    > em rem 브라우저따라 폰트크기 달라짐
    오늘날에는rem을 쓴다.
    (폰트크키조정할 수 있는 사용자의 권리)
    가변적, 사용자에게 권리를 주는 좋은 접근이다!
  11. 그라텔
    em이라는게 뜻을 정확하게 모르겠네요..
  12. 이한규
    이번 강의 마지막 멘트에서... "폰트 사이즈는 결과적으로 em을 쓰시면 됩니다" 라고 하셨는데요
    강의 맥락으로 짐작컨데 결과적으로 rem으로 쓰라는 말씀이신거죠??
  13. 쿠쿠다스
    감사합니다
  14. 14번째
    5.18.
  15. 공삼이육
    감사합니다!
  16. php가 첫취업?
    아직 이해가 안가네요..ㅜㅜ
  17. 늦깍이
    감사합니다~~
  18. funlife
    감사합니다.
  19. matheios
    감사합니다~
  20. 임지호
    폰트 사이즈 단위 3가지 : px, em, rem
    - px는 절대적이고 em&rem은 상대적이다.(브라우저의 글꼴 크기를 변경할시, 전체 줌할때X)
    - 오늘날 사용자가 디자인을 변경할 권리를 부여하기 위해 rem이 권장된다.
  21. 신상훈
    161213완료
  22. 박상민
    161122 수료
  23. XYeZoon
    px 은 사용이 되는데 rem 은 로딩을 시키면 아무것도 안됩니다. 뭐가 잘못된건가요
  24. XYeZoon
    px 은 사용이 되는데 rem 은 로딩을 시키면 아무것도 안됩니다. 뭐가 잘못된건가요
  25. 최현승
    161009완료
  26. 김종엽
    2016.08.25 완료!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기