오늘은 텍스트와 관련된 Tailwind CSS 클래스들에 대해 알아보자 :)

1. Line-Height

우선 Line-Height 클래스에 대해 소개하기 전에 Leading 이라는 개념을 알고 넘어가자

① Leading 이란?

• Leading : 위 보라색 영역 + 아래 보라색 영역

• Half Leading : 위 보라색 영역 or 아래 보라색 영역

• 해당 폰트 제작자가 Leading 값을 미리 지정해 놓음

• font-size : 16px = Leading을 제외한 실제 폰트 영역의 크기가 16px

🧐 그렇다면 Line-Height는 정확히 어디서부터 어느 영역까지를 의미하는 걸까? 🧐

② Line-Height 란?

• Line-Height : Leading + 실제 폰트 영역 (총 폰트의 높이)

• line-height : normal = 폰트 제작자가 기본으로 설정한 높이 (디폴트)

③ 클래스명

이제 Line-Height를 지정하는 클래스를 보자

클래스명	내용
leading-3	• line-height: 0.75rem (12px)
leading-4	• line-height: 1rem (16px)
leading-5	• line-height: 1.25rem (20px)
leading-6	• line-height: 1.5rem (24px)
leading-7	• line-height: 1.75rem (28px)
leading-8	• line-height: 2rem (32px)
leading-9	• line-height: 2.25rem (36px)
leading-10	• line-height: 2.5rem (40px)
leading-none	• line-height: 1
leading-tight	• line-height: 1.25
leading-snug	• line-height: 1.375
leading-normal	• line-height: 1.5
leading-relaxed	• line-height: 1.625
leading-loose	• line-height: 2

❗️ leading-<숫자> : line-height를 rem으로 지정 (고정값)

❗️ leading-none~leading-loose : line-height를 배율로 지정 (상대값)

그럼 Line-Height 의 값이 고정값이냐 상대값이냐에 따라 어떤 차이가 있는지 알아보자

ⓐ Line-Heihgt 고정값

• 지정해 준 값(ex. px, rem) 만큼의 Line-Heihgt를 가짐

• 폰트 크기와 상관없음

• 폰트 크기보다 Line-Heihgt값이 더 작으면 글자가 겹치는 현상이 발생
  

폰트 크기와 상관없이 Line-Heihgt가 고정되므로 되도록 쓰지 않는 것이 권고된다!

ⓑ Line-Heihgt 상대값

• 지정한 배율 만큼의 Line-Heihgt를 가짐 (폰트 크기에 비례)

• 폰트 크기가 바뀌어도 일정하게 Line-Heihgt 유지

이렇게만 말해서는 잘 이해가 가지 않을 수 있으니 예를 들어보자

만약 font-size : 16px일 때 위 사진처럼 line-heihgt : 1 로 주면 Line-Heihgt는 폰트 크기인 16px의 1배율이 되어 line-heihgt : 16px 과 같은 결과가 나온다!

④ BreakPoint (반응형) / Hover, Focus 적용

Line-Height를 반응형 디자인과 Hover, Focus에 적용해보자

종류	문법	예
BreakPoint	<적용할 BreakPoint>:<클래스명>	md:leading-7
State	<적용할 State>:<클래스명>	focus:leading-7

위 표처럼 클래스명 앞에 BreakPoint/State+:만 붙여주면 된다 👍

⑤ Value Customizing

Line-Height 클래스명에 사용되는 Value를 커스텀하는 법엔 두가지가 있다

ⓐ tailwind.config.js 파일에 커스텀 값 저장하기

이 방법은 아래 순서대로 따라하면 된다

• 순서

         ㉠ tailwind.config.js 파일 찾기

         ㉡ theme.extend 내부에 lineHeight 만들어 주기

⬇️ ⬇️

         ㉢ theme.extend.lineHeight에 내가 원하는 값 설정
             : "value name" : "value"

이제 아래 코드처럼 leading-extra-loose라는 클래스명으로 사용할 수 있게 된다 👍

• 코드

• 결과

해당 방법은 tailwind.config.js파일 내에 저장한 값이면 어느 곳에서든 전역적으로 사용 가능하다

ⓑ 인라인 내에서 커스텀 값 적용하기

두번째 방법은 첫번째 방법과 달리 전역적으로 사용할 필요 없는 값들을 커스터마이징 할 수 있는 방법으로 [] 대괄호를 이용한다

