[반응형 CSS] @media 쿼리, repeat auto-fit

이번 포스트에서는 최근 CSS Grid 레이아웃에서 자주 언급되는 auto-fit과 auto-fill의 차이점, minmax() 함수의 활용법, 그리고 미디어 쿼리 분기점 설정 시의 모범 사례에 대해 알아보겠습니다.

1. auto-fit과 auto-fill의 차이점

CSS Grid에서 repeat() 함수와 함께 사용되는 auto-fit과 auto-fill은 유사해 보이지만, 동작 방식에 차이가 있습니다.

• auto-fill: 그리드 컨테이너의 가용 공간에 맞춰 가능한 많은 열을 생성합니다. 남는 공간이 있더라도 빈 열을 유지하며, 콘텐츠가 없는 빈 셀을 생성합니다.
• auto-fit: auto-fill과 유사하게 가능한 많은 열을 생성하지만, 남는 공간이 있을 경우 빈 열을 제거하고, 기존의 셀이 그 공간을 채우도록 확장합니다.

예시 코드:

css

복사편집

.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .container-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }

위의 코드에서 .container는 auto-fill을 사용하여 빈 셀을 유지하고, .container-fit는 auto-fit을 사용하여 빈 셀을 제거하고 기존 셀이 공간을 채웁니다.

참고 자료:

• CSS-Grid: auto-fit과 auto-fill의 차이점

2. minmax() 함수의 활용법과 이점

CSS Grid의 minmax() 함수는 그리드 트랙의 최소 및 최대 크기를 지정할 수 있게 해줍니다. 이를 통해 그리드 아이템의 크기를 유연하게 조절할 수 있습니다.

예시 코드:

css

복사편집

.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }

위의 코드에서 minmax(200px, 1fr)는 각 그리드 셀이 최소 200px의 너비를 가지며, 가용 공간에 따라 최대 1fr까지 확장될 수 있음을 의미합니다. 이를 통해 반응형 레이아웃을 간결하게 구현할 수 있습니다.

참고 자료:

• 그리드 - Web 개발 학습하기 | MDN

3. 미디어 쿼리 분기점 설정 시의 모범 사례

미디어 쿼리는 다양한 디바이스와 화면 크기에 대응하기 위해 필수적인 도구입니다. 분기점을 설정할 때 고려해야 할 모범 사례는 다음과 같습니다.

• 콘텐츠 우선 접근법: 디바이스의 종류나 해상도에 의존하기보다는, 콘텐츠의 레이아웃이 깨지거나 가독성이 떨어지는 지점을 기준으로 분기점을 설정합니다.
• 일관성 유지: 프로젝트 전반에 걸쳐 일관된 분기점을 사용하여 유지보수성을 높입니다.
• 디바이스 통계 활용: 타겟 사용자들의 디바이스 사용 통계를 분석하여 주요 화면 크기에 맞춰 분기점을 설정합니다.

예시 코드:

css

복사편집

@media (max-width: 1200px) { /* 데스크탑 레이아웃 조정 */ } @media (max-width: 992px) { /* 태블릿 가로 모드 레이아웃 조정 */ } @media (max-width: 768px) { /* 태블릿 세로 모드 레이아웃 조정 */ } @media (max-width: 576px) { /* 모바일 레이아웃 조정 */ }

위의 분기점은 일반적인 디바이스 크기를 기준으로 설정되었으며, 프로젝트의 필요에 따라 조정할 수 있습니다.

참고 자료:

• Basic concepts of grid layout - CSS: Cascading Style Sheets | MDN

---

Q1

auto-fit과 auto-fill을 사용할 때, 그리드 아이템의 최소 크기를 설정하는 것이 왜 중요한가요?

Q2

minmax() 함수를 사용할 때, 최대값을 1fr로 설정하는 것과 auto로 설정하는 것의 차이점은 무엇인가요?

Q3

미디어 쿼리 분기점을 설정할 때, 픽셀 단위 대신 em 또는 rem 단위를 사용하는 것의 장단점은 무엇인가요?