테일 윈드 정리

• max-w-sm
  
  Tailwind CSS는 다양한 화면 크기에 대응하는 반응형 CSS 유틸리티 클래스를 제공합니다. 일부 클래스는 아래와 같습니다.
• sm: 640 픽셀 이상의 작은 화면 (스마트폰 가로모드)
• md: 768 픽셀 이상의 중간 화면 (태블릿 가로모드)
• lg: 1024 픽셀 이상의 큰 화면 (노트북, 데스크탑)
• xl: 1280 픽셀 이상의 매우 큰 화면 (큰 모니터)
• 2xl: 1536 픽셀 이상의 매우 매우 큰 화면

이러한 반응형 CSS 유틸리티 클래스를 사용하면, 화면 크기에 따라 레이아웃이 자동으로 조정되어 모바일에서부터 데스크탑까지 다양한 디바이스에서 좀 더 일관성있는 UI를 구현할 수 있습니다. 예를 들어, lg:max-w-xl과 같은 클래스를 사용하면, 노트북 크기 이상의 화면에서만 최대 너비가 xl로 제한되는 UI를 구현할 수 있습니다.

 

---

 

• mx-auto 클래스는 마찬가지로 Tailwind CSS에서 제공하는 CSS 유틸리티 클래스 중 하나로, 수평 가운데 정렬을 위한 margin-left과 margin-right 속성을 자동으로 계산하여 적용하는 스타일을 적용합니다.

 

The background color, border radius, and box-shadow utilities (bg-white, rounded-xl, and shadow-lg) to style the card’s appearance

The font size, text color, and font-weight utilities (text-xl, text-black, font-medium, etc.) to style the card text

---

 

 

py-8와 px-8는 Tailwind CSS에서 제공하는 CSS 유틸리티 클래스 중 하나로, 요소의 padding-top과 padding-bottom 또는 padding-left와 padding-right 속성을 각각 8픽셀로 설정합니다.

p{xy}-{n} 형태의 클래스는 n에 숫자를 대입하여, 요소의 padding-top과 padding-bottom 또는 padding-left와 padding-right 속성을 지정할 수 있습니다. 예를 들어, py-4는 요소의 padding-top과 padding-bottom 속성을 4픽셀로 설정하며, px-8은 요소의 padding-left와 padding-right 속성을 각각 8픽셀로 설정합니다.

따라서, 위의 코드에서 py-8와 px-8 클래스가 적용된 <div> 요소는 상하좌우에 8픽셀의 패딩이 설정되어 있습니다. 이를 통해, 요소 내부의 내용물이 너무 가깝게 위치하지 않고, 일정한 간격을 두고 배치되는 UI를 구현할 수 있습니다.

 

---

 

{breakpoint}:{property}-{value} 형태의 클래스는 특정 브레이크포인트에서만 적용될 스타일을 지정할 수 있는 반응형 클래스입니다. 예를 들어, sm:py-4는 브레이크포인트가 sm일 때 (즉, 화면 너비가 640px 이상일 때)만 padding-top과 padding-bottom 속성을 4픽셀로 설정합니다.

 

---

 

Pseudo-classes(가상 클래스)는 HTML 요소가 특정 상태일 때 스타일을 적용하기 위해 사용되는 CSS 선택자입니다.

일반적으로 HTML 요소는 사용자 동작에 의해 다양한 상태를 가질 수 있습니다. 예를 들어, :hover 가상 클래스는 마우스 커서가 요소 위에 올라갔을 때 적용됩니다. :focus 가상 클래스는 요소가 포커스를 받았을 때 적용됩니다. :active 가상 클래스는 요소가 활성화되었을 때 적용됩니다.

Tailwind CSS에서는 다양한 Pseudo-classes를 지원합니다. 예를 들어, hover: 접두사를 사용하여 요소가 마우스 커서 위에 있을 때 스타일을 적용할 수 있습니다. focus: 접두사를 사용하여 요소가 포커스를 받았을 때 스타일을 적용할 수 있습니다. active: 접두사를 사용하여 요소가 활성화되었을 때 스타일을 적용할 수 있습니다.

아래는 Tailwind CSS에서 제공하는 몇 가지 Pseudo-classes 예시입니다.

 

      <button class="bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50">
            {" "}
            Click me!{" "}
      </button>{" "}
      <a href="#" class="text-red-500 hover:text-red-700">
        Go to the link
      </a>{" "}
      <input
        type="checkbox"
        class="h-6 w-6 text-indigo-600 focus:ring-indigo-500"
      ></input>

 

위의 코드에서 hover:bg-blue-700는 마우스 커서가 요소 위에 올라갔을 때 요소의 배경색을 bg-blue-700으로 변경합니다. focus:outline-none은 요소가 포커스를 받았을 때 기본적으로 표시되는 아웃라인을 제거합니다. focus:ring-2와 focus:ring-blue-600은 요소가 포커스를 받았을 때 테두리 색상과 두께를 설정합니다. hover:text-red-700는 마우스 커서가 링크 위에 있을 때 링크의 텍스트 색상을 text-red-700으로 변경합니다. focus:ring-indigo-500는 체크박스가 포커스를 받았을 때 테두리 색상을 indigo-500으로 변경합니다.

 

---

 

leading-tight은 텍스트 요소의 라인 높이를 최소화하여 더 작은 간격으로 텍스트를 배치하는 테일윈드 클래스입니다. 이 클래스를 사용하면 텍스트 요소의 라인 높이를 작게 만들어 줄 수 있습니다.

텍스트 요소에 leading-tight 클래스를 적용하면, 해당 요소의 라인 높이가 줄어들어 텍스트 간의 간격이 줄어들게 됩니다. 이는 일반적으로 글꼴 크기가 큰 제목 요소를 작은 공간에 배치할 때 유용합니다.

예를 들어, 다음과 같은 코드가 있다고 가정해보겠습니다.

<h1 class="text-4xl font-bold leading-normal">Lorem ipsum dolor sit amet</h1>

이 코드는 h1 요소에 4em의 글꼴 크기와 기본 라인 높이를 적용합니다. 이 경우, leading-normal 클래스를 사용하면 라인 높이가 일반적인 높이로 유지됩니다. 그러나, leading-tight 클래스를 사용하면 라인 높이가 최소화되어 더 작은 공간에 텍스트를 배치할 수 있습니다.

<h1 class="text-4xl font-bold leading-tight">Lorem ipsum dolor sit amet</h1>

위 코드에서는 leading-tight 클래스가 적용되어 있으므로, 텍스트 간의 간격이 줄어들어 더 작은 공간에 텍스트를 배치할 수 있게 됩니다.

테일윈드에서는 다양한 라인 높이 값을 설정할 수 있는 클래스를 제공합니다. leading- 접두어를 사용하여 다음과 같은 값을 적용할 수 있습니다.

• leading-none: 라인 높이를 1로 설정합니다.
• leading-tight: 라인 높이를 최소화하여 텍스트 간격을 줄입니다.
• leading-snug: 라인 높이를 조금 더 작게 설정하여 텍스트 간격을 약간 줄입니다.
• leading-normal: 기본 라인 높이 값을 사용합니다.
• leading-relaxed: 라인 높이를 기본값보다 조금 더 크게 설정하여 텍스트 간격을 조금 늘립니다.
• leading-loose: 라인 높이를 크게 설정하여 텍스트 간격을 크게 늘립니다.

예를 들어, leading-snug 클래스를 사용하면 leading-tight보다는 라인 높이가 조금 더 큽니다. 이를 통해 텍스트 간격을 약간 줄이면서도 읽기 쉬운 텍스트를 만들 수 있습니다.