한국어

Bootstrap 튜토리얼

Bootstrap 레이아웃

Bootstrap 콘텐츠

Bootstrap 컴포넌트

Bootstrap 폼

부트스트랩 도우미

Bootstrap 유틸리티

Bootstrap 데모

부트스트랩 - 메이소리 데모

부트스트랩 메이소리 소개

안녕하세요, 열망하는 웹 개발자 여러분! 오늘 우리는 부트스트랩 메이소리의 흥미로운 세상으로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 안내해 드리기 위해 설레고 있습니다. 코드를 한 줄도 작성해 본 적이 없더라도 걱정하지 마세요 - 우리는 단계별로 차근차근 진행하며, 곧 프로처럼 아름답고 동적인 레이아웃을 만들 수 있을 것입니다!

Bootstrap-Masonry Demo

메이소리는 무엇인가요?

부트스트랩 메이소리는 다양한 높이의 요소들로 이루어진 그리드를 만들 수 있는 강력한 레이아웃 기술입니다. 다양한 크기의 벽돌들이 완벽하게 맞물리는 벽을 상상해 보세요 - 그것이 메이소리의 본질입니다! 이미지 갤러리, 포트폴리오, 또는 공간 낭비 없이 깔끔하고 정리된 모습을 원하는 모든 콘텐츠에 매우 유용합니다.

부트스트랩 메이소리 시작하기

프로젝트 설정

코드로 들어가기 전에 우리 프로젝트를 설정해 보겠습니다. Bootstrap과 메이소리 라이브러리를 HTML 파일에 포함시켜야 합니다. 이게 처음에는 혼란스러울 수 있지만, 걱정하지 마세요 - 우리는 각 부분을 차례대로 설명하면서 진행할 것입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Masonry Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 우리 콘텐츠가 여기 들어갑니다 -->

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js"></script>
</body>
</html>

이를 구분해 보겠습니다:

  1. 우리는 기본 HTML 구조를 시작합니다.
  2. <head> 부분에서 Bootstrap CSS 파일에 링크합니다.
  3. <body> 부분의 하단에 Bootstrap과 메이소리 JavaScript 파일을 포함시킵니다.

이 파일들은 우리가 메이소리 레이아웃을 만들기 위한 도구를 제공합니다.

첫 번째 메이소리 레이아웃 만들기

이제 몇 개의 컬러풀한 상자로 간단한 메이소리 레이아웃을 만들어 보겠습니다. <body> 태그 안에 다음 코드를 추가합니다:

<div class="container my-5">
    <div class="row" data-masonry='{"percentPosition": true }'>
        <div class="col-sm-6 col-lg-4 mb-4">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h5 class="card-title">상자 1</h5>
                    <p class="card-text">이 상자는 짧습니다.</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-4">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5 class="card-title">상자 2</h5>
                    <p class="card-text">이 상자는 약간 더 높습니다. 메이소리가 조정할 거예요!</p>
                    <p class="card-text">잘 맞아요.</p>
                </div>
            </div>
        </div>
        <!-- 더 많은 상자를 여기 추가하세요 -->
    </div>
</div>

이를 구분해 보겠습니다:

  1. 우리는 컨테이너와 그 안의 행을 만듭니다.
  2. data-masonry='{"percentPosition": true }' 속성은 이 행에 메이소리 레이아웃을 사용하도록 지정합니다.
  3. 각 상자는 열 (col-sm-6 col-lg-4) 안에 카드로 만들어집니다.
  4. 우리는 다양한 배경색(bg-primary, bg-success)를 사용하여 상자를 시각적으로 구분합니다.

메이소리 레이아웃 커스터마이징

이제 기본 레이아웃을 가지고 있으므로, 커스터마이징 방법을 탐구해 보겠습니다.

다양한 크기의 요소 추가

메이소리의 아름다움 중 하나는 다양한 크기의 요소를 처리하는 방식입니다. 몇 개의 추가 상자를 추가해 보겠습니다:

