CSS - 그리드 레이아웃: 초보자 가이드

안녕하세요, 미래의 웹 디자인 슈퍼스타! 오늘 우리는 CSS 그리드 레이아웃의 세계로 흥미로운 여정을 떠납니다. 코드를 한 줄도 작성해본 적이 없어도 걱정하지 마세요 - 저는 친절한 안내자가 되어, 단계별로 안내해드릴게요. 이 튜토리얼이 끝나면, 프로처럼 멋지고 반응형 레이아웃을 만들 수 있을 것입니다!

CSS - Grid Layout

그리드 레이아웃이란?

방에 가구를 배치하는 것을 상상해보세요. 공간을 행과 열로 마음 속으로 나누어 모든 것을 깔끔하게 정리할 수 있을 것입니다. 이것이 CSS 그리드 레이아웃이 웹 페이지에서 하는 일입니다!

CSS 그리드 레이아웃은 두维적인 레이아웃을 웹 페이지에 만들 수 있게 해주는 강력한 도구입니다. webpage에서 내용을 원하는 곳에 정확히 배치할 수 있는 보이지 않는 그리드를 가지고 있습니다. 멋지지 않나요?

그리드 요소

들어가기 전에, 몇 가지 중요한 용어를 알아보겠습니다:

그리드 컨테이너: 모든 그리드 아이템을 담고 있는 부모 요소.
그리드 아이템: 그리드 컨테이너의 자식 요소.
그리드 라인: 그리드 구조를 이루는 나누는 선.
그리드 트랙: 그리드 라인 사이의 공간(행 또는 열).
그리드 셀: 행과 열의 교차점.
그리드 영역: 네 개의 그리드 라인에 둘러싸인 사각형 공간.

이제 이러한 것들이 혼란스러울 수 있지만, 곧 실제로 보게 될 것입니다!

디스플레이 그리드 속성

간단한 예제로 시작해보겠습니다. 기본적인 3x3 그리드를 만들어보겠습니다. 이렇게 합니다:

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}

.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}

이를 해부해보면:

컨테이너에 display: grid;를 설정하여 그리드 레이아웃을 활성화합니다.
grid-template-columns: auto auto auto;는 세 개의 동일한 너비의 열을 생성합니다.
그리드 아이템을 가시적으로 스타일링합니다.

와우! 첫 그리드 레이아웃을 만들었습니다. 얼마나 흥분되는 일인가요!

그리드 행과 열

이제 행과 열에 대해 좀 더 구체적으로 알아보겠습니다. 정확한 크기를 정의할 수 있습니다:

.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 80px 200px;
}

이렇게 하면 다음과 같은 그리드가 생성됩니다:

세 개의 열: 100px, 200px, 100px 너비
두 개의 행: 80px과 200px 높이

또한, 백분율이나 새로운 fr 단위(가용 공간의 부분)와 같은 다른 단위를 사용할 수도 있습니다:

.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
}

이렇게 하면 비슷한 레이아웃이 생성되지만, 열이 가용 공간에 따라 유연하게 조정됩니다.

그리드 간격

때로는 그리드 아이템 사이에 공간을 주고 싶습니다. 이때 grid-gap을 사용합니다:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}

이렇게 하면 모든 행과 열 사이에 10px의 간격이 추가됩니다. 행과 열 간격을 별도로 설정할 수도 있습니다:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 10px;
grid-column-gap: 20px;
}

CSS 그리드 라인

앞서 언급한 그리드 라인을 사용하여 아이템을 정확하게 배치할 수 있습니다:

<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 300px 100px;
gap: 10px;
}

.item1 {
grid-column: 1 / span 4;
}

.item2 {
grid-row: 2 / span 2;
}

.item3 {
grid-column: 2 / span 2;
}

.item4 {
grid-column: 4;
grid-row: 2;
}

.item5 {
grid-column: 2 / span 3;
grid-row: 3;
}

이렇게 하면 헤더가 전체 너비로 확장되고, 사이드 메뉴, 주 내용 영역, 오른쪽 사이드바, 그리고 푸터로 구성된 복잡한 레이아웃이 생성됩니다. 이러한 값을 다양하게 조정하여 레이아웃의 영향을 확인해보세요!

CSS 그리드 속성 참조

여기서 몇 가지 일반적인 CSS 그리드 속성을 참조할 수 있는 표를 제공합니다:

속성	설명
display: grid;	그리드 컨테이너를 정의합니다
grid-template-columns	열의 수와 크기를 지정합니다
grid-template-rows	행의 수와 크기를 지정합니다
grid-gap	그리드 아이템 사이의 간격을 설정합니다
grid-column-start	그리드 아이템의 시작 위치를 지정합니다
grid-column-end	그리드 아이템의 종료 위치를 지정합니다
grid-row-start	그리드 아이템의 시작 위치를 지정합니다
grid-row-end	그리드 아이템의 종료 위치를 지정합니다
grid-area	그리드 아이템의 크기와 위치를 지정합니다

이제 CSS 그리드 레이아웃의 매력적인 세계로 첫 걸음을 뗐습니다. 연습이 완벽을 이루는 것을 기억하십시오. 다양한 레이아웃과 속성을 실험해보지 마세요. 얼마 지나지 않아 복잡한 반응형 레이아웃을 쉽게 만들 수 있을 것입니다.

미래의 그리드 마스터, 즐겁게 코딩하세요!

Credits: Image by storyset