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