icon

안동민 개발노트

3장 : CSS 기초와 레이아웃

Grid 레이아웃

지난 장에서 우리는 Flexbox를 사용해 1차원(한 줄 또는 한 열) 방향으로 아이템을 유연하게 배치하고 정렬하는 방법을 학습했습니다. Flexbox는 네비게이션 바나 카드 목록처럼 한 방향으로 흐르는 콘텐츠를 다룰 때 매우 강력한 도구입니다.

하지만 웹 페이지는 종종 여러 행과 열로 구성된 복잡한 2차원 레이아웃을 필요로 합니다. 예를 들어, 신문 기사처럼 여러 열로 나뉜 텍스트, 복잡한 대시보드, 갤러리 페이지 등이 그렇습니다.

이러한 2차원 레이아웃 요구를 해결하기 위해 나온 것이 CSS Grid Layout입니다. Grid는 이름 그대로 격자(Grid) 형태의 레이아웃을 만들 수 있도록 설계된 CSS3 레이아웃 모듈입니다.

부모 요소에 그리드 구조를 정의하고, 그 안의 자식 요소를 특정 그리드 셀에 배치함으로써 전체 페이지의 큰 틀이나 복잡한 그리드 UI를 쉽고 효율적으로 구현할 수 있습니다.

이 장에서는 Grid의 기본 개념과 주요 속성을 상세하게 학습하고, 실습을 통해 Grid의 강력함을 직접 경험해 볼 것입니다. Flexbox와 Grid는 서로 보완 관계에 있으므로, 두 기술을 모두 능숙하게 다루는 것은 현대 웹 개발자에게 필수 역량입니다.

Grid의 기본 개념

Flexbox와 마찬가지로 Grid도 부모-자식 관계를 기반으로 작동합니다. Grid 레이아웃을 적용하려는 영역을 Grid 컨테이너(Grid Container)로 만들고, 그 안에 있는 직계 자식 요소들이 Grid 아이템(Grid Item)이 됩니다.

  • Grid 컨테이너: display: grid 또는 display: inline-grid 속성이 적용된 부모 요소입니다. 컨테이너에 적용하는 속성들은 그리드의 전체적인 구조(행과 열)와 아이템들의 배치를 결정합니다.
  • Grid 아이템: Grid 컨테이너의 직계 자식 요소들입니다. 아이템에 직접 적용하는 속성들은 해당 아이템이 그리드 내에서 차지할 영역을 지정합니다.
  • Grid Line (그리드 라인): 그리드를 구성하는 가로/세로 선입니다. 이 선들을 기준으로 아이템의 시작과 끝 위치를 지정합니다. 1부터 시작하여 N+1개의 라인이 생성됩니다.
  • Grid Track (그리드 트랙): 그리드 라인 사이에 형성되는 공간으로, 행(Row)과 열(Column)을 의미합니다. 트랙의 크기는 grid-template-columns와 grid-template-rows로 정의합니다.
  • Grid Cell (그리드 셀): 하나의 행 트랙과 하나의 열 트랙이 교차하는 가장 작은 단위입니다.
  • Grid Area (그리드 영역): 여러 개의 그리드 셀을 아우르는 사각형 영역입니다.

Grid 컨테이너 속성

Grid 컨테이너에 적용하는 속성들은 그리드의 행과 열을 정의하고, 그 안에 있는 아이템들의 전체적인 배치와 정렬에 영향을 미칩니다.

display로 Grid 컨테이너 선언

  • display: grid;: 컨테이너를 블록 레벨 Grid 컨테이너로 만듭니다. (가장 일반적인 사용)
  • display: inline-grid;: 컨테이너를 인라인 레벨 Grid 컨테이너로 만듭니다.

grid-template-columns

