KUKJIN LEE
Posted 1 week ago
Tailwind CSS Position 속성 가이드
Tailwind CSS Position 유틸리티 클래스 종류
Tailwind CSS에서는 HTML 요소에 위치 지정 속성을 쉽게 적용할 수 있도록 다음과 같은 position
유틸리티 클래스를 제공합니다.
- static: 요소를 문서의 일반적인 흐름에 따라 배치합니다. 기본적으로 모든 요소는 `static`위치를 사용합니다.
- relative: 요소를 일반적인 위치에서 상대적으로 배치합니다. `top`, `right`, `bottom`, `left` 사용하여 이동시킬 수 있습니다.
- absolute: 가장 가까운 조상 요소 중 `relative`, `absolute`, `fixed`, `sticky` 위치를 가진 요소를 기준으로 요소를 배치합니다.
- fixed: 요소를 브라우저 창을 기준으로 고정하여 배치합니다. 스크롤을 해도 위치가 고정되어 변경되지 않습니다.
- sticky: 요소가 일반적인 흐름에 따라 배치되다가 스크롤할 때 특정 위치에 고정되도록 합니다. 보통 스크롤 위치에서 고정되는 헤더 등에 사용됩니다.
Tailwind Position 클래스 사용 예시
1. 고정된 푸터 만들기
<footer className="fixed bottom-0 w-full bg-gray-800 text-white p-4">
고정된 푸터입니다.
</footer>
fixed
를 사용하여 푸터를 페이지의 하단에 고정합니다.2. 특정 위치에 배너 고정하기
<div className="absolute top-4 right-4 bg-blue-500 text-white p-2">
중요한 알림 배너
</div>
absolute
를 사용하여 페이지의 오른쪽 위에 배너를 고정합니다. top-4
와 right-4
클래스는 요소를 상단에서 1rem, 오른쪽에서 1rem 떨어지도록 설정합니다.
3. 스크롤에 따라 고정되는 헤더 만들기
<header class="sticky top-0 bg-white shadow-md p-4">
스크롤 시 고정되는 헤더입니다.
</header>
sticky
를 사용하여 사용자가 스크롤할 때 헤더가 화면의 상단에 고정되도록 합니다.