Search

masonry (๋ฒฝ๋Œ์Œ“๊ธฐ)

masonry (๋ฒฝ๋Œ์Œ“๊ธฐ)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" type="image/x-icon" href="./img/favicon.png"> <title>masonry</title> <!-- BS css--> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <section class="container py-5"> <div class="main-title py-5"> <h3 class="display-4 fw-bold text-body-emphasis text-center">masonry (๋ฒฝ๋Œ์Œ“๊ธฐ) ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ</h3> </div> <div class="row" data-masonry='{"percentPosition": true }'> <div class="col-sm-6 col-lg-4 mb-4"> <div class="card"> <img src="./img/about.png" alt="about"> <div class="card-body"> <h5 class="card-title">Card title that wraps to a new line</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> <div class="col-sm-6 col-lg-4 mb-4"> <div class="card p-3"> <figure class="p-3 mb-0"> <blockquote class="blockquote"> <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer mb-0 text-body-secondary"> Someone famous in <cite title="Source Title">Source Title</cite> </figcaption> </figure> </div> </div> <div class="col-sm-6 col-lg-4 mb-4"> <div class="card"> <img src="./img/about.png" alt="about"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="col-sm-6 col-lg-4 mb-4"> <div class="card text-bg-primary text-center p-3"> <figure class="mb-0"> <blockquote class="blockquote"> <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer mb-0 text-white"> Someone famous in <cite title="Source Title">Source Title</cite> </figcaption> </figure> </div> </div> <div class="col-sm-6 col-lg-4 mb-4"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This card has a regular title and short paragraph of text below it.</p> <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="col-sm-6 col-lg-4 mb-4"> <div class="card"> <img src="./img/about.png" alt="about"> </div> </div> <div class="col-sm-6 col-lg-4 mb-4"> <div class="card p-3 text-end"> <figure class="mb-0"> <blockquote class="blockquote"> <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer mb-0 text-body-secondary"> Someone famous in <cite title="Source Title">Source Title</cite> </figcaption> </figure> </div> </div> <div class="col-sm-6 col-lg-4 mb-4"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p> <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> </div> </div> </section> <!-- BS js--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <!-- masonry --> <script async src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"></script></body> </body> </html>
HTML
๋ณต์‚ฌ