Ch.6 CSS Grid + 반응형 디자인
프로젝트 갤러리 만들기
Grid + @media로 반응형 갤러리를 구현할 수 있다auto-fill/auto-fit과 minmax()를 활용할 수 있다hover 효과로 인터랙티브한 갤러리를 만들 수 있다
포트폴리오 갤러리를 하나의 CSS로 완성할 수 있을까?
프로젝트 갤러리는 모바일에서 1열, 태블릿에서 2열, 데스크톱에서 3~4열로 자동 조절되어야 합니다. Grid와 @media의 콤비네이션으로 해결합니다.
화면 크기에 따라 열 수가 자동으로 바뀔 수 없을까?
auto-fit + minmax() — 반응형 갤러리를 미디어 쿼리 없이도 만들 수 있습니다.
article
핵심 내용
열 수를 직접 지정하지 않고 자동으로 채워지게 합니다
/* 열 수를 직접 지정 */
grid-template-columns: repeat(3, 1fr);
/* 자동 열 수 — 화면에 맞게 조절 */
grid-template-columns:
repeat(auto-fit, minmax(250px, 1fr));
/* 해석:
- 각 열의 최소 너비 = 250px
- 남는 공간은 1fr로 균등 분배
- 화면이 넓으면 열이 늘어나고
- 좁으면 자동으로 줄어듦 */마우스를 올리면 카드가 살짝 떠오르는 효과를 줍니다
.gallery-card {
background: white;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e0e0e0;
/* 부드러운 전환 효과 */
transition: transform 0.2s,
box-shadow 0.2s;
}
.gallery-card:hover {
transform: translateY(-4px);
box-shadow:
0 8px 25px rgba(0,0,0,0.1);
}
.gallery-card img {
width: 100%;
height: 180px;
object-fit: cover;
}
.gallery-card .info {
padding: 16px;
}transition: 속성 변화를 부드럽게 애니메이션 • `transition: transform 0.2s` = transform이 0.2초에 걸쳐 변화 • `:hover`에서 변경된 값으로 자연스럽게 전환됨
auto-fit + minmax로 반응형 갤러리를 완성합시다
미디어 쿼리 없이 화면 크기에 따라 Grid 열 수가 자동 조절되게 하는 조합은?
CSS에서 속성 변화를 부드럽게 애니메이션하려면 ___ 속성을 사용한다
미디어 쿼리에서 max-width: 768px은 768px 이상의 화면에 적용된다
Grid + 반응형 마스터!
key
핵심 용어
🔲
auto-fill
빈 트랙도 유지 (공간이 남으면 빈 열 생성)
📐
auto-fit
빈 트랙을 접음 (아이템이 남은 공간 차지)
↔️
minmax()
최소~최대 크기 범위 지정 (반응형 핵심)
edit_note
정리 노트
프로젝트 갤러리 만들기
Grid 갤러리 패턴
- auto-fill
- repeat(auto-fill, minmax(250px, 1fr)) — 자동 열 조절
- minmax()
- 최소~최대 크기 범위를 지정하는 함수
- object-fit: cover
- 이미지를 비율 유지하며 영역에 채움
반응형 팁
- auto-fill vs auto-fit
- auto-fill은 빈 열 유지, auto-fit은 빈 열 제거
- 미디어 쿼리 최소화
- auto-fill + minmax로 미디어 쿼리 없이도 반응형 가능
★
auto-fill + minmax 조합은 미디어 쿼리 없이 반응형 그리드를 만드는 마법 공식입니다.
check_circle
핵심 정리
- 1auto-fit + minmax() = 미디어 쿼리 없는 반응형 Grid
- 2transition으로 hover 시 부드러운 애니메이션
- 3:hover + transform으로 카드가 떠오르는 효과
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작