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

짜스의 하루 ·2024년 7월 31일

`*`

* -> *를 작성한 컨테이너의 모든 자식 객체에 적용되게 된다.
--> 직계 하위 항목을 선택한다는 뜻

input과 button에 outline-none이라는 속성이 동시에 들어가있기 때문에, 중복을 주고 싶지 않아서 이들을 감싸고 있는 div 태그에 *:outline-none 를 적용하게 되면 div 컨테이너 안에 있는 모든 자식들에게 outline-none 속성을 적용하겠다. 라는 말을 의미한다.

div안에 있는 input, span, button 모두 outline-none을 적용하게 된다.

has

has(가상클래스) -> 해당 컨테이너에서 특정 조건을 만족하는 자식을 확인할 수 있다.

has-[]: 가상 클래스는 부모 요소가 특정 자식 요소를 포함하고 있는지 여부를 확인할 수 있게 해주며, 이를 통해 해당 부모 요소에 스타일을 적용할 수 있다.

has는 컨테이너에서 특정 class가 존재하는 유무를 확인할 수 있기 때문
--> class 뿐만 아니라 invalid와 같은 상태(state)까지도 확인할 수 있다.

만약, 이 컨테이너에 invalid의 상태가 존재한다면, (유효성 검사에 통과하지 못하면)
ring-red-200 를 적용하겠다

--> has-[:invalid]:ring-red-200

odd, even

odd와 even 변형 클래스는 반복되는 요소들에 대해 홀수와 짝수 인덱스에 각각 다른 스타일을 적용할 수 있게 해준다.
--> 이를 통해 리스트나 테이블 같은 반복적인 구조에서 홀수 항목과 짝수 항목에 서로 다른 배경색을 줄 수 있다.

이러한 간단한 List가 있는데, 여기서 짝수와 홀수에 따라서 배경화면의 색상을 다르게 주고 싶다
그럼 어떻게 해야할 까?

odd:bg-gray-100 : 홀수일 때 -> bg색상을 gray-100으로 주겠다
even:bg-cyan-100 : 짝수일 때 -> bg색상을 cyan-100으로 주겠다 를 의미한다.

first, last

list의 모든 item들이 border bottom을 가지길 원한다고 가정해보자
--> 단 , 마지막 (last)를 제외하고
이렇게 YourSelf만 border-bottom이 없길 기대하는 것이다.

이처럼 모든 list에 border-b-2의 속성과, pb-5 라는 속성을 주었다.
그리고 last:pb-0, last:border-b-0 속성을 주면서 last의 요소의 padding bottom을 0으로, last 요소의 border bottom을 0으로 변경해 주었다.

이로써 last요소를 제외한 나머지 요소에 border-bottom 속성이 적용되었다.

animate

css에서 제공하는 animate 속성이 spin, ping, pulse, bounce 4가지 종류가 있다.

animate-spin : 요소를 계속해서 회전시키는 애니메이션
사용 예시: 로딩 스피너 등에서 많이 사용된다.
animate-ping : 요소가 점점 커지면서 투명해지는 애니메이션으로, 반복적으로 발생한다.
사용 예시: 주로 알림 아이콘이나 새로운 메시지를 나타낼 때 사용된다.
animate-pulse : 요소가 주기적으로 투명해졌다가 다시 불투명해지는 애니메이션이다.
사용 예시: 주목할만한 버튼이나 알림 등에 사용된다.
animate-bounce : 요소가 튀는 애니메이션
사용 예시: 버튼이나 클릭 가능한 요소에 사용되어 사용자의 주의를 끌기 위해 사용된다.

index가 적힌 원을 앞에 두고, 같은 크기와 색깔을 가진 또 다른 원을 뒤에 두어 animate-ping 요소를 적용하는 방식으로 효과를 주는 방법을 사용해 보았다.

이렇게 하면 index가 적힌 원 자체에 직접적인 애니메이션 효과를 적용하지 않으면서도, 마치 index가 적힌 원에 애니메이션 효과가 있는 것처럼 보이게 할 수 있다.

empty:

empty 변형 클래스를 사용하면 비어 있는 상태인 요소에 특정 CSS 스타일을 적용할 수 있다.
empty: 변형 클래스는 요소가 자식 요소를 가지고 있지 않은 경우에만 스타일을 적용하는 데 유용하다.

