๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐ŸŒ HTML\CSS/๐Ÿ›ฐ๏ธ ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ BootStrap

๐Ÿ”Ÿ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ (BootStrap) - Carousel + ์นด๋ฃจ์…€ ์‘์šฉ

by Meteora_ 2021. 2. 26.
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

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”