그리드의 열(Column) 트랙의 크기와 개수를 정의합니다. 공백으로 구분하여 각 열의 너비를 지정합니다.

  • 단위: px, %, em, rem, vw, vh 등 다양한 CSS 단위 사용 가능.
  • fr (Fraction): 사용 가능한 공간에 대한 비율을 나타내는 단위. 남은 공간을 유연하게 나눌 때 매우 유용합니다. (예: 1fr 2fr 1fr은 남은 공간을 1:2:1 비율로 나눔)
  • repeat() 함수: 동일한 크기의 트랙을 반복할 때 사용합니다. repeat(반복 횟수, 트랙 크기). (예: repeat(3, 1fr)은 1fr 1fr 1fr과 동일)
  • minmax() 함수: 트랙의 최소 및 최대 크기를 지정합니다. minmax(최소 크기, 최대 크기). (예: minmax(100px, 1fr)은 최소 100px, 최대 남은 공간을 차지)
  • auto: 콘텐츠의 크기에 맞춰 자동으로 조절되거나, 남은 공간을 균등하게 분배합니다.
.container {
    display: grid;
    /* 3개의 열: 첫 번째 200px, 두 번째 남은 공간의 2배, 세 번째 남은 공간의 1배 */
    grid-template-columns: 200px 2fr 1fr;
    /* 4개의 동일한 열 (각각 남은 공간의 1/4) */
    grid-template-columns: repeat(4, 1fr);
    /* 최소 150px, 최대 남은 공간을 차지하는 열들을 자동으로 생성 */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 반응형 그리드에 자주 사용 */
}

grid-template-rows

그리드의 행(Row) 트랙의 크기와 개수를 정의합니다. grid-template-columns와 동일한 방식으로 단위를 사용합니다.

.container {
    display: grid;
    /* 3개의 행: 첫 번째 100px, 두 번째 콘텐츠 크기만큼, 세 번째 남은 공간의 1배 */
    grid-template-rows: 100px auto 1fr;
}

grid-gap / gap

그리드 트랙(행과 열) 사이의 간격을 설정합니다.

  • grid-column-gap (or column-gap): 열 트랙 사이의 간격
  • grid-row-gap (or row-gap): 행 트랙 사이의 간격
  • grid-gap (or gap): 행과 열 간격을 동시에 설정하는 단축 속성입니다.
    • gap: 20px; (행과 열 모두 20px 간격)
    • gap: 10px 20px; (행 간격 10px, 열 간격 20px)
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 20px; /* 모든 그리드 셀 사이 20px 간격 */
}

justify-items

그리드 셀(Cell) 내부에서 아이템들을 가로 방향으로(수평) 어떻게 정렬할지 결정합니다.

  • stretch (기본값): 아이템이 셀의 전체 너비를 차지하도록 늘어납니다.
  • start: 셀의 시작 지점으로 정렬.
  • end: 셀의 끝 지점으로 정렬.
  • center: 셀의 중앙으로 정렬.
.container {
    display: grid;
    grid-template-columns: repeat(3, 150px); /* 아이템이 늘어나지 않도록 고정 너비 설정 */
    justify-items: center; /* 각 셀 내부의 아이템들을 가로 중앙 정렬 */
}

align-items

그리드 셀(Cell) 내부에서 아이템들을 세로 방향으로(수직) 어떻게 정렬할지 결정합니다.

  • stretch (기본값): 아이템이 셀의 전체 높이를 차지하도록 늘어납니다.
  • start: 셀의 시작 지점으로 정렬.
  • end: 셀의 끝 지점으로 정렬.
  • center: 셀의 중앙으로 정렬.
.container {
    display: grid;
    grid-template-rows: repeat(2, 100px); /* 아이템이 늘어나지 않도록 고정 높이 설정 */
    align-items: center; /* 각 셀 내부의 아이템들을 세로 중앙 정렬 */
}

justify-content

컨테이너 내에서 그리드 전체를 주축(가로) 방향으로 어떻게 정렬할지 결정합니다. 그리드 총 너비가 컨테이너 너비보다 작을 때 유효합니다.

  • Flexbox의 justify-content와 유사하게 작동합니다. (start, end, center, space-between, space-around, space-evenly)
