프론트엔드 개발에 있어 CSS Grid는 레이아웃을 구성하는 강력한 도구입니다. 이번 포스팅에서는 CSS Grid를 활용하여 간단한 반응형 포트폴리오 웹사이트를 만드는 방법에 대해 알아보겠습니다. 이 과정은 기본적인 HTML과 CSS 지식이 있는 분들을 대상으로 하며, 실제 예제를 통해 쉽게 따라할 수 있도록 구성하였습니다.

프로젝트 구조 설정

먼저, 프로젝트의 기본 구조를 설정합니다. 다음과 같은 파일 구성을 만들어 주세요.

/portfolio
  ├── index.html
  └── styles.css

HTML 구조 작성

이제 index.html 파일을 열고 기본적인 HTML 구조를 작성하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>반응형 포트폴리오 웹사이트</title>
</head>
<body>
    <header>
        <h1>내 포트폴리오</h1>
    </header>
    <main>
        <section class="grid-container">
            <article class="grid-item">프로젝트 1</article>
            <article class="grid-item">프로젝트 2</article>
            <article class="grid-item">프로젝트 3</article>
            <article class="grid-item">프로젝트 4</article>
            <article class="grid-item">프로젝트 5</article>
            <article class="grid-item">프로젝트 6</article>
        </section>
    </main>
    <footer>
        <p>© 2023 내 이름. All Rights Reserved.</p>
    </footer>
</body>
</html>

위 코드는 간단한 포트폴리오 웹사이트의 기본 구조를 설정합니다. 각 프로젝트는 grid-item 클래스를 가진 article 요소로 구성되어 있습니다.

CSS 스타일링

이제 styles.css 파일을 열어 CSS를 작성하겠습니다.

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 1em 0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    padding: 16px;
}

.grid-item {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    transition: transform 0.2s;
}

.grid-item:hover {
    transform: scale(1.05);
}

footer {
    text-align: center;
    padding: 1em 0;
    background-color: #4CAF50;
    color: white;
}

위 CSS 코드는 다음과 같은 기능을 수행합니다:

  1. grid-container 클래스는 CSS Grid를 사용하여 열을 자동으로 채우도록 만들고, 각 열의 최소 너비를 250px로 설정했습니다. 이를 통해 화면 크기에 따라 자동으로 열 수가 조정됩니다.
  2. grid-item 클래스는 각 프로젝트 항목에 스타일을 적용하여 일관된 디자인을 유지합니다. 마우스를 올렸을 때 살짝 확대되는 효과도 추가했습니다.

반응형 웹사이트 확인하기

이제 브라우저에서 index.html 파일을 열어 반응형 포트폴리오 웹사이트를 확인해보세요. 화면 크기를 조정하면, 프로젝트 항목들이 자동으로 재배치되는 것을 볼 수 있습니다. 이는 CSS Grid의 강력한 기능으로, 다양한 화면 크기에서 어떤 레이아웃이든 쉽게 만들어낼 수 있습니다.

마무리

이번 포스팅에서는 CSS Grid를 이용하여 간단한 반응형 포트폴리오 웹사이트를 만드는 방법을 알아보았습니다. 실제 코드를 작성하면서 CSS Grid의 기초를 익힐 수 있었던 좋은 기회가 되었기를 바랍니다. 앞으로도 다양한 CSS 레이아웃 기법과 프론트엔드 기술에 대해 지속적으로 공부해보세요.