5.1 Grid 레이아웃 소개

Grid 레이아웃은 웹 페이지를 효율적으로 구성하기 위해 사용되는 CSS의 강력한 도구입니다. 웹 개발에서 응답성을 고려할 때, 복잡한 레이아웃을 간편하게 만들 수 있는 방법을 제공합니다. 그리드는 행과 열의 구조로 콘텐츠를 배치하여 디자인의 일관성을 유지합니다. 이를 통해 웹 페이지의 다양한 요소를 쉽고 유연하게 배치할 수 있습니다.

Grid 레이아웃의 장점

1. 모듈화: Grid를 사용하면 페이지를 여러 개의 구획으로 나누어 모듈화할 수 있습니다.
2. 간편한 위치 조정: 모든 요소를 행과 열로 나누기 때문에 각 요소를 이동시키거나 크기를 조정하기가 쉬워집니다.
3. 반응형 디자인: 미디어 쿼리와 함께 사용할 수 있어 다양한 화면 크기에 대응 가능합니다.

예제: 기본 Grid 레이아웃

아래의 HTML과 CSS 코드를 통해 간단한 Grid 레이아웃을 구현해 보겠습니다.

HTML

<div class="grid-container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
</div>

CSS

.grid-container {
    display: grid; /* 그리드 레이아웃을 활성화 */
    grid-template-columns: repeat(2, 1fr); /* 2열로 구성 */
    gap: 10px; /* 아이템 간의 간격 설정 */
}

.item {
    background-color: #4CAF50; /* 아이템 배경 색상 */
    color: white;
    padding: 20px;
    text-align: center;
}

이 코드는 기본적인 2열의 그리드 레이아웃을 만들고, 각 아이템에 배경색과 정렬을 적용하여 간단한 그리드 디자인을 구현합니다.

실습: 개인 포트폴리오 Grid 레이아웃 만들기

이제 여러분은 간단한 개인 포트폴리오 웹 페이지를 구상하여 Grid 레이아웃으로 만들어 볼 차례입니다.

요구사항:

1. 최소 4개의 콘텐츠 블록을 만들고 각각 다른 콘텐츠(프로필, 프로젝트, 스킬, 연락처)를 표시합니다.
2. Grid를 사용하여 페이지를 2열로 구성합니다.
3. 각 블록에 적절한 색상을 적용하고 중앙 정렬을 해주세요.

예상 결과 화면

여러분의 포트폴리오는 다음과 같은 모습일 것입니다:

+----------------+----------------+
|    프로필      |      프로젝트   |
+----------------+----------------+
|      스킬      |     연락처      |
+----------------+----------------+

자주 발생하는 오류 및 해결 방법

• 오류: 그리드가 제대로 보이지 않음

  • 해결 방법: display: grid; 속성이 누락되었는지 확인하세요. 모든 컨테이너에 이 속성이 필요합니다.

• 오류: 아이템 간의 간격이 발생하지 않음

  • 해결 방법: gap 속성이 설정되어 있는지 확인하세요. 간격을 주지 않으면 아이템이 붙어 보일 수 있습니다.

정리

이번 강의에서는 CSS Grid 레이아웃의 기본 개념과 사용 방법에 대해 설명드렸습니다. 그리드는 웹 페이지의 레이아웃을 짜는 데 큰 도움이 됩니다. 앞으로 더 많은 CSS 기능을 익혀가면서 그리드의 활용도를 높여보세요.