Next.js 캐럿마켓 클론코딩 (TAILWIND 1)

Tailwind란?

Tailwind CSS는 유틸리티 퍼스트(Utility-First) CSS 프레임워크로, 사용자에게 클래스 기반의 접근 방식을 통해 신속하게 스타일을 적용할 수 있도록 도와준다.
--> 이는 전통적인 CSS 방법론과 달리, 미리 정의된 CSS 클래스를 활용하여 스타일링을 구현하게 된다.

Tailwind CSS의 주요 특징

유틸리티 클래스:

• Tailwind는 다양한 유틸리티 클래스를 제공하여, 요소의 스타일을 쉽게 정의할 수 있다.
• 예를 들어, p-4는 요소에 1rem의 패딩을 적용하고, text-center는 텍스트를 가운데 정렬한다.

모듈화된 스타일링:

• 각 클래스는 개별적인 스타일 속성에 대응하므로, 여러 클래스를 조합하여 원하는 디자인을 구현할 수 있다.
• 이는 CSS 파일이 크고 복잡해지는 것을 방지한다.

반응형 디자인:

• Tailwind는 반응형 디자인을 지원하는 다양한 유틸리티를 제공한다.
• 예를 들어, md:text-lg는 화면 크기가 md(중간) 이상일 때 텍스트 크기를 lg로 설정한다.

확장 가능성:

• 사용자 정의 테마를 통해 기본적인 색상, 크기, 여백 등을 쉽게 조정할 수 있다.
• tailwind.config.js 파일을 사용하여 사용자 정의 설정을 추가할 수 있다.

JIT 컴파일러:

• Tailwind CSS는 Just-in-Time(JIT) 컴파일러를 지원하여, 사용자가 실제로 사용하는 클래스만 CSS 파일에 포함한다. 이는 성능을 향상시키고 빌드 타임을 단축시킨다.

---

Tailwind 시작하기

자동완성을 위해, 내가 편리하게 사용하기 위해 --> Tailwind CSS IntelliSense를 VSC에서 확장을 설치주면 된다.

그럼 이렇게 자동완성이 이루어지는 것을 확인할 수 있다.

그렇다면, Tailwind를 사용해서 간단한 모달창을 만들어보자

export default function Home() {
  return (
    <main className="bg-gray-300 h-screen flex items-center justify-center p-5">
      <div className="bg-white shadow-lg p-5 rounded-2xl w-full">
        <div className="flex justify-between items-center">
          <div className="flex flex-col">
            <span className="text-gray-600 font-semibold -mb-1">
              In transit
            </span>
            <span className="text-4xl font-semibold">Coolblue</span>
          </div>
          <div
            className="size-12 
          bg-orange-400 rounded-full"
          />
        </div>
        <div className="my-2 flex items-center gap-2">
          <span className="bg-green-400 uppercase px-3 py-1.5 text-xs  font-medium rounded-full text-white ">
            Today
          </span>
          <span>9:30 ~ 10:30</span>
        </div>
        <div className="relative">
          <div className="bg-gray-200 w-full h-2 rounded-full absolute " />
          <div className="bg-green-400 w-2/3 h-2 rounded-full absolute" />
        </div>
        <div className="mt-5 flex justify-between items-center text-gray-600">
          <span>Expected</span>
          <span>Sorting center</span>
          <span>In transit</span>
          <span className="text-gray-400">Delivered</span>
        </div>
      </div>
    </main>
  );
}

Modifiers

Tailwind CSS에서 "modify" 는 특정 스타일을 조정하거나 커스터마이즈하는 것을 의미한다.

그럼 어떻게 사용하나?

여기 TODAY에 마우스를 올렸을 때(hover), scale의 변화를, bg의 변화를 줘보자

hover:bg-green-500 hover:scale-125

무슨 행동이 일어났을 때 : 이렇게 하겠다 라는 의미로 사용하면 된다.

그럼, dark 모드는 어떻게 해야할까?
1 . 기본 컴퓨터의 테마에 맞춰서 변경되도록 하는 것
2 . class로 따로 정의를 하는 방법

두가지가 있는데 지금은 1번으로 해보려고 한다.
기본 컴퓨터의 테마 설정에 맞춰 자동으로 dark 모드를 적용하려면, Tailwind의 dark 설정을 사용하면 된다.

dark:text-gray-300

dark모드를 사용하고 싶은 곳에 dark: 다크모드 일 때 적용할 속성을 적용시키면 된다.

