CSS Grid를 활용한 풀 스크린 랜딩 페이지 만들기

18 Sep 2023

풀 스크린 랜딩 페이지는 사용자가 웹 사이트에 접속했을 때 전체 화면에 컨텐츠가 표시되는 페이지입니다. 이번 튜토리얼에서는 CSS Grid를 사용하여 풀 스크린 랜딩 페이지를 만드는 방법을 알아보겠습니다.

HTML 구조 설정하기

먼저 HTML 문서를 작성하고 구조를 설정해야 합니다. 아래는 예시로 제공되는 HTML 구조입니다.

<!DOCTYPE html>
<html>
<head>
    <title>풀 스크린 랜딩 페이지</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>환영합니다!</h1>
        </header>
        <section>
            <h2>페이지 내용을 여기에 추가하세요.</h2>
        </section>
        <footer>
            <p>&copy; 2022 풀 스크린 랜딩 페이지</p>
        </footer>
    </div>
</body>
</html>

CSS Grid를 활용한 레이아웃 설정하기

CSS Grid를 사용하여 풀 스크린 랜딩 페이지에 레이아웃을 설정해보겠습니다. 아래는 제공되는 CSS 코드입니다.

.container {
    display: grid;
    height: 100vh; /* 전체 화면 높이로 설정 */
    grid-template-rows: auto 1fr auto; /* 헤더, 콘텐츠, 푸터 영역 설정 */
    justify-items: center; /* 내용 가운데 정렬 */
}

header, footer {
    background-color: #eee;
    padding: 20px;
}

section {
    display: flex;
    align-items: center;
    justify-content: center;
}

위의 코드를 styles.css 파일로 저장한 후 HTML 문서에 연결합니다. 이제 container 클래스를 가진 <div> 요소가 풀 스크린으로 화면을 채우고, 헤더와 푸터가 위와 아래에 고정되며, 콘텐츠 영역은 중앙에 배치됩니다.

추가적인 스타일링

만약 풀 스크린 미디어를 제공하고자 하는 경우, @media 쿼리를 사용하여 추가적인 스타일링을 할 수 있습니다. 예를 들어, 풀 스크린 랜딩 페이지에서 모바일 기기에서는 다른 레이아웃을 사용하고 싶을 경우 아래와 같이 스타일링을 추가할 수 있습니다.

@media screen and (max-width: 768px) {
    /* 모바일 화면에 대한 스타일링 */
    .container {
        grid-template-rows: auto 1fr;
    }
    footer {
        display: none; /* 푸터 숨김 */
    }
}

이제 모바일 화면에서는 푸터가 숨겨지고, 콘텐츠 영역이 전체 화면을 차지합니다.

마치며

이렇게 CSS Grid를 활용하여 풀 스크린 랜딩 페이지를 만들 수 있습니다. CSS Grid의 강력한 기능을 이용하면 다양한 레이아웃을 구성할 수 있으니, 다양한 디자인 아이디어를 시도해보세요!

#WebDevelopment #CSSGrid