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+

Related Posts

CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

개요 word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성은 입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-break: normal | break-all | keep-all | initial | inherit; normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈합니다. break-all : 글자 기준으로 줄바꿈합니다. keep-all : ...

CSS / 구글 웹폰트 사용하는 방법

CSS / 구글 웹폰트 사용하는 방법

구글에서 많은 웹폰트를 제공하고 있습니다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아보겠습니다. 글꼴 선택하고 코드 얻기 구글 웹폰트에 접속합니다. 한글 웹폰트가 필요하다면 Languages를 Korean으로 설정합니다. + 버튼을 클릭하여 글꼴을 선택합니다. 여러 개를 선택해도 됩니다. 아래에 있는 검은 색 바를 클릭합니다. 구글 웹폰트를 사용할 수 있는 코드가 있는데, 기본 스타일 외에 다른 스타일을 선택하거나 한글을 사용하려면 ...

CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

개요 empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 empty-cells: show | hide | initial | inherit show : 빈 셀의 테두리를 보여줍니다. hide : 빈 셀의 테두리를 숨깁니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> ...

CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기

CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기

엑셀에 틀 고정이라는 기능이 있다. 틀 고정을 사용하면 상하 또는 좌우로 스크롤해도 항상 보이는 행 또는 열을 만들 수 있다. CSS로도 같은 효과를 낼 수 있다. 이를 구현하기 위해 사용하는 속성은 display: sticky이다. 예를 들어 다음과 같은 표가 있다고 하자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / Grid / display

CSS / Grid / display

display: grid 그리드(grid)는 콘테이너(container)와 아이템(item)으로 구성됩니다. 아래는 그리드를 위한 간단한 HTML 문서입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

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 / 마우스 오버 효과 / 서서히 길어지는 선 그리기

CSS / 마우스 오버 효과 / 서서히 길어지는 선 그리기

마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 위쪽 가로 방향으로 선 그리기 다음과 같이 사각형을 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / z-index / 요소의 수직 위치 정하는 속성

CSS / z-index / 요소의 수직 위치 정하는 속성

z-index position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다. 예제 1 세 개의 div 요소를 겹치게 배치했습니다. 코드 상 나중에 입력한 것일 수록 위로 올라옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { width: 100px; height: 100px; position: absolute; } div.x { background-color: #2196F3; top: ...

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 / 이미지 가운데 정렬하는 방법

CSS / 이미지 가운데 정렬하는 방법

이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다. 두 방법 모두 아래처럼 이미지를 가운데에 놓습니다. 방법 1 이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { text-align: center; } </style> </head> <body> <div> <img src="images/200x200.png" alt=""> </div> </body> </html> 방법 2 부모 요소를 사용할 수 없고 이미지만 스타일링이 가능하다면, img 요소를 block 요소로 만든 ...