Text
Text (텍스트)
텍스트 컴포넌트는 Fluent의 타이포그래피에 대한 의견을 코드화해서, 제품 전반에서 쉽게 사용하고 표준화할 수 있게 해 주는 요소예요. 타이포그래피 규칙을 미리 정해둔 '규격 텍스트 컴포넌트'라고 생각하면 쉬워요.
일반 텍스트에는 텍스트 컴포넌트를 사용하세요. 하이퍼텍스트가 필요하다면 link를 대신 사용하세요.
출처: React Text 문서
본문
Presets (프리셋)
쉬운 구현을 위해 텍스트 프리셋 컴포넌트를 사용하세요. 프리셋은 Fluent 2 Web UI kit에 정의된 주요 텍스트 스타일에 대응해요.
| Name (이름) | Preset (프리셋) |
|---|---|
| Caption 2 | <Caption2> |
| Caption 1 | <Caption1> |
| Body 1 | <Body1> |
| Subtitle 2 | <Subtitle2> |
| Subtitle 1 | <Subtitle1> |
| Title 3 | <Title3> |
| Title 2 | <Title2> |
| Title 1 | <Title1> |
| Large Title | <LargeTitle> |
| Display | <Display> |
프리셋은 글꼴 패밀리, 크기, 두께를 변경할 수 없게 해요. 이 속성 중 어느 하나라도 조정해야 한다면 적절한 props와 함께 Text를 사용하세요.
Layout (레이아웃)
Font families (글꼴 패밀리)
font prop을 사용해 글꼴 패밀리를 선택하세요. 대부분의 시나리오에서는 기본 글꼴인 Segoe UI를 사용하세요. 코드를 나타낼 때는 monospace 글꼴을 사용하세요.
Alignment (정렬)
align prop으로 텍스트 정렬을 바꿀 수 있어요. 대부분의 경우 왼쪽 정렬이 가장 읽기 쉬워요. 다른 정렬은 드물게 사용하세요.
웹 페이지에서 양쪽 정렬(justified) 텍스트는 피하세요. 일관된 줄 길이와 일관되지 않은 간격 때문에 정보를 스캔하기 어려워질 수 있어요.
자세한 내용은 우리의 타이포그래피 가이드라인을 참고하세요.
Accessibility (접근성)
기본적으로 텍스트 컴포넌트는 span 요소를 만들어요. as prop을 사용해 의미론적(semantic) HTML을 만드세요.
글꼴의 모양을 사용해 의미를 전달하는 것은 피하세요. 모든 화면 낭독기가 텍스트가 굵게 또는 기울임꼴인지 전달하지는 않기 때문에, Bold와 italic 텍스트는 필요할 때만 사용해야 해요.
더 알아보기 (Learn more)
- Text 스토리북 및 React 가이드: react.fluentui.dev
- Text Web Components 가이드: web-components.fluentui.dev
- 하이퍼텍스트에는 Link 참고