Typography helpers

Typography helpers (타이포그래피 헬퍼)

텍스트의 크기, 정렬, 변형, 굵기, 글꼴까지 클래스 하나로 손쉽게 조정할 수 있는 타이포그래피 헬퍼들이에요. 반응형 뷰포트별 조정도 지원해요.

출처: 문서

선택할 수 있는 크기는 7가지예요:

각 뷰포트 너비별로 특정한 크기를 선택할 수 있어요. 크기 수정자에 뷰포트 너비를 붙이기만 하면 돼요.

예를 들어 $size-1의 수정자들은 다음과 같아요:

클래스	모바일(Mobile) `768px`까지	태블릿(Tablet) `769px`~`1023px`	데스크톱(Desktop) `1024px`~`1215px`	와이드스크린(Widescreen) `1216px`~`1407px`	FullHD `1408px` 이상
`is-size-1-mobile`	적용	유지	유지	유지	유지
`is-size-1-touch`	적용	적용	유지	유지	유지
`is-size-1-tablet`	유지	적용	적용	적용	적용
`is-size-1-desktop`	유지	유지	적용	적용	적용
`is-size-1-widescreen`	유지	유지	유지	적용	적용
`is-size-1-fullhd`	유지	유지	유지	유지	적용

이 같은 로직을 7가지 크기 각각에 그대로 적용할 수 있어요.

4가지 정렬 헬퍼 중 하나를 사용해 텍스트를 정렬할 수 있어요:

각 뷰포트 너비별로 텍스트를 다르게 정렬할 수 있어요. 정렬 수정자에 뷰포트 너비를 붙이면 돼요.

예를 들어 has-text-left의 수정자들은 다음과 같아요:

클래스	모바일(Mobile) `768px`까지	태블릿(Tablet) `769px`~`1023px`	데스크톱(Desktop) `1024px`~`1215px`	와이드스크린(Widescreen) `1216px`~`1407px`	FullHD `1408px` 이상
`has-text-left-mobile`	왼쪽 정렬	유지	유지	유지	유지
`has-text-left-touch`	왼쪽 정렬	왼쪽 정렬	유지	유지	유지
`has-text-left-tablet-only`	유지	왼쪽 정렬	유지	유지	유지
`has-text-left-tablet`	유지	왼쪽 정렬	왼쪽 정렬	왼쪽 정렬	왼쪽 정렬
`has-text-left-desktop-only`	유지	유지	왼쪽 정렬	유지	유지
`has-text-left-desktop`	유지	유지	왼쪽 정렬	왼쪽 정렬	왼쪽 정렬
`has-text-left-widescreen-only`	유지	유지	유지	왼쪽 정렬	유지
`has-text-left-widescreen`	유지	유지	유지	왼쪽 정렬	왼쪽 정렬
`has-text-left-fullhd`	유지	유지	유지	유지	왼쪽 정렬

이 같은 로직을 4가지 정렬 각각에 그대로 적용할 수 있어요.

4가지 텍스트 변형 헬퍼 중 하나를 사용해 텍스트를 변형할 수 있어요:

6가지 텍스트 굵기 헬퍼 중 하나를 사용해 텍스트 굵기를 바꿀 수 있어요:

5가지 글꼴 계열 헬퍼 중 하나를 사용해 글꼴 계열을 바꿀 수 있어요:

클래스	계열(Family)
`is-family-sans-serif`	글꼴 계열을 `$family-sans-serif`로 설정해요
`is-family-monospace`	글꼴 계열을 `$family-monospace`로 설정해요
`is-family-primary`	글꼴 계열을 `$family-primary`로 설정해요
`is-family-secondary`	글꼴 계열을 `$family-secondary`로 설정해요
`is-family-code`	글꼴 계열을 `$family-code`로 설정해요