Tailwind CSS container 적용하기

✅ 적용 목적

container를 사용하면 컨텐츠의 최대 너비를 제한할 수 있다. 즉 사용자가 사용하는 모니터의 크기와 상관없이 컨텐츠의 최대 너비가 제한되어 있어 예쁜 크기를 유지할 수 있으므로 사용하기로 했다. 

 

✅ Container란?

 

tailwind 공식 홈페이지에는 다음과 같이 container의 사용법을 나타내고 있다.

Using the container

The container class sets the max-width of an element to match the min-width of the current breakpoint. This is useful if you’d prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport.

Note that unlike containers you might have used in other frameworks, Tailwind’s container does not center itself automatically and does not have any built-in horizontal padding.

출처: https://tailwindcss.com/docs/container

 

위의 내용을 번역해보자면 다음과 같다.

컨테이너 클래스는 요소의 최대 너비를 현재 브레이크포인트의 최소 너비와 일치하도록 설정합니다. 이는 완전히 유동적인 뷰포트를 수용하기보다는 고정된 스크린 크기에 대해 디자인하는 것을 선호할 때 유용합니다. 다른 프레임워크에서 사용한 컨테이너와 달리 tailwind의 컨테이너는 자동으로 가운데 정렬되지 않으며, 수평 패딩이 내장되어 있지 않습니다. 

 

이를 좀 더 자세히 설명해보자면,,,,

여기서 브레이크포인트는 웹사이트가 다른 화면 크기에 따라 다르게 보이도록 사용되는 기준점을 의미한다. 모바일, 태블릿, 데스크탑과 같이 다양한 장치와 화면 크기에 맞추어 웹사이트의 디자인이 변경된다.

그래서 위의 내용을 그냥 화면 크기에 따라 너비가 변경되는데 container 속성을 통해 우리가 설정한 기준점에 따라 화면 크기를 고정할 수 있다고 생각하면 편하다. container를 사용하면 더 편리하게 고정된 화면 크기를 디자인할 수 있다고 한다. 

 

그리고 container 속성에서는 자동 가운데 정렬과 수평 패딩(horizontal padding)이 적용되지않는다고 하는데 이를 적용시키기 위해서는 다음과 같이 설정하면 된다고 공식홈페이지에서 안내하고 있다.

 

가운데 정렬

<div class="container mx-auto">
  <!-- ... -->
</div>

수평 패딩 

<div class="container mx-auto px-4">
  <!-- ... -->
</div>

 

✅ 코드 

<div className="container mx-auto max-w-screen-xl" >
        <Header />
        <div className="flex pl-5 pr-5  justify-center flex-wrap ">
         // 중간 코드 생략 //
        </div>
</div>

 

최상위 부모 코드에 container 속성을 적용시켜주면 된다. 그리고 max-w-screen 속성으로 가로 최대 크기를 설정해서 그 이상 커지지않도록 고정했다. 

 

✅ 적용 후 사용후기 

 

container를 적용하기 전에는 사용하고 있는 모니터 크기에 따라서 컴포넌트 크기가 계속 확장해서 살짝 이상했다.

하지만 적용후에 내가 정해놓은 최대 크기 이상으로는 확정되지 않아 모니터가 커져도 예쁜 크기가 유지되어 좋았다. 

기존에는 기능 개발에 집중해서 css나 사용자 편리성에 대해서 많이 고려하지않았는데 이번 프로젝트에서는 UI UX와 보여지는 부분에 좀더 집중을 해보니 되게 사소한 것까지 신경을 써야된다는 것을 알게 되었다. 

경험해보지않았다면 고려하지 못했을 css 속성에 대해서 알게되어서 기쁘다. 

 

📁 출처

https://tailwindcss.com/docs/container