.container {
    display: grid;
    grid-template-columns: 100px 100px 100px; /* 그리드 총 너비: 300px */
    width: 500px; /* 컨테이너 너비: 500px */
    justify-content: center; /* 300px 그리드를 500px 컨테이너의 중앙에 배치 */
}

align-content

컨테이너 내에서 그리드 전체를 교차축(세로) 방향으로 어떻게 정렬할지 결정합니다. 그리드 총 높이가 컨테이너 높이보다 작을 때 유효합니다.

  • Flexbox의 align-content와 유사하게 작동합니다. (start, end, center, space-between, space-around, space-evenly)
.container {
    display: grid;
    grid-template-rows: 50px 50px; /* 그리드 총 높이: 100px */
    height: 300px; /* 컨테이너 높이: 300px */
    align-content: center; /* 100px 그리드를 300px 컨테이너의 중앙에 배치 */
}

Grid 아이템 속성

Grid 아이템에 적용하는 속성들은 해당 아이템이 그리드 내에서 어떤 위치와 크기를 차지할지 지정합니다.

grid-column-start, grid-column-end

아이템이 시작하고 끝날 열 라인(Column Line)을 지정합니다.

  • grid-column-start: N; (N번째 세로 라인에서 시작)
  • grid-column-end: N; (N번째 세로 라인에서 끝남)
  • span N: 현재 라인에서 N개의 트랙을 차지. (예: span 2는 두 칸을 차지)

grid-row-start, grid-row-end

아이템이 시작하고 끝날 행 라인(Row Line)을 지정합니다. grid-column과 동일한 방식으로 작동합니다.

단축 속성 grid-column / grid-row

  • grid-column: [start-line] / [end-line];
  • grid-row: [start-line] / [end-line]; 
.item-a {
    grid-column: 1 / 3; /* 첫 번째 세로 라인에서 시작하여 세 번째 세로 라인에서 끝남 (2칸 차지) */
    grid-row: 1 / 2; /* 첫 번째 가로 라인에서 시작하여 두 번째 가로 라인에서 끝남 (1칸 차지) */
}
.item-b {
    grid-column: span 2; /* 두 칸 너비를 차지 */
    grid-row: span 3; /* 세 칸 높이를 차지 */
}

grid-area

그리드 컨테이너에서 grid-template-areas로 정의된 영역 이름을 사용하여 아이템을 배치합니다. 훨씬 직관적이고 가독성이 높은 방법입니다.

  • 컨테이너에 영역 정의: 
    .container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header" /* 첫 번째 행: 모두 header 영역 */
        "nav    main   aside"  /* 두 번째 행: nav, main, aside */
        "footer footer footer"; /* 세 번째 행: 모두 footer 영역 */
}
  • 아이템에 영역 지정: 
    header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
    💡 장점: 레이아웃 구조가 CSS 코드에서 시각적으로 명확하게 드러납니다.

justify-self

개별 Grid 아이템이 자신이 속한 셀 내부에서 가로 방향으로 어떻게 정렬될지 지정합니다. 컨테이너의 justify-items보다 우선합니다.

  • start, end, center, stretch

align-self

개별 Grid 아이템이 자신이 속한 셀 내부에서 세로 방향으로 어떻게 정렬될지 지정합니다. 컨테이너의 align-items보다 우선합니다.

  • start, end, center, stretch

실습: Grid를 활용한 반응형 웹 페이지

지금까지 배운 Grid 속성들을 활용하여 실제 웹 페이지의 전체적인 레이아웃을 만들어 봅시다. 헤더, 네비게이션, 메인 콘텐츠, 사이드바, 푸터가 있는 전형적인 구조를 Grid로 구현하고 반응형 웹도 고려합니다.

프로젝트 폴더 구조
grid_layout.html
grid.css
grid_layout.html 파일 작성
grid_layout.html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid 레이아웃 실습</title>
    <link rel="stylesheet" href="css/grid.css">
