Tailwind CSS에서 z-index 활용하기

1. z-Index란 무엇인가?

CSS에서 z-index 속성은 겹치는 요소들의 수직 스택 순서를 제어합니다. 높은 z-index 값을 가진 요소는 낮은 값을 가진 요소 위에 위치합니다. 스택 컨텍스트가 어떻게 형성되는지를 이해하는 것은 z-index를 효과적으로 사용하는 데 필수적입니다.

 

2. Tailwind CSS에서의 z-Index 작동 방식

Tailwind CSS는 유틸리티 클래스를 사용하여 z-index 사용을 간단하게 만듭니다. 커스텀 CSS를 작성하는 대신 z-0, z-10, z-20 등의 미리 정의된 클래스를 HTML에 직접 적용할 수 있습니다. 다음은 간단한 예입니다.

 

<div class="relative z-10">...</div>
<div class="relative z-20">...</div>
<div class="relative z-30">...</div>

 

3. 흔한 실수

Position 속성 누락

z-index 속성은 위치가 지정된 요소(position: relative, absolute, fixed, 또는 sticky)에서만 작동합니다. 이를 잊으면 z-index 값이 적용되지 않는 것처럼 보일 수 있습니다.

 

<!-- 잘못된 예 -->
<div class="z-10">...</div>

<!-- 올바른 예 -->
<div class="relative z-10">...</div>

 

4. z-Index 관리

쉽게 말해서 값을 막 입력하지 말고, 규칙을 만들어 사용하라는 얘기입니다. 극단적인 예시로 z-58, z-182 의미 없는 값을 입력해 z-index값을 혼란스럽게 만들지 말라는 뜻입니다.

1. Tailwind의 스케일 사용: Tailwind의 미리 정의된 스케일(z-0에서 z-50)을 사용하는 것이 좋습니다. 이는 코드베이스를 일관성 있게 유지하고 관리하기 쉽게 만듭니다.

2. 레이어링 전략: 프로젝트에 명확한 레이어링 전략을 정의하세요. 예를 들어, 모달이나 툴팁과 같은 중요한 UI 요소를 위해 높은 z-index 값을 예약합니다.

3. 임의의 값 피하기: 임의의 z-index 값 대신 논리적인 스케일을 사용하세요. 이는 예측 가능한 스택 순서를 유지하는 데 도움이 됩니다.

 

5. 실제 사례

예제 1: 콘텐츠 위에 모달

<div class="relative z-10">메인 콘텐츠</div>
<div class="fixed inset-0 bg-gray-800 bg-opacity-75 z-50">모달 오버레이</div>

 

예제 2: 툴팁과 드롭다운

<button class="relative z-20">툴팁이 있는 버튼</button>
<div class="absolute z-30">툴팁</div>