Heading
Heading (제목)
의미론적 HTML 제목 요소를 렌더링할 때 사용하는 컴포넌트예요. 페이지나 섹션의 제목을 나타낼 때 사용해요.
출처: 문서
본문
사용법 (Usage)
import { Heading } from "@chakra-ui/react"
<Heading>I'm a Heading</Heading>
예제 (Examples)
크기 (Sizes)
size prop을 사용해서 heading 컴포넌트의 크기를 바꿀 수 있어요.
| 예제 (heading-with-sizes) |
강조 (Highlight)
Heading 컴포넌트를 Highlight 컴포넌트와 조합해서 텍스트를 강조할 수 있어요.
| 예제 (heading-with-highlight) |
다른 요소로 (As another element)
as prop을 사용해서 heading을 다른 HTML 요소로 렌더링할 수 있어요.
| 예제 (heading-with-as-prop) |
굵기 (Weights)
fontWeight prop을 사용해서 heading 컴포넌트의 굵기를 바꿀 수 있어요.
| 예제 (heading-with-weights) |
조합 (Composition)
Heading 컴포넌트를 사용해서 다른 컴포넌트들을 조합할 수 있어요.
| 예제 (heading-with-composition) |
커스터마이즈 (Customization)
:::info
레시피를 커스터마이즈한 후에는 CLI typegen 명령을 실행해서 타입을 다시 생성하세요. postinstall, CI, monorepo에서 typegen을 실행하는 방법은 CLI 문서에서 확인할 수 있어요.
npx @chakra-ui/cli typegen
:::
fontSize를 덮어쓰려면 textStyle prop을 사용하는 것을 권장해요. 이는 줄 높이와 글자 간격도 함께 고려하기 때문이에요.
기본 스타일 변경 (Changing default styles)
Heading 컴포넌트를 커스터마이즈하는 예시예요.
import { createSystem, defaultConfig, defineRecipe } from "@chakra-ui/react"
const headingRecipe = defineRecipe({
base: {
fontWeight: "normal",
textStyle: "4xl",
},
})
const system = createSystem(defaultConfig, {
theme: {
recipes: { heading: headingRecipe },
},
})
제목 폰트 전역 변경 (Changing heading font globally)
제목의 기본 폰트를 바꾸려면 테마에서 fonts.heading 토큰을 설정하세요.
import { createSystem, defaultConfig } from "@chakra-ui/react"
const system = createSystem(defaultConfig, {
theme: {
tokens: {
fonts: {
heading: { value: "Playfair Display, serif" },
},
},
},
})
새 크기 추가 (Adding a new size)
variants.size 속성을 업데이트해서 커스텀 크기를 만들 수 있어요.
import { createSystem, defaultConfig, defineRecipe } from "@chakra-ui/react"
const headingRecipe = defineRecipe({
variants: {
size: {
custom: {
fontSize: "100px",
lineHeight: "100px",
letterSpacing: "-2px",
},
},
},
})
const system = createSystem(defaultConfig, {
theme: {
recipes: { heading: headingRecipe },
},
})
그런 다음 custom 변형을 사용해서 커스텀 크기를 만들 수 있어요.
<Heading size="custom">I'm a custom size</Heading>
Props
| PropTable (Heading / Heading) |