</head>
<body>
    <div class="grid-container">
        <header class="header">
            <h1>내 Grid 웹사이트</h1>
            <p>CSS Grid로 만드는 멋진 레이아웃</p>
        </header>

        <nav class="navbar">
            <ul>
                <li><a href="#">홈</a></li>
                <li><a href="#">제품</a></li>
                <li><a href="#">소개</a></li>
                <li><a href="#">문의</a></li>
            </ul>
        </nav>

        <main class="main-content">
            <h2>환영합니다!</h2>
            <p>이곳은 CSS Grid Layout을 이용해 만들어진 반응형 웹 페이지입니다. Grid는 2차원 레이아웃에 특화되어 복잡한 웹 페이지 구조를 효율적으로 설계할 수 있게 해줍니다.</p>
            <div class="image-gallery">
                
                
                
                
            </div>
            <h3>Grid의 장점</h3>
            <ul>
                <li>복잡한 2차원 레이아웃 설계 용이</li>
                <li>아이템들의 위치와 크기 정교하게 제어</li>
                <li>반응형 디자인에 강력</li>
            </ul>
        </main>

        <aside class="sidebar">
            <h3>관련 정보</h3>
            <p>Grid Layout은 Flexbox와 함께 현대 웹 개발의 필수 기술입니다.</p>
            <button>자세히 보기</button>
        </aside>

        <footer class="footer">
            <p>&copy; 2025 Grid Layout 학습. 모든 권리 보유.</p>
        </footer>
    </div>
</body>
</html>
css/grid.css 파일 작성
css/grid.css
/* 기본 스타일 및 박스 사이징 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.6;
}

/* Grid 컨테이너 설정 */
.grid-container {
    display: grid; /* Grid 활성화 */
    gap: 20px; /* 그리드 셀 사이의 간격 */
    min-height: 100vh; /* 최소 높이를 뷰포트 높이로 설정 */
    max-width: 1200px; /* 최대 너비 제한 */
    margin: 0 auto; /* 중앙 정렬 */

    /* 그리드 영역 이름 정의 및 배치 */
    grid-template-areas:
        "header  header  header"
        "navbar  main    sidebar"
        "footer  footer  footer";

    /* 각 열의 너비 정의 */
    grid-template-columns: 200px 1fr 250px; /* nav 200px, main 가변, sidebar 250px */
    /* 각 행의 높이 정의 */
    grid-template-rows: auto 1fr auto; /* header, footer는 콘텐츠만큼, main은 남은 공간 모두 */
}

