QnAi로깅

Tailwind CSS에서 container는 레이아웃 요소를 감싸고, flex 및 grid를 사용할 때 기본값을 설정합니다.

container 클래스는 요소의 최대 너비를 제한하고 중앙에 배치합니다. 이는 일반적으로 웹 사이트의 디자인에서 가장 일반적인 레이아웃 패턴 중 하나입니다.

Flex 및 Grid 클래스는 레이아웃을 작성하기 위한 가장 강력한 도구 중 일부입니다. flex 클래스는 요소를 수평 또는 수직 축을 따라 정렬하고 배치하며, grid 클래스는 그리드 레이아웃을 만듭니다.

Container, Flex 및 Grid 클래스를 함께 사용하여 레이아웃 요소를 만들 수 있습니다. 예를 들어, 다음과 같이 container 클래스를 사용하여 전체 페이지를 감싸고, 내부에서 grid 클래스를 사용하여 3열 레이아웃을 만들고, 각 셀에 flex 클래스를 사용하여 내부 콘텐츠를 배치할 수 있습니다.

htmlCopy code
<div class="container mx-auto">
  <div class="grid grid-cols-3 gap-4">
    <div class="flex flex-col items-center justify-center bg-gray-100 h-32">
      <h2>Column 1</h2>
      <p>Some text here</p>
    </div>
    <div class="flex flex-col items-center justify-center bg-gray-200 h-32">
      <h2>Column 2</h2>
      <p>Some text here</p>
    </div>
    <div class="flex flex-col items-center justify-center bg-gray-300 h-32">
      <h2>Column 3</h2>
      <p>Some text here</p>
    </div>
  </div>
</div>

이를 통해 전체 페이지를 가로로 3등분하고, 각 열에 flex 클래스를 사용하여 수직 중앙 정렬 및 간격 조정을 수행할 수 있습니다.