CSS 그리드: 강력한 레이아웃을 위한 초보자 가이드

안녕하세요, 미래의 웹 디자인 마법사 여러분! 오늘 우리는 CSS 그리드의 마법의 세상으로 접수합니다. 코드를 한 줄도 적어본 적이 없어도 걱정 마세요 - 이 여정에서 여러분의 친절한 안내자가 되겠습니다. 이 튜토리얼의 끝을 맺을 때쯤에는 프로처럼 레이아웃을 만들 수 있을 것입니다!

CSS 그리드는 무엇인가요?

CSS 그리드는 웹 레이아웃의 슈퍼 헴어입니다. 이는 두차원적인 시스템으로, 콘텐츠를 행과 열로 정리할 수 있습니다. 방에 가구를 배치하는 것을 상상해 보세요 - 그리드는 웹 페이지에서 그 역할을 합니다!

왜 이를 신경써야 하나요?

그리드 이전에는 복잡한 레이아웃을 만들기 위해 플로트와 위치 조정을 힘들게 했습니다. 집을 테이프로 짓는 것처럼 느껴졌죠! 그리드는 이를 간편하고 직관적으로 만들어줍니다. 15년 동안 교육을 해본 저는 학생들이 그리드를 발견했을 때 얼굴에 띄운 안도의 미소를 본 적이 있습니다.

CSS 그리드 시작하기

간단한 예제로 시작해 보겠습니다. 헤더, 주 내용, 사이드바, 푸터가 있는 기본적인 웹 페이지 레이아웃을 만들어 보겠습니다.

<div class="container">
<header>헤더</header>
<main>주 내용</main>
<aside>사이드바</aside>
<footer>푸터</footer>
</div>

이제 CSS 마법을 더해보겠습니다:

.container {
display: grid;
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
gap: 10px;
}

header { grid-area: header; background-color: #ff9999; }
main   { grid-area: main; background-color: #99ff99; }
aside  { grid-area: sidebar; background-color: #9999ff; }
footer { grid-area: footer; background-color: #ffff99; }

여기서 무슨 일이 일어나고 있나요? 컨테이너를 그리드로 표시하라고 지시하고, grid-template-areas를 사용하여 레이아웃을 정의하고 있습니다. 웹 페이지의 지도를 그리는 것 같아요!

CSS grid 속성

grid 속성은 모든 명시적 그리드 속성을 한 번에 설정하는 약자입니다. 그리드의瑞士军刀!

가능한 값

grid 속성의 가능한 값을 표로 정리해 보겠습니다:

값	설명
none	그리드 행동이 지정되지 않음
<grid-template>	그리드 열과 행의 크기를 지정
<grid-template-rows> / <grid-auto-columns>	grid-template-rows와 grid-auto-columns 속성을 설정
<grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns> ] ]	grid-auto-flow 속성을 설정하고, 선택적으로 grid-auto-rows와 grid-auto-columns 속성을 설정

적용 대상

grid 속성은 그리드 컨테이너 요소에 적용됩니다. 이는 "이 요소는 그리드 레이아웃의 보스!"라고 말하는 것과 같습니다.

DOM 문법

object.style.grid = "none|<grid-template-rows> / <grid-template-columns>|<grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ]|initial|inherit";

이제 이게 외계어처럼 보이지만, 이를 하나씩 풀어보겠습니다!

CSS 그리드 - <grid-template>

<grid-template> 값은 그리드의 구조를 정의할 수 있습니다. 레이아웃의 블루프린트를 만드는 것과 같습니다.

.container {
grid: 100px 300px / 3fr 1fr;
}

이는 두 행(100px와 300px 높이)과 두 열(3fr과 1fr 너비)을 가진 그리드를 만듭니다. fr 단위는 "사용 가능 공간의 부분"과 같아 매우 유용합니다!

CSS 그리드 - minmax()과 repeat()

이 함수들은 그리드의 듀오입니다:

• minmax()는 트랙의 최소 및 최대 크기를 설정합니다.
• repeat()는 트랙 정의를 반복할 수 있습니다.

.container {
grid: repeat(3, minmax(100px, auto)) / repeat(3, 1fr);
}

이는 각 행이 최소 100px 높이이지만 자라날 수 있으며, 열이 동일한 공간을 공유하는 3x3 그리드를 만듭니다.

CSS 그리드 - auto-flow 값

auto-flow 값은 자동 배치된 항목이 그리드로 흐르는 방식을 결정합니다. 책장을 수평으로 채우는지 수직으로 채우는지 결정하는 것과 같습니다.

.container {
grid: auto-flow / 200px 1fr;
}

이는 200px와 1fr의 열을 만들고 필요에 따라 행을 자동으로 생성합니다.

CSS 그리드 - auto-flow dense 값

auto-flow에 dense를 추가하면 더 작은 항목이 나중에 나타나더라도 그리드의 빈 공간을 채우도록 합니다. 테트리스를 효율적으로 하는 것과 같습니다!

.container {
grid: auto-flow dense / 200px 1fr;
}

CSS 그리드 - 복잡한 약자

이 모든 개념을 하나의 강력한 선언으로 결합할 수 있습니다:

.container {
grid: [auto-flow] 100px / repeat(3, [col-start] 1fr [col-end]);
}

이는 자동 흐름 행이 100px 높이이고, 세 개의 동일한 너비 열에 이름을 지정한 그리드를 만듭니다.

CSS 그리드 - 관련 속성

그리드는 여러 가족 속성을 가지고 있습니다. 여기 몇 가지 중요한 관련 속성을 소개합니다:

속성	설명
grid-template-rows	그리드 행을 정의
grid-template-columns	그리드 열을 정의
grid-template-areas	그리드 템플릿 영역을 정의
grid-auto-rows	묵시적으로 생성된 행의 크기를 설정
grid-auto-columns	묵시적으로 생성된 열의 크기를 설정
grid-auto-flow	자동 배치 알고리즘의 동작을 제어

기억하세요, 연습이 완벽을 만듭니다! 이 속성들을 실험해 보지 마세요. 제가 가르친 한 학생은 그리드를 사용하여 디지털 예술 작품을 만들었어요 - 가능성은 무한합니다!

결론적으로, CSS 그리드는 평범한 레이아웃을 훌륭한 레이아웃으로 변환할 수 있는 강력한 도구입니다. 처음에는 압도적일 수 있지만, 연습을 통해 쉽게 복잡한 레이아웃을 만들 수 있을 것입니다. 행복하게 코딩하세요, 그리고 여러분의 그리드가 항상 정렬되기를 바랍니다!

Credits: Image by storyset