• 문법
  : leading-[주고자하는 line-height]

• 코드

• 결과

2. Font Size

이번엔 폰트 크기를 지정할 수 있는 클래스들에 대해 알아보자! 간단하다 😎

① 클래스명

클래스명	내용
text-xs	• font-size: 0.75rem (12px) • line-height: 1rem (16px)
text-sm	• font-size: 0.875rem (14px) • line-height: 1.25rem (20px)
text-base	• font-size: 1rem (16px) • line-height: 1.5rem (24px)
text-lg	• font-size: 1.125rem (18px) • line-height: 1.75rem (28px)
text-xl	• font-size: 1.25rem (20px) • line-height: 1.75rem (28px)
text-2xl	• font-size: 1.5rem (24px) • line-height: 2rem (32px)
text-3xl	• font-size: 1.875rem (30px) • line-height: 2.25rem (36px)

• font-size 뿐만 아니라 line-height 까지 함께 지정됨

❗️표에는 text-3xl까지만 정리했지만 text-9xl까지 존재한다❗️
폰트 사이즈 공식문서를 참고하면 될 것 같다 :)

② Line-Height 별도 지정

위의 클래스들을 사용하면서 지정된 Line-Heihgt 값이 아닌, 별도의 Line-Heihgt 값을 주고 싶을 경우가 있을 것이다. 어떻게 하면 될까?

ⓐ 문법

• font-size 클래스명 + / + line-height 클래스명의 value

이렇게 봐서는 감이 안 올 수 있으니 예시를 들어보자 😎

ⓑ 예

먼저 text-base 클래스를 적용했다

위 사진처럼 font-size: 1rem, line-heihgt: 1.5rem이 적용된 걸 볼 수 있다.
만약 여기서 Line-Heihgt를 1.75rem으로 변경하고 싶다면!

Line-Height 클래스명에서 해당 값의 클래스를 찾는다!

보다시피 leading-7이 1.75rem의 값을 가진다
그렇다면 leading-를 제외한 7이 위의 문법에서 말한 line-height 클래스명의 value이다

위처럼 text-base/7을 적용하면 아래와 같은 스타일을 얻을 수 있다!!

당연히 text-base/loose처럼 숫자가 아닌 문자도 가능하다!

③ BreakPoint (반응형) / Hover, Focus 적용

Font-Size를 반응형 디자인과 Hover, Focus에 적용해보자

종류	문법	예
BreakPoint	<적용할 BreakPoint>:<클래스명>	md:text-base
State	<적용할 State>:<클래스명>	focus:text-base

위 표처럼 클래스명 앞에 BreakPoint/State+:만 붙여주면 된다 👍

④ Value Customizing

Font-Size 클래스명에 사용되는 Value를 커스텀하는 법을 알아보자

ⓐ tailwind.config.js 파일에 커스텀 값 저장하기

이 방법은 아래 순서대로 따라하면 된다

• 순서

         ㉠ tailwind.config.js 파일 찾기

         ㉡ theme.extend 내부에 fontSize 만들어 주기

⬇️ ⬇️

         ㉢ theme.extend.fontSize에 내가 원하는 값 설정
             : "value name" : "value"

이제 아래 코드처럼 text-custom라는 클래스명으로 사용할 수 있게 된다 👍

• 코드

• 결과

❗️ 이 방법은 line-height를 제외한 font-size만 커스텀이 된다 ❗️
그럼 line-height도 커스텀하려면 어떻게 해야 할까? 간단하다!

         ㉢' theme.extend.fontSize에 내가 원하는 값 설정
             : "value name" : ["font-size value", "line-height value"]

결과를 보자!

• 코드

• 결과

잘 적용되고 있는 걸 볼 수 있다!

해당 방법은 tailwind.config.js파일 내에 저장한 값이면 어느 곳에서든 전역적으로 사용 가능하다

ⓑ 인라인 내에서 커스텀 값 적용하기

두번째 방법은 첫번째 방법과 달리 전역적으로 사용할 필요 없는 값들을 커스터마이징 할 수 있는 방법으로 [] 대괄호를 이용한다

• 문법
  : text-[주고자하는 font-size]

• 코드

• 결과

