Material UI Tutorial #2 - Typography

Material UI의 Typography 컴포넌트 소개

Typography 컴포넌트 사용하기

• Material UI가 설치된 후, Typography 컴포넌트를 사용하는 방법을 설명.

• Material UI 문서에서 'typography'를 검색하여 사용법을 확인할 수 있음.

• Typography 컴포넌트를 사용하면 h1, h2 등의 태그 대신 이 컴포넌트를 통해 텍스트 스타일을 지정할 수 있음.

Typography의 속성 이해하기

• Typography 컴포넌트에 텍스트를 중첩하여 사용할 수 있으며, props를 통해 스타일을 조정 가능.

• variant prop을 사용해 출력될 태그(h1, h2 등)를 설정할 수 있으며, 기본적으로는 variant에 따라 결정됨.

• component prop으로 실제 출력되는 HTML 태그를 변경할 수 있어 유연한 디자인이 가능함.

프로젝트 내에서의 적용 예시

• Create 페이지에서 Typography 컴포넌트를 사용하기 위해 import하는 방법 설명.

• 두 가지 방식으로 import 가능하며, 성능 차이는 미미하다고 언급됨.

• 새로운 Typography 컴포넌트를 생성하고 "create a new note"라는 텍스트 추가.

다양한 속성 활용하기

• 기본적으로 Paragraph 태그로 출력되며, variant prop으로 h1 태그로 변경 가능함.

• 여러 props를 추가할 때 가독성을 위해 줄바꿈하여 작성하는 것이 좋음.

• 색상은 테마 색상만 사용할 수 있으며, color prop으로 primary 또는 secondary 색상을 지정 가능.

텍스트 정렬 및 트렁케이션 기능

• align prop을 통해 텍스트 정렬(예: 중앙 정렬)을 설정할 수 있음.

• secondary 테마 색상을 적용하고 기본 Paragraph 형태로 변경하여 확인함.

타이포그래피 컴포넌트의 활용

텍스트 미리보기 및 자르기

• 타이포그래피 컴포넌트를 사용하여 텍스트를 한 줄로 표시하고, 블로그 미리보기와 같은 곳에서 간단한 스니펫을 보여줄 수 있는 방법에 대해 설명.

다양한 프로퍼티 확인하기

• 타이포그래피 컴포넌트에 전달할 수 있는 다양한 프로퍼티를 문서에서 확인하는 방법 안내. API 옵션을 클릭하여 사용할 수 있는 모든 프로퍼티 목록을 볼 수 있음.

색상 및 변형 설정

• 색상과 같은 특정 값만 전달 가능하며, 나중에 테마 값을 살펴볼 예정임. 또한, 다른 HTML 태그로 출력할 수 있는 방법도 언급됨.

헤더 생성 및 스타일링

• 새로운 타이포그래피 컴포넌트를 생성하여 페이지의 헤더를 만들고, 이를 h6로 설정하는 과정 설명.

• 실제 HTML 태그는 h2로 변경하였지만, 여전히 h6 스타일을 유지함으로써 시각적으로 원하는 결과를 얻음.

마진 및 색상 조정

• 하단 마진(gutter bottom)을 추가하고 자동으로 true로 설정되는 방식 설명.

• 텍스트 색상을 'text secondary'로 변경하여 회색 톤의 색상을 적용함. 이때 'secondary'와 혼동하지 않도록 주의 필요.

결론: 타이포그래피 컴포넌트의 유연성