폰트 두께

폰트 두께 (Font Weight)

텍스트의 굵기(font weight)를 정해 주는 유틸리티예요. 가늘게(thin)부터 아주 굵게(black)까지 9단계의 세밀한 굵기를 손쉽게 적용할 수 있어요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

font-thin font-weight: 100;

font-extralight font-weight: 200;

font-light font-weight: 300;

font-normal font-weight: 400;

font-medium font-weight: 500;

font-semibold font-weight: 600;

font-bold font-weight: 700;

font-extrabold font-weight: 800;

font-black font-weight: 900;

font-(<custom-property>) font-weight: var(<custom-property>);

font-[<value>] font-weight: <value>;

기본 예제 (Basic example)

font-thin, font-bold 같은 유틸리티를 사용해 요소의 폰트 두께를 설정할 수 있어요.

font-light The quick brown fox jumps over the lazy dog.

font-normal The quick brown fox jumps over the lazy dog.

font-medium The quick brown fox jumps over the lazy dog.

font-semibold The quick brown fox jumps over the lazy dog.

font-bold The quick brown fox jumps over the lazy dog.

<p class="font-light ...">The quick brown fox ...</p><p class="font-normal ...">The quick brown fox ...</p><p class="font-medium ...">The quick brown fox ...</p><p class="font-semibold ...">The quick brown fox ...</p><p class="font-bold ...">The quick brown fox ...</p>

커스텀 값 사용하기 (Using a custom value)

font-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 폰트 두께를 설정할 수 있어요.

<p class="font-[1000] ...">
  Lorem ipsum dolor sit amet...
</p>

CSS 변수를 쓸 때는 font-(weight:<custom-property>) 문법을 사용할 수도 있어요.

<p class="font-(weight:--my-font-weight) ...">
  Lorem ipsum dolor sit amet...
</p>

이것은 font-[weight:var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

반응형 디자인 (Responsive design)

font-weight 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.

<p class="font-normal md:font-bold ...">
  Lorem ipsum dolor sit amet...
</p>

variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.

테마 커스터마이징 (Customizing your theme)

--font-weight-* 테마 변수를 사용하면 프로젝트의 폰트 두께 유틸리티를 커스터마이즈할 수 있어요.

@theme {
  --font-weight-extrablack: 1000;
}

이제 마크업에서 font-extrablack 유틸리티를 사용할 수 있어요.

<div class="font-extrablack">
  <!-- ... -->
</div>

테마 커스터마이징에 대해 더 자세히 알고 싶다면 theme 문서를 확인해 보세요.