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 / text-shadow / 글자에 그림자 효과를 주는 속성

CSS / text-shadow / 글자에 그림자 효과를 주는 속성

개요 text-shadow는 글자에 그림자 효과를 주는 속성입니다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 문법 text-shadow: offset-x offset-y blur-radius color | none | initial | inherit offset-x : 그림자의 수평 거리를 정합니다. (필수) offset-y : 그림자의 수직 거리를 정합니다. (필수) blur-radius : 흐림 정도를 정합니다. (선택 : 값을 정하지 않으면 0) color : 색을 ...

CSS / CSS를 HTML에 적용시키는 방법

CSS / CSS를 HTML에 적용시키는 방법

HTML에 CSS를 적용시키는 방법은 세가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다. Internal Style Sheet HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법입니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다. Inline Style Sheet Inline Style Sheet는 HTML 태그의 ...

CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우

CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우

웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다. 한 줄인 경우 예제 문자열이 길면 다음처럼 화면 끝에서 줄바꿈되는 것이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p.a { font-family: sans-serif; font-size: 20px; } </style> </head> <body> <p class="a">Lorem ipsum dolor sit ...

CSS / counter-reset, counter-increment로 일련 번호 붙이기

CSS / counter-reset, counter-increment로 일련 번호 붙이기

CSS를 이용하여 특정 요소에 일련 번호를 붙일 수 있습니다. 이때 사용하는 속성은 counter-reset과 counter-increment입니다. 일련 번호를 붙이려는 요소의 부모 요소에 counter-reset으로 시작하는 번호를 정하고, 일련 번호가 붙을 요소에 counter-increment로 증가량을 정합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 이미지 버튼 만들기

CSS / 이미지 버튼 만들기

버튼을 꾸미는 방법 중의 하나는 이미지를 이용하는 것입니다. 적당한 크기의 버튼을 만듭니다. 그 크기에 맞는 이미지를 배경으로 정합니다. 다음은 32x32 크기의 돋보기 이미지를 이용해서 버튼을 꾸미는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> input { ...

CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기

CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기

웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을 바뀝니다. 이 색은 CSS로 바꿀 수 있습니다. 사용하는 선택자는 가상 요소 ::selection입니다. 다음은 텍스트를 선택했을 때 배경은 검은색으로, 글자는 노란색으로 만드는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ::selection { background-color: black; color: yellow; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. ...

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 문법 transform: rotate( angle ) transform: rotateX( angle ) transform: rotateY( angle ) angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, turn 등을 사용합니다. turn은 1회전, 즉 360deg를 의미합니다. 예제 마우스를 올렸을 때 회전합니다. 회전하는 ...

CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성

CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성

개요 overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 ...

CSS / 마우스 오버 효과 / 다른 이미지 보여주기

CSS / 마우스 오버 효과 / 다른 이미지 보여주기

이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. display 속성 이용하기 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / display 속성으로 표 만들기 - table, table-row, table-cell

CSS / display 속성으로 표 만들기 - table, table-row, table-cell

display 속성값 중 표와 관련된 값들 display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다. 표처럼 보이기 위해 사용할 수 있는 속성값들은 다음과 같습니다. table : <table> 요소처럼 표현합니다. table-caption : <caption> 요소처럼 표현합니다. table-column-group : <colgroup> 요소처럼 표현합니다. table-header-group : <thead> 요소처럼 표현합니다. table-footer-group : <tfoot> 요소처럼 표현합니다. table-row-group : <tbody> 요소처럼 표현합니다. table-cell ...