<div class="col-sm-6 col-lg-4 mb-4">
    <div class="card bg-warning">
        <div class="card-body">
            <h5 class="card-title">상자 3</h5>
            <p class="card-text">이 상자는 정말 높습니다!</p>
            <p class="card-text">많은 콘텐츠가 있습니다.</p>
            <p class="card-text">메이소리는 완벽하게 맞춰줄 거예요.</p>
            <p class="card-text">높이가 어떻게 되든 간에.</p>
        </div>
    </div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
    <div class="card bg-info">
        <div class="card-body">
            <h5 class="card-title">상자 4</h5>
            <p class="card-text">다시 짧은 상자로 돌아갑니다.</p>
        </div>
    </div>
</div>

메이소리 레이아웃에 이미지 추가

메이소리는 이미지 갤러리에 매우 적합합니다. 우리는 몇 개의 이미지를 레이아웃에 추가해 보겠습니다:

<div class="col-sm-6 col-lg-4 mb-4">
    <div class="card">
        <img src="https://picsum.photos/300/200" class="card-img-top" alt="랜덤 이미지">
        <div class="card-body">
            <h5 class="card-title">이미지 카드</h5>
            <p class="card-text">이 카드에 이미지가 있습니다.</p>
        </div>
    </div>
</div>

이 코드는 Lorem Picsum에서 랜덤 이미지를 로드하는 카드를 추가합니다. 이미지는 300x200 픽셀로 로드되지만, 다른 크기로 조정할 수 있습니다.

고급 기술

메이소리 아이템 필터링

추가 기능 중 하나는 메이소리 아이템을 필터링할 수 있는 기능입니다. 몇 개의 필터 버튼과 아이템 카테고리를 추가해 보겠습니다:

<div class="container my-5">
    <div class="mb-3">
        <button class="btn btn-primary filter-btn" data-filter="all">모두 보기</button>
        <button class="btn btn-secondary filter-btn" data-filter="category1">카테고리 1</button>
        <button class="btn btn-secondary filter-btn" data-filter="category2">카테고리 2</button>
    </div>
    <div class="row" id="masonry-grid" data-masonry='{"percentPosition": true }'>
        <div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category1">
            <!-- 아이템 콘텐츠 -->
        </div>
        <div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category2">
            <!-- 아이템 콘텐츠 -->
        </div>
        <!-- 더 많은 아이템... -->
    </div>
</div>

이를 작동시키기 위해 JavaScript를 추가해야 합니다:

<script>
document.addEventListener('DOMContentLoaded', function() {
    var grid = document.querySelector('#masonry-grid');
    var msnry = new Masonry(grid, {
        percentPosition: true
    });

    var filterButtons = document.querySelectorAll('.filter-btn');
    filterButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            var filterValue = this.getAttribute('data-filter');
            var items = grid.querySelectorAll('.masonry-item');

            items.forEach(function(item) {
                if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });

            msnry.layout();
        });
    });
});
</script>

이 스크립트는 다음을 수행합니다:

  1. 메이소리를 그리드에 초기화합니다.
  2. 필터 버튼에 클릭 이벤트 리스너를 추가합니다.
  3. 버튼이 클릭되면, 아이템을 카테고리에 따라 보이게 하거나 숨김 처리합니다.
  4. 필터링 후, msnry.layout()을 호출하여 가시적인 아이템을 다시 배치합니다.

결론

축하합니다! 여러분은 첫 번째 부트스트랩 메이소리 레이아웃을 만들었습니다. 기본 그리드에서 고급 필터링까지, 이제 동적인 반응형 레이아웃을 만들 수 있는 도구를 가지고 있습니다.

웹 개발을 승리하기 위한 열쇠는 연습입니다. 다양한 콘텐츠, 레이아웃, 기능을 실험해 보세요. 실수를 두려워 말아요 - 그것이 가장 중요한 교훈을 배우는 방법입니다.

계속 빌드하고, 계속 배우고, 가장 중요한 것은 즐겁게 하세요! 곧 여러분의 레이아웃이 최고의 장인도 부러워할 정도로 될 것입니다. 행복한 코딩을!

Credits: Image by storyset

이전 튜토리얼:
Bootstrap-고정 푸터 네비게이션 바 데모
다음 튜토리얼:
부트스트랩 시작 템플릿 데모