1. 아래 부트스트랩에서의 기본 예제를 들어 설명하시오.
card<!-- code1 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>bootstrap card</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" </script> </head> <body> <div class="card" style="width: 18rem"> <img class="card-img" src="https://musictaj.com/wp-content/uploads/2024/02/Nowruz-Songs-1403-MusicTaj.webp" alt="" /> <div class="card-body"> <h5 class="card-title">Sale nu Mobarak!</h5> <h6 class="card-subtitle mb-2 text-muted">Persian New Year</h6> <p class="card-text">Congrats for Nowruz 1403!</p> <a href="#" class="btn btn-success">Mobarak!</a> <a href="#" class="card-link">Persian Calender</a> </div> </div> </body> </html>
carousel<!-- code2 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>carousel</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" </script> </head> <body class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="body" data-bs-slide-to="0" class="active" aria-current="true" </button> <button type="button" data-bs-target="body" data-bs-slide-to="1"></button> <button type="button" data-bs-target="body" data-bs-slide-to="2"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://littlespicejar.com/wp-content/uploads/2023/02/Ghormeh-Sabzi-4.jpg" class="d-block w-100" alt="" /> </div> <div class="carousel-item"> <img src="https://www.thespruceeats.com/thmb/a3ySdn1xD0iwwVK62a6FQwbmlzw=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/fesenjan-recipe-6752768-hero-01-e0ae8d958e2a4b3bafead261d59e2aa7.jpg" class="d-block w-100" alt="" /> </div> <div class="carousel-item"> <img src="https://goodoldvegan.com/wp-content/uploads/2022/02/Persian-Noodle-Soup-Vegan-Ash-Reshteh.jpg" class="d-block w-100" alt="" /> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="body" data-bs-slide="prev" <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="body" data-bs-slide="next" <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </body> </html>
Brave but clumsy