생활코딩

Coding Everybody

코스 전체목록

닫기

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. switpotato
    20201122: 2차학습 완료
  2. 켄드릭
    2020년 10월 29일(목) 1차 학습완료
  3. jaehyunlee
    완료
  4. 오석민
    완료
  5. 박병진
    2020.10.02 완료
  6. 콜라
    20200926 완료
  7. 여니여니
    20200923 감사합니다
  8. 김성곤
    20200717 감사합니다!
  9. jaehyunlee
    완료
  10. 한강
    폰트 사이즈는 rem
    감사합니다~~^^!
    200528
  11. 안틴
    크기가 변할 필요가 없으니 그런게 아닐까요?
    대화보기
    • R0nde_v_us
      개발자 도구에서 computed 탭에서 default 속성이 안보이는 분들은 Filter 우측에 있는 Show all 체크박스에 체크하시면 font-size를 포함한 속성들이 보일겁니다.
    • 다른사이트 소스 볼때마다 궁금했던건데! 감사합니다!
    • 문형
      rem을 사용하면 모바일 디바이스에서 OS 설정을 따라가겠군용 ㅋㅋ
    • 무지개반사
      완료
    • 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을 쓰시면 됩니다!" ㅋㅋㅋㅋㅋㅋㅋ
          대화보기
          • Ryan.L
            good good
          • JN87
            180103 감사합니다!
          • 김찬호
            선생님, 강의 잘 듣고 있습니다. 초중등학교때 HTML만으로 홈페이지를 만들다가 한동안 홈페이지 작성을 접고 31살 나이에 쇼핑몰을 만드려 책을 샀는데 내용이 많이 변해있었습니다. HTML만으로 홈페이지를 만들던 시기가 그립기도 하지만 CSS기능을 이용하면 더욱 강력한 홈페이지를 만들 수 있을 것 같네요. 책으로만 공부하려 하니 힘들었는데 이렇게 좋은 강의를 제공해 주셔서 여러가지로 감사합니다.
          • 푸른하늘
            10일차 공부 감사합니다
          • 박민철
            그대로 복사해도 안되는건 왜그런건가요?!
            php는 다 깨지고
            저번 수업 방문함 방문안함 수업에서도
            마우스 커서 올려놨을 때
            초록색으로 바뀌는 것은 안되더라구요;;
          • 오빠는다르다
            감사합니다~!
          • 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>
          • 토마토신
            1rem은 브라우저의 설정된 폰트 크기를 따르는것 같아요.
            그래서
            medium일때 1rem = 16px
            very Large일때 1rem=24px, 2rem은=48px이 됩니다.
          • 세븐나이츠
            감사합니다
          • 강지후
            강의 완료 20170713
          • 궁금
            전자책에는 em을 거의 사용됩니다
          • > px폰트 크기 고정
            > em rem 브라우저따라 폰트크기 달라짐
            오늘날에는rem을 쓴다.
            (폰트크키조정할 수 있는 사용자의 권리)
            가변적, 사용자에게 권리를 주는 좋은 접근이다!
          • 그라텔
            em이라는게 뜻을 정확하게 모르겠네요..
          • 이한규
            이번 강의 마지막 멘트에서... "폰트 사이즈는 결과적으로 em을 쓰시면 됩니다" 라고 하셨는데요
            강의 맥락으로 짐작컨데 결과적으로 rem으로 쓰라는 말씀이신거죠??
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기