이 방법도 하나의 값만 커스텀하므로 font-size만 커스텀이 된다!

3. Text Color

폰트 컬러를 지정하는 클래스에 대해 알아보자

① 클래스명

해당 클래스는 특별히 설명할 것 없이 굉장히 간단하기도 하고 컬러별로 무수히 많은 클래스가 존재해서 폰트 컬러 공식 문서를 참고하면 될 것 같다 😀

② Opacity

내가 선택한 컬러로 지정하면서 투명도를 조절할 수도 있다!

ⓐ 문법

• 클래스명 + / + opacity

ⓑ 예

• 코드

• 결과

opacity를 0으로 설정한 제일 마지막 텍스트는 보이지 않게 되었고 위의 각 텍스트도 투명도가 잘 적용된 것을 볼 수 있다 :)

③ BreakPoint (반응형) / Hover, Focus 적용

이제 반응형 디자인과 Hover, Focus에 적용해보자

종류	문법	예
BreakPoint	<적용할 BreakPoint>:<클래스명>	md:text-blue-500
State	<적용할 State>:<클래스명>	focus:text-blue-500

위 표처럼 클래스명 앞에 BreakPoint/State+:만 붙여주면 된다 👍

④ Value Customizing

폰트 컬러를 커스텀하는 법을 알아보자!

ⓐ tailwind.config.js 파일에 커스텀 값 저장하기

이 방법은 아래 순서대로 따라하면 된다

• 순서

         ㉠ tailwind.config.js 파일 찾기

         ㉡ theme.extend 내부에 colors 만들어 주기

⬇️ ⬇️

         ㉢ theme.extend.colors에 내가 원하는 값 설정
             : "value name" : "value"

이제 아래 코드처럼 text-custom-green라는 클래스명으로 사용할 수 있게 된다 👍

• 코드

• 결과

해당 방법은 tailwind.config.js파일 내에 저장한 값이면 어느 곳에서든 전역적으로 사용 가능하다

ⓑ 인라인 내에서 커스텀 값 적용하기

두번째 방법은 첫번째 방법과 달리 전역적으로 사용할 필요 없는 값들을 커스터마이징 할 수 있는 방법으로 [] 대괄호를 이용한다

• 문법
  : text-[컬러코드]

• 코드

• 결과

4. Text Transform

Tailwind CSS 에는 대문자, 소문자 관련된 클래스도 있다 👍

① 클래스명

클래스명	내용	비고
uppercase	• text-transform: uppercase	모두 대문자로 출력
lowercase	• text-transform: lowercase	모두 소문자로 출력
capitalize	• text-transform: capitalize	각 단어의 가장 첫번째 알파벳을 대문자로 변경
normal-case	• text-transform: none	아무런 변경 없이 입력된 그대로 출력

② 예

• 코드

• 결과

클래스명 한 개로 이렇게 손쉽게 대문자, 소문자를 컨트롤 할 수 있다 😭

5. Text Align

텍스트를 정렬하는 클래스도 아주 간단하다!

① 클래스명

클래스명	내용
text-left	• text-align: left
text-center	• text-align: center
text-right	• text-align: right
text-justify	• text-align: justify (양쪽 정렬)

② BreakPoint (반응형) / Hover, Focus 적용

이제 반응형 디자인과 Hover, Focus에 적용해보자

종류	문법	예
BreakPoint	<적용할 BreakPoint>:<클래스명>	md:text-center
State	<적용할 State>:<클래스명>	focus:text-center

위 표처럼 클래스명 앞에 BreakPoint/State+:만 붙여주면 된다 👍

6. 느낀점

우선 평소에 그냥 쓰던 Line-Height 라는 개념에 대해서 좀 더 알게 되는 시간이었다. 특히 Leading 이라는 개념을 알게 되어 어떻게 Line-Height 가 동작하는지 이해가 확실히 됐다.

그리고 되게 신기했던 점은 대소문자 관련된 클래스였다. 여태까지 나는 실무에서 특히 input에 대문자 or 소문자만 입력받아야 할 때 정규 표현식으로 유효성검사를 하는 방식을 통해 구현했었다.

하지만 Tailwind CSS 를 사용한다면 그럴 필요 없이 클래스 하나로 구현이 가능하다니 놀라웠다 👍

실무에서 특히 잘 쓸 수 있을 것 같다 😍