<!DOCTYPE html>
<html lang="ko" data-bs-theme="light">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>bootstrap album page clone</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!--1. BootStrap용 CSS CDN 추가-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<!--3. BootStrap icon용 CSS CDN 추가-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<link rel="icon" href="https://getbootstrap.com//docs/5.3/assets/img/favicons/favicon.ico"></head>
<!-- 제이쿼리 추가-->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script><!--제이쿼리 슬림에선 동작안함-->
<script>
$(document).ready(function(){
$('img').css("border-radius", "5px 5px 0 0"); //모든 이미지의 위쪽테두리를 둥근 모서리로 // 이것만 해줘도 돼 걍 다 바뀜
$('#btnLight').addClass('active');
$('#btnLight').click(function(){
$('html').attr('data-bs-theme', 'light');
$(this).addClass('active');
$('#btnDark').removeClass('active');
});
$('#btnDark').click(function(){
$('html').attr('data-bs-theme', 'dark');
$(this).addClass('active');
$('#btnLight').removeClass('active');
});
});
</script>
<body>
<!--맨 바닥에 테마 다크라이트 변경 버튼영역-->
<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle" style="z-index: 100;" >
<button class="btn btn-primary py-2 dropdown-toggle d-flex align-items-center" data-bs-toggle="dropdown" id="bd-theme" type="button">
<i class="bi bi-brightness-high-fill"></i>
</button>
<ul class="dropdown-menu">
<li>
<button id="btnLight" type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="true">
<i class="bi bi-brightness-high-fill"></i>Light
</button>
</li>
<li><button id="btnDark" type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<i class="bi bi-moon-stars-fill"></i></i>Dark
</button>
</li>
</ul>
</div>
<!-- top 메뉴영역-->
<header data-bs-theme-value="dark">
<div class="collapse text-bg-dark" id="navbarHeader"> <!--collapse는 숨기는거 : 그래서 안나옴-->
<div class="container">
<div class="row">
<div class="col-sm-8 py-3"> <!--py-3 : padding y축에 3-->
<h4>About</h4>
<p class="text-secondary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur earum omnis unde quas totam obcaecati, quis repellendus facilis alias, culpa officia voluptates qui corrupti nam, itaque impedit fugiat? Praesentium, dicta.
</p>
</div>
<div class="col-sm-4 py-3">
<h4>Contect</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Twiter</a></li>
<li><a href="#" class="text-white">facebook</a></li>
<li><a href="#" class="text-white">Email me</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<i class="bi bi-camera"></i> <!-- : 뒤에 문자와 사이에 공백주기 -->
<strong>Album</strong>
</a>
<button type="button" class="navbar-toggler collapsed" data-bs-toggle="collapse" data-bs-target="#navbarHeader"
aria-controls="navbarHeader" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> <!-- collapse 접어두기 // data-bs-target 숨겨둔 navbarHeader-->
</div>
</div>
</header>
<!-- main 영역-->
<main>
<section class="py-5 text-center container">
<div class="row py-5">
<div class="col-6 mx-auto"> <!--col-6 : 중앙에 12중 6만 쓴다-->
<h1 class="fw-light">Album examle</h1>
<p class="lead text-body-secondary">
Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.
</p>
<p>
<a href="#" class="btn btn-primary my-2">Main call to action</a>
<a href="#" class="btn btn-secondary my-2">Sacondary action</a>
</p>
</div>
</div>
</section>
<div class="album py-5 bg-body-tertiary">
<div class="container">
<div class="row row-cols-3 g-3"> <!-- g-3 : gap을 3 줄게(사진박스 사이의 거리)-->
<!-- col 9개로 구성할 것-->
<div class="col">
<div class="card shadow-sm">
<img src="https://via.placeholder.com/400x225" width="100%" height="225" focusable="false">
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat perspiciatis magni totam eum dolore sequi iste, laboriosam at.
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-primary">View</button>
<button type="button" class="btn btn-sm btn-outline-primary">Edit</button>
</div>
<small class="text-body-secondary">10 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="https://via.placeholder.com/400x225" width="100%" height="225" focusable="false">
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat perspiciatis magni totam eum dolore sequi iste, laboriosam at.
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-primary">View</button>
<button type="button" class="btn btn-sm btn-outline-primary">Edit</button>
</div>
<small class="text-body-sacondary">10 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="https://via.placeholder.com/400x225" width="100%" height="225" focusable="false">
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat perspiciatis magni totam eum dolore sequi iste, laboriosam at.
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-primary">View</button>
<button type="button" class="btn btn-sm btn-outline-primary">Edit</button>
</div>
<small class="text-body-sacondary">10 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="https://via.placeholder.com/400x225" width="100%" height="225" focusable="false">
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat perspiciatis magni totam eum dolore sequi iste, laboriosam at.
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-primary">View</button>
<button type="button" class="btn btn-sm btn-outline-primary">Edit</button>
</div>
<small class="text-body-sacondary">10 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="https://via.placeholder.com/400x225" width="100%" height="225" focusable="false">
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat perspiciatis magni totam eum dolore sequi iste, laboriosam at.
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-primary">View</button>
<button type="button" class="btn btn-sm btn-outline-primary">Edit</button>
</div>
<small class="text-body-sacondary">10 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="https://via.placeholder.com/400x225" width="100%" height="225" focusable="false">
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat perspiciatis magni totam eum dolore sequi iste, laboriosam at.
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-primary">View</button>
<button type="button" class="btn btn-sm btn-outline-primary">Edit</button>
</div>
<small class="text-body-sacondary">10 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="https://via.placeholder.com/400x225" width="100%" height="225" focusable="false">
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat perspiciatis magni totam eum dolore sequi iste, laboriosam at.
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-primary">View</button>
<button type="button" class="btn btn-sm btn-outline-primary">Edit</button>
</div>
<small class="text-body-sacondary">10 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="https://via.placeholder.com/400x225" width="100%" height="225" focusable="false">
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat perspiciatis magni totam eum dolore sequi iste, laboriosam at.
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-primary">View</button>
<button type="button" class="btn btn-sm btn-outline-primary">Edit</button>
</div>
<small class="text-body-sacondary">10 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- footer 영역-->
<footer class="text-body-secondary py-5" >
<div class="container">
<p class="float-end mb-1">
<a href="#">Back to top</a>
</p>
<p class="mb-1">
Album site © Bootstrap.<!-- © : © 특수문자-->
</p>
<p class="mb-0">
<a href="https://getbootstrap.com" target="_blank">Visits the homepage</a>
</p>
</div>
</footer>
<!--2. BootStrap용 JS는 body태그 내 맨 아래에 위치해야 함-->
<!-- <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
crossorigin="anonymous">
</script>
</body>
</html>
kafa is kafa. not be something other.