학습
CSS 그리드 레이아웃 심화
CSS 그리드 레이아웃 심화 — 중급
그리드 레이아웃 심화
1. 도입 (왜 배워야 하는가)
그리드 레이아웃은 현대 웹 디자인에서 필수적인 도구입니다. 반응형 웹 디자인을 구현할 때 그리드 시스템을 사용하면 다양한 화면 크기와 비율에 맞춰 콘텐츠를 효율적으로 배치할 수 있습니다. 실무에서 그리드 레이아웃을 잘 활용하지 못하면, 사용자 경험이 저하되거나 디자인이 일관성을 잃을 수 있습니다. 특히 모바일 환경에서의 레이아웃 깨짐 현상은 사용자의 이탈을 초래할 수 있기 때문에, 그리드 레이아웃에 대한 이해가 필수적입니다.
2. 핵심 개념 설명
그리드 레이아웃의 핵심 개념은 크게 다음과 같습니다.
| 용어 | 정의 |
|---|---|
| Grid Container | 그리드 아이템을 포함하는 부모 요소 |
| Grid Item | 그리드 컨테이너 내에서 배치되는 자식 요소 |
| Track | 그리드 컨테이너의 행(row) 또는 열(column) |
| Cell | 그리드의 각 교차점으로, 그리드 아이템이 배치되는 공간 |
| Area | 그리드의 특정 영역으로, 여러 개의 셀로 구성될 수 있음 |
비유: 그리드 레이아웃은 마치 정돈된 책상 위에 물건들을 배치하는 것과 같습니다. 책상(그리드 컨테이너) 위에 책(그리드 아이템), 필기구, 노트 등을 정리하는 방식으로, 각 물건이 어떤 자리에 놓일지 계획하는 것입니다.
3. 기본 코드 예제
가장 간단한 그리드 레이아웃을 만드는 코드입니다.
.container {
display: grid; / 그리드 컨테이너로 설정 /
grid-template-columns: repeat(3, 1fr); / 3개의 열을 같은 비율로 설정 /
gap: 10px; / 각 셀 간의 간격을 10px로 설정 /
}
.item {
background-color: lightblue; / 각 아이템의 배경색을 연한 파란색으로 설정 /
padding: 20px; / 아이템 안의 여백을 20px로 설정 /
text-align: center; / 텍스트를 중앙 정렬 /
}실행 결과
- 3개의 열로 나누어진 그리드가 생성되며, 각 아이템은 연한 파란색 배경과 중앙 정렬된 텍스트를 가집니다.
display: grid;: 이 속성은 해당 요소를 그리드 컨테이너로 변환합니다.grid-template-columns: repeat(3, 1fr);: 3개의 열을 생성하며, 각 열의 너비를 동일하게 설정합니다.gap: 10px;: 각 그리드 셀 사이에 10픽셀의 간격을 추가합니다..item: 각 그리드 아이템에 스타일을 적용합니다.
코드 동작 설명
4. 실전 활용 예제
예제 1: 쇼핑몰 장바구니 레이아웃
쇼핑몰에서 장바구니를 구현할 때, 제품 이미지를 그리드로 배치할 수 있습니다.
.cart {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); / 자동으로 열을 추가 /
gap: 15px; / 각 아이템 간의 간격 /
}예제 2: 포트폴리오 웹사이트
포트폴리오 사이트에서 프로젝트 이미지를 균형 있게 배치할 수 있습니다.
.portfolio {
display: grid;
grid-template-rows: auto auto; / 두 개의 행으로 나누기 /
grid-template-columns: 1fr 1fr 1fr; / 세 개의 열로 나누기 /
}5. 흔한 실수와 주의사항
실수 1: 그리드 컨테이너 설정 누락
/ 잘못된 코드 /
.item {
grid-column: 1 / 3; / 오류 발생: 부모가 그리드가 아님 /
}.container {
display: grid;
}실수 2: gap 속성 사용 미비
/ 잘못된 코드 /
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/ gap 속성이 없음 /
}.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px; / spacing 적용 /
}