export default function Home() {
  return (
    <main className="bg-gray-100 h-screen flex items-center justify-center p-5 dark:bg-gray-800">
      <div className="bg-white shadow-lg p-5 rounded-3xl w-full max-w-screen-sm dark:bg-gray-600">
        <div className="flex justify-between items-center">
          <div className="flex flex-col">
            <span className="text-gray-600 font-semibold -mb-1 dark:text-gray-300">
              In transit
            </span>
            <span
              className="text-4xl font-semibold
            dark:text-white"
            >
              Coolblue
            </span>
          </div>
          <div
            className="size-12 
          bg-orange-400 rounded-full"
          />
        </div>
        <div className="my-2 flex items-center gap-2">
          <span
            className="bg-green-400 uppercase px-3 py-1.5 text-xs  font-medium rounded-full cursor-pointer 
          transition text-white hover:bg-green-500 hover:scale-125"
          >
            Today
          </span>
          <span className="dark:text-gray-100">9:30 ~ 10:30</span>
        </div>
        <div className="relative">
          <div className="bg-gray-200 w-full h-2 rounded-full absolute " />
          <div className="bg-green-400 w-2/3 h-2 rounded-full absolute" />
        </div>
        <div className="mt-5 flex justify-between items-center text-gray-600 dark:text-gray-200">
          <span>Expected</span>
          <span>Sorting center</span>
          <span>In transit</span>
          <span className="text-gray-400 dark:text-gray-500">Delivered</span>
        </div>
      </div>
    </main>
  );
}

현재 내 컴퓨터는 dark모드이기 때문에,
dark모드가 적용된 것을 확인할 수 있다.

---

Tailwind를 이용해 간단한 input 박스 만들어보기

1 . input 창에 focus 되었을 때, orange 테두리 생성하기
2 . Search 버튼을 눌렀을 때, 버튼 크기 줄어들게 해보기

이 두가지를 만들어 볼 예정이다!

input창

<input
          className="bg-gray-200 rounded-full pl-5 py-2
          outline-none ring ring-transparent 
          focus:ring-orange-500 ring-offset-2 transition"
          type="text"
          placeholder="Search here ... "
        />

input 요소의 className을 보면, 처음에는 투명한 ring ( ring-transparent ) 이 있다가, 포커스가 되었을 때 주황색 ring이 생겨나도록 작성해 주었다.

ring이라는 속성은 처음 보는데, 이렇게 다양한 속성으로 outline을 설정할 수 있다는 것을 확인할 수 있다.

button

<button className="bg-black text-white py-2 rounded-full active:scale-90 
transition-transform font-medium focus:scale-90 outline-none ">
          Search
</button>

button 요소의 className을 보면, active 되었을 때, focus 되었을 때, scale-90으로 크기가 90%로 줄어들도록 작성해 주었다.

여기서 transition-transform의 속성으로 animation을 부드럽게 주었다!
정의가 딱딱 뭔지 알겠어서 그런가 css를 작성하는 속도가 점점 빨라지고 있는 것 같다는 느낌이 든다!

---

Responsive Modifiers

❓❓ Tailwind CSS는 모바일 우선이다?

맞다. Tailwind CSS는 모바일 우선 접근 방식(Mobile-First Approach) 을 채택한다.
이는 기본적으로 모든 스타일이 모바일 장치에 우선 적용되고, 이후 더 큰 화면 크기에 대해 추가적인 스타일을 적용하는 방식을 나타낸다. Tailwind CSS에서는 이러한 접근 방식을 쉽게 구현할 수 있도록 다양한 유틸리티 클래스와 반응형 디자인 지원을 제공한다.

많은 사람들이 먼저 데스크탑 디자인을 구현하고, 그 뒤에 화면을 작게 만들면서 조정하기 시작한다.
Tailwind CSS에서는 반대로 작동한다 --> Tailwind CSS에서는 모바일 디자인을 먼저 구현하고, 그 뒤에 화면을 키워간다.
--> 그렇기 때문에 모든 class들이 기본적으로 작은 화면에 적용된다.

그럼 , 화면에 크기에 따라서 배경화면이 달라질 수 있도록 속성을 추가해보면 좋을 것 같다!
(중요하게 생각해야 할 점은 -> Tailwind CSS는 모바일 장치에 우선 적용된다는 점이다)

bg-gray-100 
sm:bg-red-100
md:bg-orange-100
lg:bg-yellow-100
xl:bg-green-100
2xl:bg-cyan-100

여기서 기본 bg는 gray-100이다.

• sm ? -> 최소 너비가 640px로 설정된 미디어쿼리
  최소 너비가 640일때, 즉 너비가 640부터 커질때 bg red가 된다를 의미
• md ? -> 최소 너비가 768px로 설정된 미디어 쿼리
  최소 너비가 764px일때부터 , bg가 orange가 된다를 의미
• lg ? -> 최소 너비가 1024px로 설정된 미디어 쿼리
  최소 너비가 1024px가 되면, bg가 cyan이 된다를 의미
