글자 굵기 바꾸는 방법 - font-weight

글자의 굵기도 조절해볼까요? font-weight 속성은 글자 굵기를 지정합니다.
1 min read

font-weight

font-weight 속성으로 글자의 굵기를 지정합니다.

 

기본형

font-weight : normal | bold | bolder | lighter | number
  • normal : 보통 굵기입니다. 숫자 400과 같습니다.
  • bold : 굵은 굵기입니다. 숫자 700과 같습니다.
  • bolder : 상속된 값보다 굵은 굵기입니다.
  • lighter : 상속된 값보다 얇은 굵기입니다.
  • number : 100, 200, 300, 400, 500, 600, 700, 800, 900

 

예제

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

 

기타 CSS 참조

You may like these posts

  • font-size 글자 크기는 font-size 속성으로 조절합니다. 픽셀이나 포인트를 비롯해 크기를 여러 단위로 지정할 수 있고 백분율을 사용할 수도 있습니다.   기본형 font-size : 절대크기 | 상대크기 | 크기 | 백분율   사용 가능한 속성값 font-…
  • font-variant font-variant는 소문자를 작은 대문자로 바꾸는 속성입니다. 즉, 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다.   기본형 font-variant : normal | small-caps normal : 일반적인…
  • font-style font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다.   기본형 font-style : normal | italic | oblique normal : 보통 모양입니다. italic : 기울임꼴입니다. oblique : 기울임꼴입니다. &n…
  • line-height 문단의 첫 줄을 넘어 두 줄 이상되면 '줄 간격'이 생깁니다. 그런데 줄 간격은 너무 좁으면 글의 내용이 눈에 들어오지 않습니다. 이때 line-height 속성을 이용하면 원하는 만큼 줄 높이를 조절할 수 있습니다.   기본형 line-height : norm…
  • text-transform 영문자를 표기 할 때 text-transform 속성은 모든 글자를 대문자로 또는 소문자로 바꾸거나 첫번째 글자를 대문자로 변환할 수 있습니다. 이 속성은 한글에서는 의미가 없는 속성입니다.   기본형 text-transform : none | capita…
  • font-weight font-weight 속성으로 글자의 굵기를 지정합니다.   기본형 font-weight : normal | bold | bolder | lighter | number normal : 보통 굵기입니다. 숫자 400과 같습니다. bold : 굵은 굵기입니다. 숫자 …

Post a Comment