CSS / font-size / 글자 크기 정하는 속성

개요

font-size는 글자 크기를 정하는 속성입니다.

  • 기본값 : medium
  • 상속 : Yes
  • 애니메이션 : Yes
  • 버전 : CSS Level 1

문법

font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit
  • medium : 웹브라우저에서 정한 기본 글자크기입니다.
  • xx-small, x-small, small, large, x-large, xx-large : medium에 대한 상대적인 크기입니다.
  • smaller, larger : 부모 요소의 글자 크기에 대한 상대적인 글자 크기입니다.
  • length : px, %, em, rem 등으로 크기를 정합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제 1

  • medium, xx-small, x-small, small, large, x-large, xx-large로 글자 크기를 정한 예제입니다.
  • 웹브라우저의 기본 글자 크기를 바꾸면 예제의 글자 크기도 바뀝니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .jb-xx-small { font-size: xx-small; }
      .jb-x-small { font-size: x-small; }
      .jb-small { font-size: small; }
      .jb-medium { font-size: medium; }
      .jb-large { font-size: large; }
      .jb-x-large { font-size: x-large; }
      .jb-xx-large { font-size: xx-large; }
    </style>
  </head>
  <body>
    <p class="jb-xx-small">Lorem ipsum dolor sit amet. : <code>xx-small</code></p>
    <p class="jb-x-small">Lorem ipsum dolor sit amet. : <code>x-small</code></p>
    <p class="jb-small">Lorem ipsum dolor sit amet. : <code>small</code></p>
    <p class="jb-medium">Lorem ipsum dolor sit amet. : <code>medium</code></p>
    <p class="jb-large">Lorem ipsum dolor sit amet. : <code>large</code></p>
    <p class="jb-x-large">Lorem ipsum dolor sit amet. : <code>x-large</code></p>
    <p class="jb-xx-large">Lorem ipsum dolor sit amet. : <code>xx-large</code></p>
  </body>
</html>

예제 2

  • smaller, larger로 글자 크기를 정한 예제입니다.
  • 부모 요소의 글자 크기가 변하면 자식 요소의 글자 크기도 변합니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .jb-default-1 { font-size: 16px; }
      .jb-default-2 { font-size: 32px; }
      .jb-smaller { font-size: smaller; }
      .jb-larger { font-size: larger; }
    </style>
  </head>
  <body>
    <p class="jb-default-1">
      <span>Lorem ipsum dolor sit amet.</span>
      <span class="jb-smaller">Lorem ipsum dolor sit amet.</span>
      <span class="jb-larger">Lorem ipsum dolor sit amet.</span>
    </p>
    <p class="jb-default-2">
      <span>Lorem ipsum dolor sit amet.</span>
      <span class="jb-smaller">Lorem ipsum dolor sit amet.</span>
      <span class="jb-larger">Lorem ipsum dolor sit amet.</span>
    </p>
  </body>
</html>

예제 3

  • px, %, em, rem을 이용하여 글자 크기를 정하는 예제입니다.
  • 웹브라우저의 기본 글자 크기는 보통 16px와 같습니다.
  • %와 em은 부모 요소의 글자 크기에 대한 상대적인 글자 크기입니다. 100%와 1em은 부모 요소의 글자 크기와 같고, 숫자가 커질수록 글자가 커지고, 숫자가 작아질수록 글자가 작아집니다.
  • rem은 최상위 요소, 즉 html 요소의 글자 크기에 대한 상대적인 글자 크기입니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      html { font-size: 32px; }
      .jb-default { font-size: 16px; }
      .jb-percentage { font-size: 150%; }
      .jb-em { font-size: 1.5em; }
      .jb-rem { font-size: 1.5rem; }
    </style>
  </head>
  <body>
    <div class="jb-default">
      <p>Lorem ipsum dolor sit amet.</p>
      <p class="jb-percentage">Lorem ipsum dolor sit amet.</p>
      <p class="jb-em">Lorem ipsum dolor sit amet.</p>
      <p class="jb-rem">Lorem ipsum dolor sit amet.</p>
    </div>
  </body>
</html>

브라우저 지원

  • Chrome : 1.0+
  • Firefox : 1.0+
  • Internet Explorer : 5.5+
  • Opera : 7.0+
  • Safari : 1.0+
같은 카테고리의 다른 글
CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

개요 background-size로 배경 이미지의 가로 크기와 세로 크기를 정할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 background-size: auto | length | cover | contain | initial | inherit auto : 이미지 크기를 유지합니다. length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 ...

CSS / font-weight / 글자 굵기 정하는 속성

CSS / font-weight / 글자 굵기 정하는 속성

개요 font-weight로 글자의 굵기를 정한다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 font-weight: normal | bold | bolder | lighter | number | initial | inherit normal : 보통 굵기이다. 숫자 400과 같다. bold : 굵은 굵기이다. 숫자 700과 같다. bolder : 상속된 값보다 굵은 굵기다. lighter : 상속된 값보다 얇은 굵기이다. number : ...

CSS / border / 테두리 만드는 속성

CSS / border / 테두리 만드는 속성

개요 border는 테두리를 만드는 속성입니다. 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정합니다. 기본값 : medium, none, color 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 border: border-width border-style border-color | initial | inherit border-width : 선의 두께를 정합니다. 기본값은 medium입니다. border-style : 선의 모양을 정합니다. 기본값은 none입니다. border-color : 선의 색을 정합니다. 기본값은 꾸미려는 요소의 ...

CSS / 표(table) 꾸미기 / 배경색 만들기

CSS / 표(table) 꾸미기 / 배경색 만들기

배경색을 만드는 속성 배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 기본 모양 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

CSS / Flex / flex-direction

CSS / Flex / flex-direction

flex-direction으로 Item의 배열 방향을 정합니다. 기본값은 row로, 왼쪽에서 오른쪽으로 배열합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { height: 400px; padding: ...

CSS / Flex / justify-content

CSS / Flex / justify-content

justify-content로 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정합니다. 기본값은 flex-start로 시작점부터 아이템을 배치합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { ...

CSS / background-clip / 배경을 어디에 넣을지 정하는 속성

CSS / background-clip / 배경을 어디에 넣을지 정하는 속성

개요 HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-clip: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역과 그 안쪽 영역을 채웁니다. padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다. content-box : 내용 영역과 그 안쪽 영역을 채웁니다. initial : ...

CSS / Grid / grid-auto-rows

CSS / Grid / grid-auto-rows

그리드에서 열 개수는 grid-template-columns로 정합니다. 그 개수를 넘어가면 행이 바뀌죠. 그리고 높이는 행마다 다르게 정해집니다. 예를 들어 다음과 같은 HTML 문서가 있을 때, 첫번째 행의 높이와 다른 행의 높이는 다릅니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성

CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 이렇게 정한 정렬은 콘테이너 안의 모든 아이템에 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / Flex / 정가운데 배치하기

CSS / Flex / 정가운데 배치하기

justify-content, align-items 속성을 이용하여 안쪽 요소를 바깥쪽 요소의 정가운데에 배치할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...