/* 그리드 아이템 기본 스타일 */
.grid-container > * {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Grid 아이템을 정의된 영역에 배치 */
.header {
    grid-area: header;
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 30px;
}

.header h1 {
    font-size: 2.8em;
    margin-bottom: 10px;
}

.navbar {
    grid-area: navbar;
    background-color: #34495e;
    color: white;
}
.navbar ul {
    list-style: none;
    padding: 0;
}
.navbar li {
    margin-bottom: 10px;
}
.navbar a {
    display: block; /* 링크 영역 확장 */
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.navbar a:hover {
    background-color: #4a6581;
}

.main-content {
    grid-area: main;
}
.main-content h2 {
    color: #2980b9;
    margin-bottom: 15px;
    border-bottom: 2px solid #2980b9;
    padding-bottom: 5px;
}
.main-content h3 {
    color: #4a6581;
    margin-top: 25px;
    margin-bottom: 10px;
}
.main-content ul {
    list-style-type: disc;
    margin-left: 20px;
}
.main-content li {
    margin-bottom: 5px;
}

/* 이미지 갤러리 (Grid in Grid - Flexbox와 함께 사용) */
.image-gallery {
    display: grid; /* 갤러리 내부를 다시 그리드로 */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 최소 180px, 가변 열 */
    gap: 15px;
    margin: 20px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
}
.image-gallery img {
    width: 100%;
    height: 150px;
    object-fit: cover; /* 비율 유지하며 채우기 */
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sidebar {
    grid-area: sidebar;
    background-color: #ecf0f1;
}
.sidebar h3 {
    color: #2c3e50;
    margin-bottom: 15px;
}
.sidebar button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}
.sidebar button:hover {
    background-color: #218838;
}

.footer {
    grid-area: footer;
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
}

/* 반응형 디자인: 화면 너비 768px 이하 */
@media (max-width: 768px) {
    .grid-container {
        /* 모바일에서는 모든 영역을 하나의 열에 세로로 쌓음 */
        grid-template-areas:
            "header"
            "navbar"
            "main"
            "sidebar"
            "footer";
        grid-template-columns: 1fr; /* 하나의 열만 사용 */
        grid-template-rows: auto auto 1fr auto auto; /* 각 영역 높이 조정 */
        gap: 15px; /* 간격도 조금 줄임 */
    }

    .header, .navbar, .main-content, .sidebar, .footer {
        padding: 15px; /* 패딩도 줄임 */
    }

    .navbar ul {
        display: flex; /* 네비게이션 메뉴를 플렉스박스로 가로 정렬 */
        flex-wrap: wrap; /* 공간 부족 시 줄바꿈 */
        justify-content: center;
        gap: 10px;
    }
    .navbar li {
        margin-bottom: 0;
    }
    .navbar a {
        padding: 8px 12px;
        font-size: 0.9em;
    }

    .image-gallery {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 모바일 이미지 갤러리 조정 */
        gap: 10px;
    }
}
결과 확인
  • Live Server를 통해 grid_layout.html 파일을 열어보세요.
  • 웹 페이지의 헤더, 네비게이션, 메인 콘텐츠, 사이드바, 푸터가 명확한 격자 형태로 배치된 것을 확인할 수 있습니다. grid-template-areas를 통해 코드에서 레이아웃 구조가 시각적으로 어떻게 보이는지 주목하세요.
  • 브라우저 창의 너비를 조절해 보세요. 특히 768px 이하로 줄어들면, Grid 컨테이너의 grid-template-areas와 grid-template-columns 설정이 변경되어 모든 영역이 세로로 쌓이는 반응형 디자인이 적용되는 것을 확인할 수 있습니다. image-gallery와 같이 Grid 안에 Grid를 사용하여 복잡한 섹션을 만들 수도 있습니다.

이번 장에서는 2차원 레이아웃을 위한 강력한 CSS 모듈인 CSS Grid Layout에 대해 학습했습니다. Grid 컨테이너에 행과 열 트랙을 정의하고(grid-template-columns, grid-template-rows), 트랙 사이의 간격을 설정하며(gap), 아이템들을 라인 기반(grid-column, grid-row) 또는 영역 이름 기반(grid-area, grid-template-areas)으로 배치하는 방법을 배웠습니다. 또한, 그리드 셀 내부에서 아이템을 정렬하고(justify-items, align-items), 그리드 전체를 정렬하는(justify-content, align-content) 방법도 익혔습니다.

Flexbox가 1차원 배열에 강점을 가진다면, Grid는 전체 페이지 레이아웃이나 복잡한 갤러리처럼 2차원 구조를 만들 때 빛을 발합니다. 이 두 기술은 현대 웹 개발에서 거의 모든 레이아웃 문제를 해결할 수 있는 핵심 도구입니다.

이로써 3장 CSS 기초와 레이아웃의 모든 내용을 마쳤습니다. 여러분은 이제 HTML로 콘텐츠를 만들고, CSS로 스타일을 입히며, Flexbox와 Grid를 사용하여 복잡하고 반응형인 웹 레이아웃을 설계할 수 있는 기본기를 완벽하게 다지게 되었습니다.

Flexbox 레이아웃

이전 페이지

반응형 웹 디자인 기초

다음 페이지

목차

Grid의 기본 개념
Grid 컨테이너 속성
display로 Grid 컨테이너 선언
grid-template-columns
grid-template-rows
grid-gap / gap
justify-items
align-items
justify-content
align-content
Grid 아이템 속성
grid-column-start, grid-column-end
grid-row-start, grid-row-end
단축 속성 grid-column / grid-row
grid-area
justify-self
align-self
실습: Grid를 활용한 반응형 웹 페이지