font-size

1 개요
2 문법
3 예제 1
4 예제 2
5 예제 3

개요

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>

CSS / Reference / letter-spacing, word-spacing

글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다.

CSS / Reference / aspect-ratio

aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성입니다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있습니다.

CSS / Reference / text-indent

들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 내어쓰기를 할 때는 왼쪽에 여백을 적절히 줍니다.

CSS / Reference / background-origin

개요 HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-origin: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역 왼쪽 위부터 채웁니다. padding-box : 안쪽 여백 영역 왼쪽 ...

CSS / Reference / content

content는 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가하는 속성입니다. 기본값 : normal 상속 : No 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / box-sizing

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / background-size

background-size는 배경 이미지의 가로 크기와 세로 크기를 정하는 속성입니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3

CSS / Reference / word-break

word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / text-align

text-align은 문단 정렬 방식을 정하는 속성입니다. 기본값 : 읽는 방향이 LTR(왼쪽에서 오른쪽)인 경우 left, RTL(오른쪽에서 왼쪽)인 경우 right 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / align-content

flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content입니다.