empty:w-24 empty:h-5 empty:animate-pulse empty:bg-gray-300 empty:rounded-full

empty: 변형 클래스는 요소가 자식 요소를 가지고 있지 않은 경우에만 적용된다.
마지막 리스트 항목은 비어 있기 때문에 empty:w-24, empty:h-5, empty:animate-pulse, empty:bg-gray-300, empty:rounded-full 스타일이 적용된다.
결과적으로, 이 항목은 너비와 높이가 설정된 회색 원형으로 표시되고 pulse 애니메이션 효과가 적용된다.

group

group 및 group- 변형 클래스는 부모 요소의 상태에 따라 자식 요소의 스타일을 변경하는 데 사용된다. 이를 통해 부모 요소에 특정 상태가 있을 때 자식 요소에 스타일을 적용할 수 있다.

부모 컨테이너에 group 클래스를 사용하여, 자식 요소들이 부모의 상태에 따라 스타일이 변경되도록 설정
--> 부모 컨테이너 div에 group 클래스를 추가하고, span 요소에서 group-hover 변형 클래스를 사용하여 부모 요소에 마우스가 호버될 때 텍스트 색상이 빨간색으로 변경되도록 설정

group-focus-within :

group-focus-within: 어떤 자식이건 포커스가 되었는지 확인하도록 해준다.
--> group container의 어떤 자식이건 input이 포커스가 되어있으면, 어떤 행동을 할 수 있게 해준다.

pseudo class는 group이 내부에 focus된 input을 가지고 있을 때에만 true가 된다. (input 뿐만 아니라 anchor이나 button처럼 focus 할 수 있는 것들도 가능하다. )

이렇게 "Make sure it is a valid email" 문구를 보여주려고 한다.

export default function Home() {
  return (
    <main className="bg-gray-100 sm:bg-red-100 md:bg-green-100 lg:bg-cyan-100 xl:bg-orange-100 2xl:bg-purple-100 h-screen flex items-center justify-center p-5">
      <div className="bg-white shadow-lg p-5 rounded-3xl w-full max-w-screen-sm flex flex-col gap-3">
        <div className="flex justify-center flex-col group">
          <input
            type="email"
            className="bg-gray-100 w-full h-7"
            placeholder="Write your email"
          />
          <span className="group-focus-within:block hidden">
            Make sure it is a valid email ...
          </span>
          <button type="submit">Submit</button>
        </div>
      </div>
    </main>
  );
}

input 요소에 포커스를 주면, 부모 div 요소는 focus-within 상태가 되어 group-focus-within 클래스가 적용된다.
이 상태에서 span 요소는 group-focus-within:block 클래스로 인해 hidden 상태에서 block 상태로 변경되며, 메시지가 화면에 표시된다.
포커스가 없으면 span 요소는 hidden 상태로 유지된다.

group 클래스는 부모 요소에 설정된 상태(:focus-within 등)를 감지하고, 이를 자식 요소에 스타일로 반영할 수 있도록 한다.

Just-in-Time Mode

Just-in-Time (JIT) Mode는 Tailwind CSS의 기능 중 하나로,
CSS 클래스가 실제로 필요한 경우에만 컴파일하는 방식이다.

JIT 모드는 Tailwind CSS의 빌드 프로세스를 최적화하여, 필요한 CSS만 생성하고 불필요한 CSS는 생성하지 않도록 한다. 이를 통해 파일 크기를 줄이고, 개발 및 빌드 시간을 단축시킬 수 있다.

JIT 모드의 주요 특징

실시간 생성: JIT 모드는 Tailwind CSS의 구성 파일(tailwind.config.js) 과 HTML, JavaScript, JSX 파일에서 사용된 클래스 이름을 실시간으로 추적합니다. 클래스 이름이 발견되면 해당 스타일이 즉시 생성된다.
경량화된 CSS: 실제로 사용되는 클래스만 포함되기 때문에, 최종 CSS 파일의 크기가 줄어들게 된다. 이는 불필요한 CSS가 포함되지 않으므로 페이지 로딩 시간이 단축되고, 성능이 향상된다.
동적 클래스 지원: JIT 모드는 동적으로 생성되는 클래스 이름을 처리할 수 있다.
예를 들어, w-[calc(100%-2rem)]와 같은 동적 값이나, 템플릿 문자열을 사용하는 경우에도 스타일을 생성할 수 있다.
빠른 빌드: JIT 모드는 실시간으로 스타일을 생성하므로, 개발 중에 CSS를 변경하면 즉시 결과를 볼 수 있다. 이는 개발 속도를 향상시키고, 수정 후 즉시 피드백을 받을 수 있게 한다.

