React Material UI Tutorial - 3 - Typography

타이포그래피와 머티리얼 UI

타이포그래피의 중요성

• 타이포그래피는 웹사이트의 텍스트 스타일과 외관을 다루며, 너무 많은 스타일이나 글꼴 크기는 UI를 해칠 수 있다.

• 머티리얼 UI는 이러한 문제를 해결하기 위해 다양한 타이포그래피 레벨을 제공한다. 각 레벨은 특정한 글꼴 크기, 두께 및 줄 높이를 가진다.

컴포넌트 생성 및 사용

• 새로운 파일 mui typography.tsx를 생성하고, 타입스크립트를 사용하여 함수형 컴포넌트를 만든다.

• 머티리얼 UI의 타이포그래피를 사용하기 위해 @mui/material에서 typography를 임포트한다.

헤딩 변형 살펴보기

• 13가지 변형 중 10가지를 살펴보며, 헤딩 변형은 h1부터 h6까지 존재한다.

• 각 헤딩은 HTML 요소로서 의미론적 역할을 하며, 시각적으로도 크기가 감소하는 특징이 있다.

서브타이틀 및 본문 텍스트

• 추가적으로 서브타이틀 1과 서브타이틀 2 변형을 사용하여 각각 다른 스타일을 적용할 수 있다.

• 본문 텍스트에 대한 변형으로 body 1과 body 2가 있으며, 이들은 기본적으로 단락 태그로 렌더링된다.

테마와 커스터마이징

• 머티리얼 UI의 기본 테마는 문서에서 확인할 수 있으며, 다양한 속성과 스타일을 포함하고 있다.

• 세미틱 요소 변경은 component prop을 통해 가능하며, 예를 들어 h4 태그 대신 h1 태그로 설정할 수 있다.

마진 조정 기능

• gutterBottom prop은 텍스트 아래 여백을 추가하며, 이는 페이지 제목이나 섹션 제목에 유용하다.