CSS2 tailwind css 컴포넌트 크기 조정하기, 자동 줄바꿈 ✅ 적용 목적 grid-cols-4 속성으로 인해 컴포넌트가 고정되어 있었고 이로 인해 사용자 입장에서 보기 불편할 것 같다는 피드백을 받았다. css가 grid-cols-4로 고정되어있어서 브라우저 크기를 줄이면 컴포넌트가 계속 작아졌다. 이러한 점을 개선하기 위해 브라우저가 줄어들면 한 줄에 하나의 컴포넌트만 위치하게 만들고 자동줄바꿈 속성을 넣기로 계획했다. ✅ 적용 방법 grid grid-cols-1 md:grid-cols-4 md 사이즈 까지는 한 줄에 4개씩 배치하고 md 사이즈보다 작아지면 한 줄에 하나씩 배치하는 css 속성을 적용했다. 그리고 각 게시물 개별 단위로는 max-w-2xl 속성을 주어서 게시물의 최대 너비를 제한하였다. ✅ 코드 {dataList.map((data: any) .. 2023. 7. 25. 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.. 2023. 7. 25. 이전 1 다음