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

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

<!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>

같은 카테고리의 다른 글
CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기

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

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

CSS / 선택자(Selector)

CSS / 선택자(Selector)

전체 선택자(Universal Selector) 전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어 다음은 모든 요소의 색을 파란색으로 만듭니다. * { color: blue; } 다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉, 다음 두 줄은 같은 결과를 만듭니다. *.abc { color: blue; } .abc { color: blue; } 타입 선택자(Type Selector) 타입 선택자(Type Selector)는 h1, p, ...

CSS / 기초 / !important

CSS / 기초 / !important

CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙인다. property: value !important; 예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만든다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 ...

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 / 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 / 세로 가운데 정렬하는 방법

CSS / 세로 가운데 정렬하는 방법

CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. text-align: center; 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. margin-left: auto; margin-right: auto; 그렇다면 다음처럼 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 방법 1 - padding 속성 이용하기 바깥쪽 요소에 padding 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / 마우스 오버 시 텍스트 나오게 하는 방법

CSS / 마우스 오버 시 텍스트 나오게 하는 방법

CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제이다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능하다. 마우스 올렸을 때 모양 만들기 마우스를 올렸을 때 보이길 원하는 모양을 먼저 만든다. .jb-title에 마우스를 올리면 .jb-text가 ...

CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성

CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성

text-indent 들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 기본값은 0입니다. 내어쓰기를 할 때는 왼쪽에 여백을 적절히 줍니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p { font-size: 20px; ...

CSS / Grid / 실전 예제

CSS / Grid / 실전 예제

높이가 같은 박스 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; ...

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