오늘은 Tailwind CSS에서 Spacing을 주는 법에 대해 알아보자 :)

1. Padding

① 클래스명

ⓐ 0px

아래 표는 Padding : 0px 에 관한 클래스명만 정리한 것이다!

클래스명	내용
p-0	• padding: 0px
px-0	• padding-left: 0px • padding-right: 0px
py-0	• padding-top: 0px • padding-bottom: 0px
pt-0	• padding-top: 0px
pr-0	• padding-right: 0px
pb-0	• padding-bottom: 0px
pl-0	• padding-left: 0px

ⓑ 1px

특이하게 Tailwind CSS에는 Padding : 1px 을 지정하는 클래스명이 따로 지정되어 있다!
아래 표를 보자!

클래스명	내용
p-px	• padding: 1px
px-px	• padding-left: 1px • padding-right: 1px
py-px	• padding-top: 1px • padding-bottom: 1px
pt-px	• padding-top: 1px
pr-px	• padding-right: 1px
pb-px	• padding-bottom: 1px
pl-px	• padding-left: 1px

❗️px = 1px을 의미❗️

ⓒ 나머지

0px 과 1px을 제외한 나머지 값들의 클래스명에 대해 알아보자

클래스명	내용
p-1	• padding: 0.25rem
px-1	• padding-left: 0.25rem • padding-right: 0.25rem
py-1	• padding-top: 0.25rem • padding-bottom: 0.25rem
pt-1	• padding-top: 0.25rem
pr-1	• padding-right: 0.25rem
pb-1	• padding-bottom: 0.25rem
pl-1	• padding-left: 0.25rem

❗️ 0.25rem = 4px ❗️
❗️ 위의 표는 0.25rem 값의 클래스명만 예시로 정리해 놓은 것 ❗️

즉, 정리하자면 "주고자하는 패딩 위치-주고자하는 패딩 간격" 이다.

❗️여기서 주의할 점은 주고자하는 패딩 간격은 px가 아니고 rem 기준이라는 것이다 ❗️

Padding 공식문서에 들어가면 각각의 rem 별로 몇 px 인지 자세히 기재되어 있으니 참고해도 좋을 것 같다 👍

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

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

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

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

② Value Customizing

당연한 말이지만 실제 직무에서는 Tailwind CSS 내에서 이미 지정되어 있는 Padding Value 이외에 더 세밀한 값들이 필요하다.
당연히 Tailwind CSS도 이를 알기에 클래스명에 사용되는 Value를 커스텀 할 수 있게 되어있다!

커스터마이징 방법에는 2가지가 있다

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

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

• 순서

         ㉠ tailwind.config.js 파일 찾기

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

⬇️ ⬇️

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

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

• 코드

• 결과

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

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

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

• 문법
  : 주고자하는 패딩 위치-[주고자하는 패딩 간격]

• 코드

• 결과

위와 같이 대괄호 하나면 손쉽게 커스텀이 가능하다 😍

이제 Margin에 대해 알아볼건데 Padding과 구조가 거의 같다

2. Margin

① 클래스명

ⓐ 0px

클래스명	내용
m-0	• margin: 0px
mx-0	• margin-left: 0px • margin-right: 0px
my-0	• margin-top: 0px • margin-bottom: 0px
mt-0	• margin-top: 0px
mr-0	• margin-right: 0px
mb-0	• margin-bottom: 0px
ml-0	• margin-left: 0px

ⓑ 1px

클래스명	내용
m-px	• margin: 1px
mx-px	• margin-left: 1px • margin-right: 1px
my-px	• margin-top: 1px • margin-bottom: 1px
mt-px	• margin-top: 1px
mr-px	• margin-right: 1px
mb-px	• margin-bottom: 1px
ml-px	• margin-left: 1px

❗️px = 1px을 의미❗️

ⓒ 나머지

0px 과 1px을 제외한 나머지 값들의 클래스명에 대해 알아보자

클래스명	내용
m-1	• margin: 0.25rem
mx-1	• margin-left: 0.25rem • margin-right: 0.25rem
my-1	• margin-top: 0.25rem • margin-bottom: 0.25rem
mt-1	• margin-top: 0.25rem
mr-1	• margin-right: 0.25rem
mb-1	• margin-bottom: 0.25rem
ml-1	• margin-left: 0.25rem

❗️ 0.25rem = 4px ❗️
❗️ 위의 표는 0.25rem 값의 클래스명만 예시로 정리해 놓은 것 ❗️

