비전공자의 비급코딩
HTML•CSS

CSS Grid를 사용해 반응형 디자인을 구축하기

나매니저 ㅣ 2024. 5. 27. 15:16

오늘은 CSS Grid를 사용해 반응형 디자인을 구축하는 방법에 대해 알아보려고 합니다. CSS Grid는 강력한 레이아웃 시스템으로, 복잡한 웹 페이지 레이아웃을 간단하게 만들 수 있도록 도와줍니다. 이 글에서는 CSS Grid의 기본 개념부터 시작해서, 실제 프로젝트에서 어떻게 활용할 수 있는지 구체적인 예제를 들어볼게요.

 

CSS Grid란 무엇인가요?

CSS Grid는 2차원 레이아웃 시스템으로, 행(row)과 열(column)을 사용하여 요소들을 배치할 수 있습니다. Flexbox가 1차원 레이아웃(단일 행 또는 열)을 다루는 데 비해, Grid는 2차원 레이아웃을 훨씬 쉽게 만들 수 있도록 도와줍니다.

먼저, CSS Grid의 기본 개념을 알아볼까요?

 

그리드 컨테이너와 그리드 아이템

Grid 레이아웃을 사용하려면 먼저 그리드 컨테이너와 그리드 아이템을 정의해야 합니다. 그리드 컨테이너는 `display: grid` 속성을 가지며, 그 안에 포함된 자식 요소들이 그리드 아이템이 됩니다.

CSS Grid Example
1
2
3
4
5
6
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Example</title>
    <style>
        .grid-container {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto;
        }
        .grid-item {
            background-color: #8ac4d0;
            padding: 20px;
            border: 1px solid #333;
            text-align: center;
        }
    </style>
</head>
<body>
    <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>
</body>
</html>



위의 예제에서 `.grid-container`는 그리드 컨테이너이고, `.grid-item`은 그리드 아이템입니다. `grid-template-columns` 속성은 3개의 동일한 너비의 열을 생성합니다.

그리드 템플릿

`grid-template-columns`와 `grid-template-rows` 속성을 사용하여 그리드의 행과 열을 정의할 수 있습니다. 예를 들어, 다음과 같이 특정 너비와 높이를 설정할 수 있습니다.

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



이 설정은 다음과 같은 그리드를 만듭니다:
- 첫 번째 열: 100px
- 두 번째 열: 200px
- 세 번째 열: 100px
- 첫 번째 행: 50px
- 두 번째 행: 100px

 

그리드 갭

그리드 아이템 간의 간격을 `gap` 속성으로 설정할 수 있습니다. 

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

 

 

 

반응형 디자인

반응형 디자인은 다양한 화면 크기에 적응하는 레이아웃을 만드는 것을 의미합니다. CSS Grid를 사용하면 미디어 쿼리를 통해 쉽게 반응형 디자인을 구현할 수 있습니다. 

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
}


위의 설정은 화면 크기에 따라 자동으로 적응하는 그리드를 생성합니다. `auto-fit`과 `minmax`를 사용하여 최소 너비가 100px인 열을 만들고, 남은 공간을 균등하게 분할합니다.

예제 : 반응형 갤러리

이제 실제 예제를 통해 반응형 갤러리를 만들어보겠습니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Gallery</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="gallery">
        <div class="gallery-item">1</div>
        <div class="gallery-item">2</div>
        <div class="gallery-item">3</div>
        <div class="gallery-item">4</div>
        <div class="gallery-item">5</div>
        <div class="gallery-item">6</div>
        <div class="gallery-item">7</div>
        <div class="gallery-item">8</div>
        <div class="gallery-item">9</div>
    </div>
</body>
</html>

 


CSS 코드 

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    width: 90%;
    max-width: 1200px;
}

.gallery-item {
    background-color: #8ac4d0;
    padding: 20px;
    border: 1px solid #333;
    text-align: center;
    font-size: 1.5em;
}




위의 예제에서는 `gallery` 클래스에 `grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));`를 사용하여 반응형 갤러리를 만들었습니다. 이는 화면 크기에 따라 열의 개수가 자동으로 조정됩니다.

이제 그리드 아이템을 특정 위치에 배치하는 고급 기법을 알아보겠습니다.

그리드 라인

그리드 라인을 사용하여 그리드 아이템을 정확한 위치에 배치할 수 있습니다. 그리드 라인은 그리드의 시작과 끝을 정의하는 가상의 선입니다.

CSS 코드 

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

.grid-item:first-child {
    grid-column: 1 / 3; /* 1번부터 3번 라인까지 차지 */
    grid-row: 1 / 3; /* 1번부터 3번 라인까지 차지 */
}

 

위의 예제에서는 첫 번째 그리드 아이템이 첫 번째와 두 번째 열, 첫 번째와 두 번째 행을 차지하도록 설정했습니다.

네임드 그리드 라인

네임드 그리드 라인을 사용하면 그리드 라인에 이름을 부여하여 더 직관적으로 아이템을 배치할 수 있습니다. 

.grid-container {
    display: grid;
    grid-template-columns: [col-start] 1fr [col-middle] 1fr [col-end];
    grid-template-rows: [row-start] 100px [row-middle] 100px [row-end];
}

.grid-item:first-child {
    grid-column: col-start / col-middle;
    grid-row: row-start / row-middle;
}

 



마지막으로, 앞서 배운 내용을 종합하여 반응형 웹 페이지를 만들어 보겠습니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Web Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">Header</header>
    <nav class="nav">Navigation</nav>
    <main class="main">
        <section class="content">Main Content</section>
        <aside class="sidebar">Sidebar</aside>
    </main>
    <footer class="footer">Footer</footer>
</body>
</html>



CSS 코드 

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.header, .nav, .main, .content, .sidebar, .footer {
    padding: 20px;
    border: 1px solid #333;
    text-align: center;
}

.header {
    background-color: #f8b400;
}

.nav {
    background-color

: #f85f36;
}

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

.content {
    background-color: #8ac4d0;
}

.sidebar {
    background-color: #ffc857;
}

.footer {
    background-color: #333;
    color: white;
}

@media (min-width: 600px) {
    .main {
        grid-template-columns: 2fr 1fr;
    }
}



위의 예제에서는 간단한 반응형 웹 페이지를 만들었습니다. 화면 크기가 600px 이상일 때, 메인 콘텐츠와 사이드바가 나란히 배치되도록 설정했습니다.


오늘은 CSS Grid를 사용하여 반응형 디자인을 만드는 방법을 배워봤습니다. 기본 개념부터 고급 기법까지 다양한 예제를 통해 CSS Grid의 강력한 기능을 살펴봤는데요, 실제 프로젝트에서 유용하게 활용할 수 있을 것입니다.

CSS Grid는 매우 유연하고 강력한 레이아웃 도구이므로, 여러 번 연습하고 다양한 레이아웃을 만들어보세요!

'HTML•CSS' 카테고리의 다른 글

페이퍼로지 폰트 워드프레스 추가 (엘리멘토)  (10) 2024.10.16
padding 속성으로 내부 여백 지정하기 (모든 경우의 수)  (0) 2024.05.27
커스텀 체크박스 만들기  (0) 2024.05.16
체크박스, 라디오 버튼, 토글 스위치의 차이점  (0) 2024.05.16
애니메이션 버튼 만들기  (0) 2024.05.16
HTML•CSS 다른글

티스토리툴바