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>

브라우저 지원

  • Chrome : 2.0+
  • Firefox : 1.0+
  • Internet Explorer : 4.0+
  • Opera : 3.5+
  • Safari : 1.3+

Related Posts

CSS / table-layout / 표(table) 크기 고정시키기

CSS / table-layout / 표(table) 크기 고정시키기

표(table)는 width 속성으로 가로 크기를 정할 수 있습니다. 다음은 가로 크기가 500px인 간단한 표입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 500px; } td { padding: 10px; border: 1px solid #666666; } </style> </head> <body> <table> <tr> <td class="c1">HAHAHA</td> <td class="c2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</td> </tr> </table> </body> </html> 표 ...

CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기

CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기

CSS만으로 만든 드롭다운 메뉴입니다. Ipsum, Dolor에 마우스를 올리면 하위 메뉴가 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Tips | Dropdown Menu</title> <style> .dropdown > ul > li { ...

CSS / text-decoration / 선으로 텍스트를 꾸미는 속성

CSS / text-decoration / 선으로 텍스트를 꾸미는 속성

개요 text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 text-decoration: none | line-through | overline | underline | initial | inherit none : 선을 만들지 않습니다. line-through : 글자 중간에 선을 만듭니다. overline : 글자 위에 선을 만듭니다. underline : 글자 아래에 선을 만듭니다. initial : 기본값으로 ...

CSS / 상속(inheritance)

CSS / 상속(inheritance)

상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다. 상속하는 속성 예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다. 즉 <style> p { color: blue; } </style> <p>Lorem <em>Ipsum</em></p> 일 때, Lorem 뿐만 아니라 Ipsum의 색도 파란색이 됩니다. 상속하지 않는 속성 예를 들어 ...

CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수

CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수

개요 calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 font-size: calc( 10px + 10px ); 는 글자 크기를 20px로 만듭니다. 버전 : CSS Level 3 문법 연산자 +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈입니다. 곱셈과 나눗셈의 좌우에는 공백이 없어도 됩니다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 합니다. 계산 순서 왼쪽에서 오른쪽으로 계산합니다. 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 ...

CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기

CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기

체크박스와 라벨 체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 여러 가지가 있는데, 그 중 하나는 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다. checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다. 예제 다음은 높이를 조정하는 간단한 예제입니다. 첫 번째 체크박스와 라벨은 아무런 ...

CSS / background-attachment / 배경 이미지의 스크롤 여부를 정하는 속성

CSS / background-attachment / 배경 이미지의 스크롤 여부를 정하는 속성

개요 background-attachment로 배경 이미지의 스크롤 여부를 정합니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-attachment: scroll | fixed | local | initial | inherit scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. fixed : 움직이지 않습니다. local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다. initial : 기본값으로 ...

CSS / 선택자(Selector) / 가상 클래스

CSS / 선택자(Selector) / 가상 클래스

:empty :empty는 내용이 없는 비어있는 요소를 선택합니다. 예를 들어 li:empty 는 li 요소 중 내용이 없는 것을 선택합니다. 즉 <li></li> 가 선택됩니다. 공백도 내용이 있는 것으로 봅니다. 따라서 <li> </li> 처럼 빈 칸이 있는 것은 선택되지 않습니다. :first-child :first-child는 형제 요소 중 첫번째 요소를 선택합니다. :hover :hover는 요소에 마우스를 올린 상태를 선택합니다. 예를 들어 p:hover { color: red; } 는 p 요소에 마우스를 올렸을 때 글자색을 ...

CSS / border-radius / 테두리 둥글게 만드는 속성

CSS / border-radius / 테두리 둥글게 만드는 속성

border-radius border-radius는 테두리를 둥글게 만드는 속성입니다. CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법) 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다. 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { box-sizing: border-box; width: 200px; height: 200px; margin: 20px auto; background-color: orange; } </style> </head> <body> <div class="jb"></div> </body> </html> 문법 1 border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 속성의 ...

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

표의 셀 안에 200×200 크기의 이미지를 넣고, 셀의 가로 크기를 100px로 정해도, 이미지는 200×200 크기로 나옵니다. 셀의 크기에 맞게 이미지가 줄어들게 하는 방법은 두가지가 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

CSS 강좌