오늘은 Tailwind CSS의 Sizing 에 대해 알아보자 :)

1. Width

① 클래스명

기본 중 기본이라고 할 수 있는 Width 설정에 관한 클래스명을 다음 표에 간략히 정리해보았다

클래스명	내용
w-0	• width: 0px
w-1	• width: 0.25rem (4px)
w-1.5	• width: 0.375rem (6px)
w-px	• width: 1px
w-auto	• width: auto
w-1/2	• width: 50%
w-1/4	• width: 25%
w-full	• width: 100%
w-min	• width: min-content
w-max	• width: max-content
w-fit	• width: fit-content

Width 공식 문서에 들어가면 아주 자세하게 클래스명들이 설명되어 있으니 참고하면 좋을 것 같다!

② Max-width / Min-width

Width에 대해 알아보는 김에 Max-width, Min-width에 대해서도 알아보자

종류	문법	예
Max-width	max-<width 클래스명>	max-w-1
Min-width	min-<width 클래스명>	min-w-0

앞서 알아보았던 Width클래스명 앞에 max-, min-만 붙여주면 된다!

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

그렇다면 Width를 반응형 디자인과 Hover, Focus에 적용하고 싶을 땐 어떻게 하면 될까?

종류	문법	예
BreakPoint	<적용할 BreakPoint>:<클래스명>	md:w-1/2
State	<적용할 State>:<클래스명>	focus:w-max

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

④ Value Customizing

실제로 Tailwind CSS를 실무에 사용할 때는 이미 지정되어 있는 Value 외의 값도 필요하므로 클래스명에 사용되는 Value를 커스텀 할 수 있게 되어있다!

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

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

• 순서

         ㉠ tailwind.config.js 파일 찾기

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

⬇️ ⬇️

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

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

• 코드

• 결과

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

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

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

• 문법
  : w-[주고자하는 width]

• 코드

• 결과

위와 같이 대괄호 하나로 손쉽게 커스텀해서 사용이 가능하다

2. Height

① 클래스명

Width에 대해 알아봤으니 다음은 Height를 정리해보자

클래스명	내용
h-0	• height: 0px
h-1	• height: 0.25rem (4px)
h-1.5	• height: 0.375rem (6px)
h-px	• height: 1px
h-auto	• height: auto
h-1/2	• height: 50%
h-1/4	• height: 25%
h-full	• height: 100%
h-min	• height: min-content
h-max	• height: max-content
h-fit	• height: fit-content
h-screen	• height: 100vh
h-svh	• height: 100svh
h-lvh	• height: 100lvh
h-dvh	• height: 100dvh

Height 공식 문서에 들어가면 더 많은 클래스명들이 설명되어 있으니 더 궁금한 게 있으면 참고할 것!

② vh / svh / lvh / dvh 비교

Height를 알아보다보니 vh, svh, lvh, dvh 개념이 나오는데 각각이 뭐가 다른지 궁금했다.

ⓐ vh (h-screen)

• vh : 뷰포트 높이값의 1/100을 의미하는 단위

• 100vh : 뷰포트 전체 높이값

h-screen의 height : 100vh는 기존에 많이 사용하던 vh 개념이라 알고 있었지만 다음부터가 궁금했다

ⓑ svh (h-svh)

• svh : smallest vh의 의미로 뷰포트의 최소값의 1/100을 의미하는 단위

• 100svh : 뷰포트의 최소 높이값

출처

위의 영상을 보면 세로 스크롤 시 상단의 주소창이 사라져도 영역의 높이가 뷰포트의 최소 높이값으로 고정되어 있는 걸 볼 수 있다

ⓒ lvh (h-lvh)

• lvh : largest vh의 의미로 뷰포트의 최대값의 1/100을 의미하는 단위

• 100lvh : 뷰포트의 최대 높이값

출처

영상에서 보이듯이 h-lvh의 영역은 뷰포트의 최대 높이값을 가지고 있어 스크롤 전에도 아래쪽에 높이를 가지고 있다

ⓓ dvh (h-dvh)

• dvh : dynamic vh의 의미로 뷰포트의 동적인 높이값의 1/100을 의미하는 단위

• 100dvh : 뷰포트의 높이값 (동적)

출처

동적인 뷰포트 높이값을 가지기 때문에 스크롤 시 상단의 주소창이 사라지면 주소창 높이만큼 h-dvh 영역 높이가 늘어나는 걸 볼 수 있다!

이렇게 한 번에 비교해보니 차이점을 쉽게 알 수 있었다 👍

