Tailwind - Layout(Container, Flexbox, Grid, Position)

 

Tailwind - Layout(Container, Flexbox, Grid, Position)

#Web/CSS

Container

container 클래스는 웹 레이아웃에서 콘텐츠 영역을 깔끔하게 정리하고 중앙에 배치하는 데 주로 사용된다. 보통 본문이나 주요 섹션을 지정된 너비 안에 고정시켜 직관적인 레이아웃을 제공하는데 사용된다.

주요 역할

• 컨테이너는 웹 페이지에서 콘텐츠가 화면 크기에 맞춰 잘 정리되도록 도와준다.
  • ex) 콘텐츠의 가로 길이를 적당하게 제한
  • 모바일 환경, 큰 모니터 환경, …

<div class="container mx-auto">
  <h1 class="text-3xl font-bold">웹 페이지 타이틀</h1>
  <p>이 영역은 컨테이너 안에서 중앙에 배치되며, 화면 크기에 맞춰 최대 너비가 조절됩니다.</p>
</div>

• mx-auto 유틸리티는 컨테이너를 가로로 가운데 정렬한다.

컨테이너 속성 값

가로 패딩 추가

px-* 유틸리티

<div class="container mx-auto px-4">
  <!-- 콘텐츠 -->
</div>

컨테이너 기본 설정 커스터마이징 해보기

<script>
  tailwind.config = {
    theme: {
      container: {
        center: true,
        padding: '2rem',  // 가로 패딩 2rem 추가
      },
    },
  };
</script>

Flexbox

Flexbox는 수평 및 수직 정렬을 위한 CSS 레이아웃 모델. element 들을 row로 배치되게 하는데 유용하다

주요 Flexbox 유틸리티 클래스

• flex: Flexbox 컨테이너를 활성화합니다.
• justify-start, justify-center, justify-end: 아이템을 수평으로 정렬.
• items-start, items-center, items-end: 아이템을 수직으로 정렬.
• gap-x-N, gap-y-N: Flexbox 아이템 간의 간격 조절.

Grid 시스템

Grid는 복잡한 2차원 레이아웃을 구성하기에 적합한 CSS 레이아웃 시스템이다.

주요 Grid 유틸리티 클래스

• grid: Grid 레이아웃을 활성화합니다.
• grid-cols-N: Grid 컨테이너에 N개의 열을 지정합니다.
• gap-x-N, gap-y-N: Grid 아이템 간의 수평 및 수직 간격을 설정합니다.

Position

fixed

요소를 뷰포트에 고정하여, 스크롤 시에도 해당 요소가 고정된 위치에 머무르도록 한다.

예시

<header class="fixed left-0 right-0 bg-gray-800 text-white p-4 z-50">

뷰포트 왼쪽 끝부터 오른쪽끝까지 고정된 위치에 머무른다.

sticky

스크롤할 때 요소가 지정된 위치에 도달하면 고정되며, 그 이후에는 부모 요소의 끝에 도달할 때까지 고정된 상태를 유지한다.

예시) 화면 우측의 장바구니를 유지시키기

<aside class="w-2/5"> 
	<div class="sticky top-16 p-6 border-2 border-gray-800 rounded-lg"> 
		<h2 class="text-xl font-bold mb-4">장바구니</h2>

Reference)
Tailwind CSS 공식 문서
짐코딩님 Tailwind CSS 완전 정복