즉, "주고자하는 마진 위치-주고자하는 마진 간격" 이다.

❗️여기서 주의할 점은 주고자하는 마진 간격은 px가 아니고 rem 기준이라는 것이다 ❗️

Margin 공식문서에 들어가면 각각의 rem 별로 몇 px 인지 자세히 기재되어 있으니 참고해도 좋을 것 같다 👍

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

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

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

② Value Customizing

Tailwind CSS 내에서 이미 지정되어 있는 Margin Value 이외의 값들을 커스터마이징하는 방법에는 2가지가 있다

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

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

• 순서

         ㉠ tailwind.config.js 파일 찾기

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

⬇️ ⬇️

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

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

• 코드

• 결과

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

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

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

• 문법
  : 주고자하는 마진 위치-[주고자하는 마진 간격]

• 코드

• 결과

다른 곳에서 쓰지 않아도 되는 값이라면 이 방법으로 하는 게 훨씬 간편해서 좋은 것 같다

3. Space Between

Space Between은 무엇일까?

① 정의

• 부모 엘리먼트 내의 자식 엘리먼트 사이의 간격

• 부모 엘리먼트에 사용

• flex와 반드시 함께 사용

🧐 그럼 gap과의 차이는 무엇일까? 궁금해서 알아보았다

② Space Between ↔️ Gap

Space Between	Gap
flex 와 함께 사용	grid 와 함께 사용
가로, 세로 : x방향과 y방향의 간격만 설정 가능	가로, 세로, 양방향 : x방향과 y방향 뿐만 아니라 양방향(x, y) 간격도 설정 가능

아무래도 Space Between은 flex와 사용하다 보니 단방향으로만 간격 설정이 가능하고, Gap은 grid에 사용되니 양방향도 설정이 가능하다는 차이가 있다!

③ 클래스명

ⓐ 기본

클래스명	내용
space-x-*	• margin left 조절
space-y-*	• margin-top 조절

❗️ Space Between도 마찬가지로 rem 기준으로 계산됨❗️

❗️ x방향 : 첫번째 자식 엘리먼트를 제외한 자식 엘리먼트의 margin left를 조절 ❗️

❗️ y방향 : 첫번째 자식 엘리먼트를 제외한 자식 엘리먼트의 margin top을 조절 ❗️

❗️ 클래스명 앞에 - 를 붙이면 negative value 를 가져 자식 엘리먼트들을 서로 겹쳐지게 할 수도 있음 ❗️

Space Between 공식문서에 들어가면 각각의 rem 별로 몇 px 인지 자세히 기재되어 있으니 참고하면 될 것 같다 👍

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

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

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

④ Value Customizing

Tailwind CSS 내에서 이미 지정되어 있는 Space Value 이외의 값들을 커스터마이징하는 방법에도 역시 2가지가 있다

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

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

• 순서

         ㉠ tailwind.config.js 파일 찾기

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

⬇️ ⬇️

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

이제 아래 코드처럼 사용할 수 있게 된다 👍

• 코드

• 결과

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

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

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

• 문법
  : space-방향-[주고자하는 space 간격]

• 코드

• 결과

⑤ 한계점

공식문서를 읽어내려가다 보니 공식문서 자체에서 기재한 Space Between의 한계가 있었다.
정리해보자면!

• Gap과 달리 Space Between은 그저 Margin 을 추가하는 것일 뿐

• 그러므로 Grid나 복잡한 디자인에서는 적합하지 않음

• 오히려 Grid나 복잡한 디자인에서는 Gap을 사용하는 게 더 바람직함

그렇지 않아도 일반적으로 알고 있는 Gap의 개념이 아니라 Margin을 조절하여 자식 엘리먼트 사이 간격을 조정한다는 것이 특이하다고 느껴졌는데 약간 주먹구구식인 느낌이 없지않아 있다보니 자체적으로도 권장하지는 않는 모양이다.

4. 느낀점

간격들의 기준이 rem이라 일일이 공식문서에서 찾아보면서 내가 원하는 px에 맞는 rem을 찾으려면 귀찮겠다고 생각했었는데 생각보다 값을 커스터마이징 하는 법이 쉬워서 다시 한 번 tailwind CSS에 반하게 된 시간이었다.

심지어 대괄호를 이용해서 그 때 그 때 바로 커스텀이 가능하다니 진짜 편리한 것 같다 👍