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 : 100, 200, 300, 400, 500, 600, 700, 800, 900
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제 1

나타낼 수 있는 굵기는 글꼴에 따라 다릅니다. 예를 들어, 본고딕(Noto Sans CJK KR)이 맑은 고딕(Malgun Gothic)보다 표현할 수 있는 굵기가 더 많습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table {
        width: 100%;
      }
      th {
        text-align: left;
        color: blue;
      }
      td {
        vertical-align: top;
      }
      .jb-font-1 {
        font-family: "Malgun Gothic";
      }
      .jb-font-2 {
        font-family: "Noto Sans CJK KR";
      }
      .jb-normal {
        font-weight: normal;
      }
      .jb-bold {
        font-weight: bold;
      }
      .jb-100 {
        font-weight: 100;
      }
      .jb-200 {
        font-weight: 200;
      }
      .jb-300 {
        font-weight: 300;
      }
      .jb-400 {
        font-weight: 400;
      }
      .jb-500 {
        font-weight: 500;
      }
      .jb-600 {
        font-weight: 600;
      }
      .jb-700 {
        font-weight: 700;
      }
      .jb-800 {
        font-weight: 800;
      }
      .jb-900 {
        font-weight: 900;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Malgun Gothic</th>
        <th>Noto Sans CJK KR</th>
      </tr>
      <tr>
        <td class="jb-font-1">
          <p class="jb-normal">font-weight normal - Lorem Ipsum Dolor</p>
          <p class="jb-bold">font-weight bold - Lorem Ipsum Dolor</p>
          <p class="jb-100">font-weight 100 - Lorem Ipsum Dolor</p>
          <p class="jb-200">font-weight 200 - Lorem Ipsum Dolor</p>
          <p class="jb-300">font-weight 300 - Lorem Ipsum Dolor</p>
          <p class="jb-400">font-weight 400 - Lorem Ipsum Dolor</p>
          <p class="jb-500">font-weight 500 - Lorem Ipsum Dolor</p>
          <p class="jb-600">font-weight 600 - Lorem Ipsum Dolor</p>
          <p class="jb-700">font-weight 700 - Lorem Ipsum Dolor</p>
          <p class="jb-800">font-weight 800 - Lorem Ipsum Dolor</p>
          <p class="jb-900">font-weight 900 - Lorem Ipsum Dolor</p>
        </td>
        <td class="jb-font-2">
          <p class="jb-normal">font-weight normal  - Lorem Ipsum Dolor</p>
          <p class="jb-bold">font-weight bold - Lorem Ipsum Dolor</p>
          <p class="jb-100">font-weight 100 - Lorem Ipsum Dolor</p>
          <p class="jb-200">font-weight 200 - Lorem Ipsum Dolor</p>
          <p class="jb-300">font-weight 300 - Lorem Ipsum Dolor</p>
          <p class="jb-400">font-weight 400 - Lorem Ipsum Dolor</p>
          <p class="jb-500">font-weight 500 - Lorem Ipsum Dolor</p>
          <p class="jb-600">font-weight 600 - Lorem Ipsum Dolor</p>
          <p class="jb-700">font-weight 700 - Lorem Ipsum Dolor</p>
          <p class="jb-800">font-weight 800 - Lorem Ipsum Dolor</p>
          <p class="jb-900">font-weight 900 - Lorem Ipsum Dolor</p>
        </td>
      </tr>
    </table>
  </body>
</html>

예제2

bolder나 lighter은 상속된 값에 따라 다른 굵기로 나옵니다. 다음은 상속된 굵기가 300일 때와 700일 때, bolder와 lighter가 어떻게 나오는지 비교하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        font-family: "Noto Sans CJK KR";
      }
      .jb-300 {
        font-weight: 300;
      }
      .jb-700 {
        font-weight: 700;
      }
      .jb-bolder {
        font-weight: bolder;
      }
      .jb-lighter {
        font-weight: lighter;
      }
    </style>
  </head>
  <body>
    <div class="jb-300">
      <p>font weight 300 - Lorem Ipsum Dolor</p>
      <p class="jb-bolder">font weight bolder - Lorem Ipsum Dolor</p>
      <p class="jb-lighter">font weight lighter - Lorem Ipsum Dolor</p>
    </div>
    <div class="jb-700">
      <p>font weight 700 - Lorem Ipsum Dolor</p>
      <p class="jb-bolder">font weight bolder - Lorem Ipsum Dolor</p>
      <p class="jb-lighter">font weight lighter - Lorem Ipsum Dolor</p>
    </div>
  </body>
</html>

Related Posts

CSS / font-style / 글자 모양 정하는 속성

CSS / font-style / 글자 모양 정하는 속성

개요 font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-style: normal | italic | oblique | initial | inherit normal : 보통 모양입니다. italic : 기울임꼴입니다. oblique : 기울임꼴입니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. italic은 필기체 느낌으로 기울이고, oblique는 보통 모양을 그대로 기울입니다. 아래의 이미지에서 두번째 줄이 italic, 세번째 ...

CSS / border-collapse / 표의 테두리와 셀의 테두리 사이의 간격 처리 방식 정하는 속성

CSS / border-collapse / 표의 테두리와 셀의 테두리 사이의 간격 처리 방식 정하는 속성

개요 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정합니다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-collapse: separate | collapse | initial | inherit separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다. collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다. initial : 기본값으로 설정합니다. inherit ...

CSS / Flex / IE에서 flex-basis 오류 해결하는 방법

CSS / Flex / IE에서 flex-basis 오류 해결하는 방법

Flex를 이용하여 다단 배열을 만들려고 합니다. 내용에 상관없이 같은 폭을 가진 다단 배열을 만든다면 flex-basis를 사용하는 게 편합니다. 아래는 Flex를 이용한 간단한 2단 배열입니다. box-sizing의 값을 border-box로 설정하고, flex-basis의 값을 50%로 하면 간단히 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / tab-size / 탭 크기 설정하는 속성

CSS / tab-size / 탭 크기 설정하는 속성

HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 예를 들어 아래처럼 코드를 만들면...(각 줄 앞에 있는 빈 칸은 모두 탭입니다.) <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> pre { font-family: Consolas, monospace; font-size: 24px; } </style> </head> <body> <pre> Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </pre> </body> </html> 웹브라우저에서는 다음처럼 출력합니다. 탭 크기가 ...

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

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에 ...

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 / color / 글자 색 정하는 속성

CSS / color / 글자 색 정하는 속성

개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

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 / Flex / order / 아이템의 순서 정하는 속성

CSS / Flex / order / 아이템의 순서 정하는 속성

Flex로 아이템을 배치할 때, 입력한 순서대로 출력됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; margin: 0px; ...

CSS / list-style-position / 목록의 마커 위치 정하는 속성

CSS / list-style-position / 목록의 마커 위치 정하는 속성

개요 list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-position: inside | outside | initial | inherit inside : 문단 안쪽에 놓습니다. outside : 문단 바깥쪽에 놓습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...