잡지 스타일 레이아웃에 CSS 그리드 사용

by

CSS는 뛰어난 유연성을 제공하여 시선을 사로잡고 반응성이 뛰어난 레이아웃 디자인을 가능하게 합니다. 특히, 잡지 스타일 레이아웃은 텍스트와 이미지를 조화롭게 배치하여 매력적이고 독특한 시각적 경험을 선사하기 때문에 널리 사용됩니다.

이러한 레이아웃을 구현하는 데 있어 CSS 그리드는 필수적인 도구입니다. 세밀한 제어 기능을 제공하여 원하는 대로 콘텐츠를 배치할 수 있게 해주므로, 익혀두면 매우 유용한 기술입니다.

잡지 스타일 레이아웃이란 무엇일까요?

잡지 스타일 레이아웃은 그리드 구조를 활용하여 콘텐츠를 열과 행으로 정렬합니다. 이러한 레이아웃은 기사, 사진, 광고 등 다양한 콘텐츠 유형을 보기 좋고 체계적으로 보여주는 데 효과적입니다.

CSS 그리드 완벽 해부

CSS 그리드는 2차원 공간에 요소를 배치하는 강력한 레이아웃 시스템입니다. 이를 통해 열과 행을 쉽게 만들 수 있습니다.

CSS 그리드 레이아웃은 두 가지 주요 구성 요소로 이루어집니다. 먼저, 그리드 구조를 정의하는 그리드 컨테이너가 있으며, 그 안에 배치되는 개별 요소들을 그리드 항목이라고 부릅니다.

다음은 CSS 그리드를 사용하여 3×3 그리드를 구성하는 간단한 예시 코드입니다.

 .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.grid-item {
    background-color: #f76a6a;
    padding: 20px;
}

위 코드는 동일한 너비를 가진 세 개의 열과, 항목 사이 간격이 20픽셀인 그리드 컨테이너를 정의합니다. 결과는 다음과 같습니다:

HTML 구조 설계

잡지 스타일 레이아웃을 위해서는 잘 짜여진 HTML 구조가 필수입니다. 콘텐츠를 구성할 때 <article> 및 <section>과 같은 시맨틱 요소를 사용하는 것을 고려해보세요. 아래 예시 코드를 시작점으로 활용할 수 있습니다.

 <body>
    <section class="magazine-layout">
        <article>
            <img src="https://source.unsplash.com/random/?city,night" />
            <p>기사 제목 예시</p>
        </article>
        <article> 
            <img src="https://source.unsplash.com/random/?city,day" />
            <p>기사 제목 예시</p>
        </article>
        <article> 
            <img src="https://source.unsplash.com/random/?animal" />
            <p>기사 제목 예시</p>
        </article>
        <article>
            <img src="https://source.unsplash.com/random/?book" />
            <p>기사 제목 예시</p>
        </article>
        <article>
            <img src="https://source.unsplash.com/random/?food" />
            <p>기사 제목 예시</p>
        </article>
    </section>
</body>

그리드 컨테이너 설정

잡지 스타일 레이아웃에 사용할 그리드를 만들려면 다음 CSS 코드를 추가하세요.

 .magazine-layout {
    height: 100%;
    max-width: 130rem;
    margin: 0 auto;
    
    display: grid;
    
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    
    grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

이 CSS 코드는 .magazine-layout이라는 컨테이너 요소가 그리드 컨테이너임을 지정하고, `display: grid` 속성을 사용합니다.

`grid-template-columns`와 `grid-template-rows` 속성은 `repeat`, `auto-fit`, 그리고 `minmax`를 조합하여 사용됩니다. 이는 열 너비와 행 높이가 최소 250픽셀을 유지하면서, 가능한 많은 항목들이 각 행/열에 들어가도록 유연하게 배치되도록 합니다.

그리드 항목 배치하기

이제 각각의 기사와 내용을 스타일링하여 매력적인 썸네일 스타일의 요소를 만들어 보겠습니다.

 article {
    overflow: hidden;
    border-radius: 0.5rem;
    position: relative;
    color: #fff;
}
.article img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-height: 400px;
}
.article p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2rem;
    background: #333333c1;
    font-size: 2rem;
    border-radius: 0.5rem;
}

이 시점에서 웹페이지는 다음과 같은 모습이어야 합니다:

잡지 스타일 레이아웃 완성

진정한 잡지 스타일의 느낌을 살리기 위해, 원하는 순서대로 기사 요소를 확장하는 CSS 스타일을 추가해 보겠습니다.

 .article:nth-child(1) {
    grid-column: 1 / span 3;
}
.article:nth-child(4) {
    grid-column: 2 / span 2;
}

이제 페이지는 다음과 같이 보일 것입니다:

CSS 그리드를 이용한 반응형 디자인

CSS 그리드의 큰 장점 중 하나는 뛰어난 반응성입니다. 미디어 쿼리를 사용하여 다양한 화면 크기에 맞게 레이아웃을 쉽게 조정할 수 있습니다. 다음은 그 예입니다:

 
@media screen and (max-width: 1100px) {
    .article:nth-child(3) {
        grid-column: 2 / span 2;
    }
    .article:nth-child(5) {
        grid-row: 3 / span 1;
    }
}

@media screen and (max-width: 600px) {
    .article:nth-child(2),
    .article:nth-child(3),
    .article:nth-child(4),
    .article:nth-child(5) {
        grid-column: 1 / span 3;
    }
}

이러한 미디어 쿼리는 장치 화면 크기에 따라 여러 레이아웃 정의 사이를 전환합니다. 결과적으로 최종 레이아웃은 다양한 크기에 맞게 최적화됩니다.

CSS 그리드로 레이아웃 변형하기

CSS 그리드는 다양한 화면 크기에 적합한 잡지 스타일 레이아웃을 만들 수 있는 매우 유연한 도구입니다. 그리드 구조를 정의하고, 항목을 배치하고, 필요에 따라 레이아웃을 수정할 수 있습니다.

다양한 그리드 구성과 스타일을 시도해 보면서 잡지에서 영감을 얻은 완벽한 웹사이트 레이아웃을 만들어 보세요.