[CSS] Font Weight

안녕하세요 동기 여러분! 오늘은 폰트 굵기(Font weight)를 바꾸는 방법에 대해 알아봅시다!

 

Font Weight

p {
  font-weight: bold;
}

사용 방법은 위의 예시와 같이 쓰면 됩니다.

 

---

 

굵기의 종류

굵기	설명
normal	보통 굵기 - 기본 굵기
bold	굵은 굵기
bolder	더 굵은 굵기
lighter	얇은 굵기
100 ~ 900	400의 굵기는 보통 굵기(normal)와 같고 700의 굵기는 굵은 굵기(bold)와 같다.
initial	기본 굵기로 돌아감
inherit	부모 요소의 굵기로 따라감

 

---

 

h1과 900의 굵기 비교

<!-- HTML 코드 -->
<h1>화무십일홍</h1>
<p>화무십일홍</p>

/* CSS 코드 */
p {
  font-weight: 900;
  font-size: xx-large;
}

 

실행화면

• 결과를 보니 h1과 p가 같아보인다!!!
• 크롬에서 h1은 xx-large(32px)의 크기와 900의 굵기를 가지고 있는 거 같다.
• 화무십일홍 - '한 번 흥한 것은 반드시 쇠하기 마련'

 

---

 

오늘의 느낌

느낌적인 느낌...