③ Max-height / Min-height

Max-height, Min-height도 간단하다

종류	문법	예
Max-height	max-<height 클래스명>	max-h-1
Min-height	min-<height 클래스명>	min-h-0

Height 클래스명 앞에 max-, min-만 붙여주면 된다!

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

그렇다면 Height를 반응형 디자인과 Hover, Focus에 적용하고 싶을 땐 어떻게 하면 될까?

종류	문법	예
BreakPoint	<적용할 BreakPoint>:<클래스명>	md:h-1/4
State	<적용할 State>:<클래스명>	focus:h-full

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

⑤ Value Customizing

Height에 대한 Value 커스터마이징도 Width의 Value 커스터마이징과 같은 방법이다!

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

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

• 순서

         ㉠ tailwind.config.js 파일 찾기

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

⬇️ ⬇️

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

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

• 코드

• 결과

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

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

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

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

• 코드

• 결과

3. Size

CSS를 사용해본 사람은 알겠지만 정사각형을 만들기 위해서는 Width, Height를 각각 지정해주어야 한다.

하지만!
Tailwind CSS에서는 Size라는 아이를 이용하여 Width와 Height를 한번에 같은 값으로 지정할 수 있다 😀

① 클래스명

클래스명	내용
size-0	• width: 0px • height: 0px
size-1	• width: 0.25rem • height: 0.25rem
size-1.5	• width: 0.375rem • height: 0.375rem
size-px	• width: 1px • height: 1px
size-auto	• width: auto • height: auto
size-1/2	• width: 50% • height: 50%
size-1/4	• width: 25% • height: 25%
size-full	• width: 100% • height: 100%
size-min	• width: min-content • height: min-content
size-max	• width: max-content • height: max-content
size-fit	• width: fit-content • height: fit-content

② ❗️ 주의할 점 ❗️

처음에는 Size를 사용하면 무조건 정사각형이 나오겠구나 생각했었는데 그게 아니었다 😭
Width, Height 값이 고정으로 지정되는 클래스가 아니면 정사각형이 나오지 않는 경우가 많다!

ⓐ 정사각형 ⭕️ (Width / Height 고정값 적용)

• 코드

• 결과

위의 경우처럼 너비, 높이가 고정값으로 적용되는 클래스는 아무 문제 없이 정사각형이 잘 나온다!

ⓑ 정사각형 ❌ (Width / Height % 적용)

그렇다면 Width, Height 값이 25%로 지정되는 size-1/4로 코드를 짜보자

• 코드

• 결과

위 결과를 보면 알 수 있듯이 자식 요소가 부모 요소의 25%의 Width를 가지게 되었다.
그러나 div 특성상 Height가 auto이므로 부모 요소의 Height를 따로 설정해 주지 않는 이상 Height: 25%는 적용되지 않아 정사각형이 나오지 않는다!


🧐 그렇다면 %로 값이 적용되는 클래스를 사용하며 정사각형을 만들 순 없을까??
🧐 아래 코드를 보자

ⓒ 정사각형 ⭕️ (Width / Height % 적용)

• 코드

• 결과

위 코드처럼 부모 요소에 너비와 높이에 값을 주면 Size-1/4를 사용하고도 정사각형을 만들어 낼 수 있다 :)

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

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

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

④ Value Customizing

Size에 대한 Value 커스터마이징도 Width의 Value 커스터마이징과 같은 방법이다!

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

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

• 순서

         ㉠ tailwind.config.js 파일 찾기

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

⬇️ ⬇️

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

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

• 코드

• 결과

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

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

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

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

• 코드

• 결과

4. 느낀점

Height를 알아보며 이번 기회에 여러 vh 종류를 알아보고 정리해 보는 기회를 가질 수 있어 좋았다.
막상 정리해보고 나니 별 거 아니었지만 서로의 차이점을 확실히 알게 됐다 :)
실무에서 각 차이점을 유의해서 잘 구분하여 적재적소에 사용할 수 있을 수 있을 것 같다.

그리고 Size를 알게 된 것도 굉장히 흥미로웠다.
처음 딱 봤을 땐 "아 정사각형 만드는 거구나!" 했지만
막상 써보니 "꼭 정사각형이 아닌 곳에도 사용해서 효율적인 코드 작성에 도움이 될 수 있게 할 수도 있군!" 이라는 생각이 들었다.
이것도 유용하게 많이 쓸 수 있을 것 같다는 생각이 든다!

역시 왜 인기가 있는지 알 수 있군 😎