5.3 실전 예제: 복잡한 레이아웃

약 6분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

5.3 실전 예제: 복잡한 레이아웃

이번 섹션에서는 CSS Grid를 사용한 복잡한 레이아웃을 만들어보겠습니다. CSS Grid는 레이아웃을 구성하는 데 매우 유용한 도구로, 2차원 배치가 가능하기 때문에 다양한 형태의 웹 페이지를 쉽게 설계할 수 있습니다. 우리가 만들 레이아웃은 일반적인 블로그 페이지의 형태를 가지며, 헤더, 콘텐츠, 사이드바, 푸터를 포함합니다.

다음은 우리가 만들 HTML 구조입니다. 여기에는 헤더, 메인 콘텐츠 영역, 사이드바, 그리고 푸터가 포함됩니다. 이 구조를 기반으로 CSS Grid를 적용하여 복잡한 레이아웃을 생성하겠습니다.

코드 html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>블로그 페이지</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header id="header">블로그 헤더</header>
    <div id="container">
        <main id="main">메인 콘텐츠</main>
        <aside id="sidebar">사이드바</aside>
    </div>
    <footer id="footer">블로그 푸터</footer>
</body>
</html>

이제 위의 HTML 구조를 스타일링하여 레이아웃을 완성해보겠습니다. 아래는 CSS 코드입니다. 여기서 중요한 점은 Grid가 각 요소를 어떻게 배치하는지를 설정하는 것입니다.

코드 css

/* 기본적인 레이아웃 설정 */
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

#container {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 메인 콘텐츠는 3, 사이드바는 1의 비율로 배치 */
    grid-template-rows: auto 1fr; /* 행은 자동 높이 및 남은 공간 균등 배분 */
    grid-template-areas: 
        "header header"
        "main sidebar"
        "footer footer";
}

#header {
    grid-area: header;
    background: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

#main {
    grid-area: main;
    background: #f4f4f4;
    padding: 20px;
}

#sidebar {
    grid-area: sidebar;
    background: #ddd;
    padding: 20px;
}

#footer {
    grid-area: footer;
    background: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

실습 예제에서는 'styles.css' 파일을 생성하고 위의 CSS 코드를 추가한 후, 'index.html' 파일을 웹 브라우저에서 열어 확인할 수 있습니다. 각 영역이 적절히 배치되었는지 확인해주세요.

이제 실습 과제를 수행해 보겠습니다. 아래의 요구사항을 만족하는 레이아웃으로 수정해보세요:

메인 콘텐츠의 너비를 70%, 사이드바의 너비를 30%로 변경합니다.
헤더와 푸터의 배경색을 파란색으로 변경합니다.
콘텐츠와 사이드바의 여백을 10px으로 추가합니다.

수정이 완료되면 브라우저에서 새로 고침하여 레이아웃이 어떻게 변했는지 확인하세요. 자주 발생하는 오류로는 CSS 파일이 올바르게 연결되지 않거나, CSS 선택자가 제대로 적용되지 않는 경우가 있습니다. 이럴 땐 파일 경로와 선택자를 다시 한 번 점검하세요.

최종적으로, 이번 과정을 통해 CSS Grid를 활용하여 복잡한 구조의 웹 페이지 레이아웃을 만드는 방법을 배웠습니다. CSS Grid는 레이아웃을 설계하는 데 매우 효율적이며, 다양한 디자인을 쉽게 구현할 수 있습니다. 이러한 기본 개념을 바탕으로 더 많은 실습을 통해 이해도를 높여보세요.

5.3 실전 예제: 복잡한 레이아웃

5.3 실전 예제: 복잡한 레이아웃

댓글 0