사용 방법
Tailwind CSS의 JIT 모드를 활성화하려면, Tailwind CSS의 구성 파일
(tailwind.config.js) 에서 JIT 모드를 설정하거나, 최신 버전에서는 기본적으로 활성화되어 있다.

이와 같이 Tailwind CSS의 최신 버전에서는 JIT 모드가 기본으로 활성화되어 있으므로, 별도로 JIT 모드를 명시적으로 설정하지 않아도 된다.

Tailwind CSS의 theme 속성을 사용하여 사용자 정의 속성을 추가할 수 있다.
이를 통해 theme 객체 내에 정의한 색상을 Tailwind CSS 클래스에서 사용할 수 있다.

theme: {} 객체 내에서 extend를 사용하여 기존 Tailwind CSS 테마를 확장할 수 있다.

요렇게 사용할 수 있다!

globals.css

globals.css에 정의되어있는 세가지 특성에 대해서 알아보려고 한다.

@tailwind base

이 레이어는 Tailwind의 기본 스타일을 설정한다.
여기에는 브라우저 기본 스타일을 재설정(reset)하고, 타이포그래피와 같은 HTML 요소의 기본 스타일을 정의하는 것이 포함된다.

@layer base {
  a {
    @apply text-blue-500;
  }
}

@layer base는 모든 <a> 태그에 text-blue-500 유틸리티 클래스를 적용하여, 링크 텍스트를 파란색으로 설정한다.
이 스타일은 Tailwind CSS의 기본 스타일로 정의되므로, 다른 레이어에서 이 스타일을 쉽게 오버라이드할 수 있다.

@tailwind components

이 레이어는 재사용 가능한 컴포넌트 스타일을 정의한다.
이는 Tailwind에서 제공하는 컴포넌트와 사용자가 정의한 커스텀 컴포넌트를 포함한다.

@layer components {
  .btn {
    @apply w-full bg-black h-10 text-white rounded-sexy-name mt-tomato;
  }
}

@layer components 는 Tailwind CSS에서 재사용 가능한 컴포넌트 스타일을 정의하는 데 사용된다.
@apply 지시어를 사용해 여러 유틸리티 클래스를 결합하여 하나의 CSS 클래스로 만들 수 있다.

@tailwind utilities

Tailwind의 유틸리티 클래스를 로드한다.
유틸리티 클래스는 작은 단위의 스타일을 적용하는 클래스로, Tailwind의 핵심 기능
모든 utility class name들을 여기에 넣을거임
--> 컴파일러가 생성된 모든 CSS code 를 넣는다고 생각하면된다.

@layer utilities {
  .text-bigger-hello {
    @apply font-semibold;
  }
}

@layer utilities 를 사용하면 유틸리티 레이어에 새로운 유틸리티 클래스를 추가할 수 있다.
@apply 지시어를 사용하여 기존 Tailwind 유틸리티 클래스를 커스텀 유틸리티 클래스에 적용할 수 있다.
이 방법을 통해 Tailwind CSS의 기능을 확장하고, 프로젝트에 맞게 커스터마이징할 수 있다.

여기서 유틸리티 class란?
Tailwind CSS에서 제공하는 기본적인 CSS 클래스를 의미
우리가 사용하는 기본적인 모든 css class를 나타낸다고 생각하면 된다.

@apply는 무엇일까?

Tailwind CSS에서 유틸리티 클래스를 재사용 가능하게 하고, 일반 CSS 클래스처럼 작성할 수 있게 해준다.

@apply 지시어는 Tailwind CSS에서 유틸리티 클래스를 재사용 가능하게 하고, 반복되는 스타일을 줄여 코드를 간결하게 만드는 도구이다.
이를 통해 스타일을 쉽게 관리하고 유지할 수 있다. @apply는 특히 복잡한 컴포넌트 스타일을 만들 때 유용하다.

쉽게 설명하면, @apply를 사용하면 여러 Tailwind 유틸리티 클래스를 하나의 클래스로 묶어서 재사용할 수 있다.