• xl ? -> 최소 너비가 1280px 로 설정된 미디어 쿼리
  최소 너비가 1280이 되면, 그때부터 bg가 orange가 된다를 의미
• 2xl ? -> 최소 너비가 1536px 로 설정된 미디어 쿼리
  최소 너비가 1536이 되면, 그때부터 bg가 purple이 된다를 의미

이렇게 한 곳에서 다양한 화면 사이즈에 대해서 반응할 수 있게 된다
--> 한 줄의 미디어쿼리도 작성할 필요가 없어진다!

이렇게 VSC에서 media 속성에 관해서 찾아볼 수 있다.

그럼, 여기서 화면이 최소 768px가 되었을 때, button이 input 으로 이동하면 어떨까?

화면의 크기가 767일 때에는 그대로 인 상태 (flex-col인 상태)

여기서, 크기가 768이 되면 ?
이렇게 버튼이 input 옆으로 이동하게 된다 (flex-row)

div -> md 일 때 flex-row로 변경하고, button -> md일 때, x축으로 padding 속성 5(1.25rem) 이 되도록 적용해 주었다.

확실히 반응형 유틸리티를 만들기에 간편한 것 같다는 생각이 든다!

---

Form Modifiers

gradient는 어떻게 사용할 까?

버튼의 배경화면 색상을 gradient로 지정해주려고 한다! bg-gradient-to-tr 은 top right로 왼쪽 아래에서 오른쪽 위(즉, bottom left to top right)로의 그라데이션 방향을 설정합으로 시작한다는 의미를 나타낸다.

from과 to로 각각의 색상을 지정해 주어야 하는데, from-cyan-500으로 시작해서 via-yellow중간을 거쳐서 to-purple-400으로 끝난다. 라고 쉽게 이해하면 될 것 같다.

왼쪽 바닥부터 중간 노랭이를 거쳐서 오른쪽 위 보라색으로 끝난 것을 확인할 수 있다.

invalid

내가 입력한 값이 유효하지 않다면 (브라우저가 유효하지 않다고 판단하는 입력값에 대해 작동), invalid: 뒤에 나타나는 css 속성을 적용시켜라~ 를 의미한다.

어떻게 사용하나?

만약, input의 type이 email이고, required(필수로 입력해야 하는 값)일 때,
input에 유효하지 않는 값이 들어올 때, ring의 색깔을 red로 변경해보자!

invalid:focus:ring-red-500 속성을 적용해 주었다.

이메일 형식이 아닐 경우(유효성 검사에 실패!)에는 ring의 색상이 red가 되고, 이메일 형식으로 유효성 검사에 통과된다면, 이렇게 초록색 ring이 나타나게 된다.

peer

peer 클래스는 자매 요소나 부모 요소의 상태에 따라 스타일을 적용할 수 있게 해주는 강력한 기능을 제공한다.
주로 양식(form) 구성 요소에서 사용할 때 유용하다.
peer와 함께 사용하는 peer-* 변형 클래스는 특정 입력이나 선택 요소의 상태에 따라 다른 요소의 스타일을 변경하는 데 사용된다.

peer 클래스는 input 요소에 적용되어 있다. 이 peer 클래스를 사용하면 해당 input 요소의 상태(유효하지 않은 입력 상태)에 따라 형제 요소(button 요소)의 스타일을 동적으로 변경할 수 있게 된다(bg-red-500으로 변경하게 된다).

로그인 화면에서는 어떻게 사용될까?
이러한 Login 화면이 있다고 가정해보자

"Email is required"라는 문구를 이메일을 입력하지 않거나, 잘못 입력했을 때, (유효성 검사에 실패했을 때) 나타나도록 하고 싶다

어떻게 하면 될까?

peer 클래스:

• input 요소에 peer 클래스를 적용
  --> 이 클래스는 이 요소가 "피어" (동료) 요소의 상태를 참조할 수 있게 해준다.
• peer 클래스를 사용하여 다른 형제 요소들이 이 input 요소의 상태(유효성, 체크 여부 등)를 기반으로 스타일을 변경할 수 있게된다.

peer-invalid 변형 클래스:
span 요소: hidden peer-invalid:block

• hidden: 기본적으로 span 요소는 숨겨져 있다.
• peer-invalid:block : input 요소가 유효하지 않을 때(예를 들어, 이메일 형식이 아니거나 입력이 비어 있을 때) span 요소를 block으로 표시한다.
  --> 즉, input 요소가 유효하지 않으면 span 요소가 보이게 된다.

button 요소: peer-invalid:bg-red-500

• peer-invalid:bg-red-500 : input 요소가 유효하지 않은 상태일 때 버튼의 배경색을 빨간색으로 변경한다.

이처럼 input이 유효하지 않을 때, 나타나는 것을 확인할 수 있다!