Html & Css

CSS와 Javascript로 구현하는 Masonry 레이아웃 가이드

0

Masonry 레이아웃은 Pinterest에서 볼 수 있는 것처럼 아이템이 겹치지 않도록 정렬된 불규칙한 그리드 레이아웃입니다. 이를 통해 콘텐츠를 더욱 효율적으로 배치할 수 있으며, 사용자에게 시각적으로 매력적인 디자인을 제공합니다. 오늘은 CSS와 JavaScript를 활용하여 Masonry 레이아웃을 구현하는 방법을 자세히 알아보겠습니다.

1. CSS Grid와 JavaScript를 활용하는 방법

CSS Grid와 JavaScript 라이브러리를 결합하여 Masonry 레이아웃을 구현하는 방법입니다.

HTML 구조

먼저, Masonry 레이아웃을 적용할 HTML 구조를 작성합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Masonry Layout</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
</head>
<body>
    <div class="grid">
        <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>
    <script src="script.js"></script>
</body>
</html>

CSS 스타일링

CSS 파일에서 그리드 아이템의 기본 스타일을 정의합니다.

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

.grid {
    display: flex;
    width: 100%;
}

.grid-item {
    width: 30%;
    margin-bottom: 16px;
    background-color: #bada55;
    padding: 16px;
    border: 1px solid #ddd;
    font-size: 24px;
    box-sizing: border-box;
}

JavaScript 초기화

JavaScript 파일에서 Masonry 레이아웃을 초기화합니다.

// script.js
document.addEventListener('DOMContentLoaded', function () {
    var grid = document.querySelector('.grid');
    var msnry = new Masonry(grid, {
        // options
        itemSelector: '.grid-item',
        columnWidth: '.grid-item',
        percentPosition: true
    });
});

2. CSS Columns를 사용하는 방법

CSS Columns를 사용하여 Masonry 레이아웃을 구현하는 방법도 있습니다. 이 방법은 자바스크립트 없이 CSS만으로 간단히 구현할 수 있습니다.

HTML 구조

HTML 파일에서 그리드 아이템을 포함합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Masonry Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="masonry">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <!-- 더 많은 아이템 -->
    </div>
</body>
</html>

CSS 스타일링

CSS 파일에서 CSS Columns를 사용하여 Masonry 레이아웃을 구현합니다.

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

.masonry {
    column-count: 3;
    column-gap: 16px;
}

.item {
    background-color: #bada55;
    padding: 16px;
    margin-bottom: 16px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

결론

  • CSS Grid와 JavaScript: CSS Grid를 사용해 기본적인 그리드 구조를 만들고, `masonry-layout` 라이브러리를 사용하여 JavaScript로 각 아이템의 배치를 동적으로 조정합니다. 이 방법은 레이아웃의 안정성을 높이며, 다양한 화면 크기에 대응할 수 있습니다.
  • CSS Columns: CSS Columns를 사용해 Masonry 레이아웃을 간단히 구현합니다. 이 방법은 자바스크립트가 필요 없으므로 간편하지만, 아이템의 순서가 변경될 수 있다는 단점이 있습니다.

이렇게 CSS와 JavaScript를 활용하여 Masonry 레이아웃을 구현하는 방법을 알아보았습니다. CSS Grid와 JavaScript를 결합한 방법은 더 안정적이며 다양한 브라우저 환경에서도 잘 동작합니다. CSS Columns 방법은 간단하지만, 아이템의 순서가 중요하지 않은 경우에 적합합니다. 필요에 맞게 적절한 방법을 선택하여 Masonry 레이아웃을 구현해 보세요.

답글 남기기