Post

TailwindCSS (10) - 테일윈드, 이런 것도 있다.

Posted Updated
By saemii 5 min read

📌 시작하며

벌써 tailwind 관련 글이 10번째라니! 엄청 많이 작성한 것 같은데 여전히 관련 글이 나오는걸 보면 css 양 자체가 많긴 많은 것 같다…😇 어쨌든 배운 만큼 써먹는 법이니, 새로 알게된 내용도 정리해보도록 하자.

💁‍♀️ scroll-snap-type

이 속성은 스크롤할 때 특정 지점에서 딱 맞게 멈추게 해주는 속성이다. 예를들어 카드 리스트를 스크롤 할때, 이 카드 내용이 헤더에 snap 되며 딱 멈추길 바랄 때 활용할 수 있다.

1
2
3
4
5

<div className="flex overflow-x-auto snap-x snap-mandatory">
  <div className="snap-start shrink-0 w-64 h-40 bg-blue-200">Item 1</div>
  <div className="snap-start shrink-0 w-64 h-40 bg-pink-200">Item 2</div>
  <div className="snap-start shrink-0 w-64 h-40 bg-green-200">Item 3</div>
</div>

부모 div 먼저 살펴보면, snap-x와 snap-mandatory 가 있다. 이 때 snap-x는 x축 기준으로 스냅된다는 의미이며, snap-mandatory는 스냅 위치에 반드시 맞춰서 멈춰야 한다는 뜻이다.

그다음에 snap이 되도록 움직일 카드 div를 살펴보면 snap-start는 각 아이템의 시작 지점에 스냅된다는 뜻이다.

즉, 부모 컴포넌트에서는 scroll-snap-type 관련 속성(snap-x, snap-y, snap-mandatory 등)을 지정해 스냅 동작의 방향과 강도를 정의하고, 자식 컴포넌트에서는 scroll-snap-align 관련 속성(snap-start, snap-center, snap-end)을 지정해 스냅될 위치를 설정하면 된다.

📜 overscroll behavior

이 속성은 스크롤이 중첩된 영역에서 스크롤 전파를 제어할 때 유용하다.

예를 들어, 페이지 전체에 스크롤이 있고(부모 A), 그 안에 또 다른 스크롤 가능한 컨테이너(자식 B)가 있다고 해보자.

보통 자식 B를 끝까지 스크롤하면, 그 다음 스크롤 이벤트는 부모 A로 전달되어 페이지 전체가 움직이게 된다. 하지만 overscroll-behavior를 사용하면 이런 동작을 제어할 수 있다.

1
2
3
4
5

<div className="overscroll-none h-screen overflow-y-scroll">
  <div className="h-[200vh] bg-gradient-to-b from-gray-100 to-gray-300">
    overscroll-behavior: none
  </div>
</div>

지정해줄 수 있는 속성은 다음과 같다.

속성 값설명
auto기본값. 스크롤 이벤트가 부모 요소로 전파됨.
contain스크롤이 부모로 전파되지 않음. 자식 스크롤만 작동.
none부모로 전파되지 않을 뿐만 아니라, 스크롤 “튐” 효과(바운스, 리프레시 등)도 방지.

모달이나 반응형 작업을 할 때 contain, none은 자주 사용할 듯 하니 잘 알아두자.⭐

🎨 grid에 min-max 값 지정하기

최근 작업하는 내용이 대부분 테이블 형태이고, 반응형 작업까지 포함되다 보니 자연스럽게 CSS Grid를 자주 사용하고 있다. 이때 각 column의 최대 길이를 적절히 지정하고 싶은데, 각 화면 사이즈에 따라 길이를 다르게 지정해야 하는 경우가 많다.🤔

이럴 때 minmax()를 활용하면 반응형 레이아웃에서 각 column을 유연한 범위로 조정할 수 있다.

minmax()는 이름 그대로 min이상, max이하의 크기 범위를 설정할 때 사용하며, 주로 CSS Grid와 함께 사용된다.

CSS에서 사용하는 기본 예시는 아래와 같다.

grid-template-columns: minmax(20px, auto) 1fr 1fr;

만약 Tailwind로 작성한다면 아래처럼 설정할 수 있다.

1

grid-cols-[minmax(20px,_auto)_1fr_1fr]

이를 적절히 활용하면 각 화면에서 보기 편한 table을 만들 수 있다! 👍

TailwindCSS
Next.js TailwindCSS
This post is licensed under CC BY 4.0 by the author.