728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">-->
<link rel="stylesheet" href="./bootstrap/bootstrap.min.css"> <!-- ํด๋๋ก ๋ถํธ์คํธ๋ฉ ์ฌ์ฉ์ ์๋๋น ๋ฆ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Carousel(ํ์ ๋ชฉ๋ง:๋์๊ฐ๋์ด๋ฏธ์ง) -->
<h1 class="text-center mb-5">component:carousel</h1>
<h2 class="text-center mb-4">๊ธฐ๋ณธ์ ์ธ ์ฌ์ฉ ์</h2>
<div class="container">
<div id="carouselSample" class="carousel slide" data-ride="carousel">
<!--indicator(์ด๋ํ ์ ์๋ ๋ฐ)-->
<ol class="carousel-indicators">
<li data-target="#carouselSample" data-slide-to="0" class="active">
<li data-target="#carouselSample" data-slide-to="1">
<li data-target="#carouselSample" data-slide-to="2">
</ol>
<div class="carousel-inner">
<!-- first-slide -->
<div class="carousel-item active">
<img alt="first" class="d-block w-100" src="https://images.pexels.com/photos/2355519/pexels-photo-2355519.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260 ">
</div>
<!-- caption -->
<div class="carousel-caption d-none d-md-block">
<h5>๊ณ ์์ด ํฐ</h5>
<p>์ฌ๋ผ์ด๋์ ์บก์
๋ด์ฉ</p>
</div>
<!-- second-slide -->
<div class="carousel-item">
<img alt="first" class="d-block w-100" src="https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
</div>
<!-- caption -->
<div class="carousel-caption d-none d-md-block">
<h5>๊ธ๋ถ์ด</h5>
<p>์ฌ๋ผ์ด๋์ ์บก์
๋ด์ฉ</p>
</div>
<!-- third-slide -->
<div class="carousel-item">
<img alt="first" class="d-block w-100" src="photo.jpg">
</div>
<!-- caption -->
<div class="carousel-caption d-none d-md-block">
<h5>ํจ์
</h5>
<p>์ฌ๋ผ์ด๋์ ์บก์
๋ด์ฉ</p>
</div>
<!-- controller ๋ถ๋ถ -->
<a class="carousel-control-prev" href="#carouselSample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">์์ผ๋ก</span>
</a>
<a class="carousel-control-next" href="#carouselSample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">๋ค์์ผ๋ก</span>
</a>
</div>
</div>
</div>
</body>
</html>'๐ HTML\CSS > ๐ฐ๏ธ ๋ถํธ ์คํธ๋ฉ BootStrap' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| โค๏ธ ์ธ์คํ๊ทธ๋จ ๋ชจ๋ฐ์ผ ๊ตฌํ - 1์ผ์ฐจ Main, Login, Create (0) | 2021.02.26 |
|---|---|
| 1๏ธโฃ 1๏ธโฃ ๋ถํธ ์คํธ๋ฉ (BootStrap) - Modal ๋ชจ๋ฌ (0) | 2021.02.26 |
| 9๏ธโฃ๋ถํธ ์คํธ๋ฉ (BootStrap) - Carousel ์นด๋ฃจ์ (0) | 2021.02.26 |
| 8๏ธโฃ๋ถํธ ์คํธ๋ฉ (BootStrap) - Dropdown (0) | 2021.02.26 |
| 7๏ธโฃ๋ถํธ ์คํธ๋ฉ (BootStrap) - Check box (0) | 2021.02.26 |
๋๊ธ