IT 국비 교육

쌍용교육센터 - 43일

개발자가 되고 싶어요 ㅣ 2024. 4. 18. 18:38

2024.04.18

BootStrap 기본 Format

<head>
<meta charset="UTF-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap</title>
<!-- Bootstrap 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">
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>

 

Grid

  • div를 table처럼 정렬하거나 나누는 방법
 
<body>
<!-- 
그리드 시스템
			Extra small		Small		Medium		Large		Extra Large 	XXL
			<576px			>=576px		>=768px		>=992px		>=1200px		>=1400px
class		.col-			.col-sm-	.col-md		.col-lg-	.col-xl-		.col-xxl-
 -->

<div class="container">
	<h4>12개 컬럼</h4>
	<div class="row">
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
	</div>
	<p>
	
	<h4>2개 컬럼</h4>
	<div class="row">
		<!-- 합이 12가 되면 됨, 한 행의 길이가 12-->
		<div class="col-md-8">.col-md8</div>
		<div class="col-md-4">.col-md4</div>
	</div>
	<p>
	
	<h4>같은 넓이</h4>
	<div class="row">
		<div class="col">
			1 of 2
		</div>
		<div class="col">
			2 of 2
		</div>
	</div>
	<p>
	
	<h4>중앙 컬럼은 숫자를 지정하고 좌,우 컬럼은 지정하지 않음</h4>
	<div class="row">
		<div class="col">
			1 of 3
		</div>
		<div class="col-6">
			2 of 3
		</div>
		<div class="col">
			3 of 3
		</div>
	</div>
	<p>

	<h4>컬럼들은 모바일에서 50% 넓이로 시작하고 데스크탑에서는 33.3% 넓이가 됨</h4>
	<div class="row">
		<div class="col-6 col-md-4">.col-6 .col-md-4</div>
		<div class="col-6 col-md-4">.col-6 .col-md-4</div>
		<div class="col-6 col-md-4">.col-6 .col-md-4</div>
	</div>
	<p>
	
	<h4>row-cols-를 이용해서 컬럼 수 지정</h4>
	<div class="row row-cols-2">
		<div class="col">Column</div>
		<div class="col">Column</div>
		<div class="col">Column</div>
		<div class="col">Column</div>
	</div>
	<p>
	
	<h4>row-cols-auto를 이용해서 컬럼 수 자동 지정</h4>
	<div class="row row-cols-auto">
		<div class="col">Column Column</div>
		<div class="col">Column Column</div>
		<div class="col">Column</div>
		<div class="col">Column Column</div>
	</div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>

 

Image

<body>
	<div class="container">
		<h4>반응형 이미지</h4>
		<img src="../files/Jellyfish.jpg" class="img-fluid">
		<p>
		
		<h4>썸네일 이미지</h4>
		<img src="../files/Penguins.jpg" class="img-thumbnail" width="200">
		<p>
		
		<h4>모서리를 둥글게 처리</h4>
		<img src="../files/landscape.jpg" class="rounded" width="200">
		<p>
		
		<h4>이미지 정렬</h4>
		<div class="row">
			<div class="col-md-12">
				<!-- float-start : 왼쪽, float-end : 오른쪽 -->
				<img src="../files/Koala.jpg" class="rounded float-end" width="200">
				<img src="../files/Penguins.jpg" class="rounded float-start" width="200">
			</div>
		</div>
		<p>
		
		<h4>Figures(이미지와 이미지에 대한 설명)</h4>
		<figure class="figure">
			<img src="../files/Penguins.jpg" width="400" height="300">
			<figcaption class="figure-caption">펭귄 이미지</figcaption>
		</figure>
		<p>
		
		<h4>Figures(이미지와 이미지에 대한 설명)</h4>
		<figure class="figure">
			<img src="../files/Penguins.jpg" width="400" height="300">
			<figcaption class="figure-caption text-end">펭귄 이미지</figcaption>
		</figure>
		<p>
	</div>
</body>

 

Table

<body>
	<div class="container">
		<h4>기본 table</h4>
		<table class="table">
			<thead>
				<tr>
					<th>#</th>
					<th>도시</th>
					<th>계절</th>
					<th>과일</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>서울</td>
					<td>봄</td>
					<td>사과</td>
				</tr>
				<tr>
					<td>2</td>
					<td>서울</td>
					<td>봄</td>
					<td>사과</td>
				</tr>
				<tr>
					<td>3</td>
					<td>서울</td>
					<td>봄</td>
					<td>사과</td>
				</tr>
			</tbody>
		</table>
		
		<!-- 아래부터 데이터 생략 -->
		
		<h4>어두운 배경</h4>
		<table class="table table-dark">
		
		<h4>테이블 헤더 옵션(어두운 색 헤더)</h4>
		<thead class="table-dark">
		
		<h4>테이블 헤더 옵션(밝은 색 헤더)</h4>
		<thead class="table-light">
		
		<h4>striped row</h4>
		<table class="table table-striped">
		
		<h4>bordered row</h4>
		<table class="table table-bordered">
		
		<h4>Hoverable row</h4>
		<table class="table table-hover">
		
	</div>
</body>

 

Form

  • 기본 form
  • Horizontal form
  • Floating labels : 최신 로그인 폼 형태
<body>
	<div class="container">
		<h4>기본 form</h4>
		<form>
			<div class="mb-3"><!-- mb-3 : 요소의 맨 아래에 1rem의 여백 추가 -->
				<label for="email" class="form-label">이메일</label>
				<input type="email" class="form-control" id="email"
					aria-describedby="emailHelp"><!-- aria-describedby : 컨트롤에 대한 설명을 제공하는 데 사용 -->
				<div id="emailHelp">타인과 공유하지 않는 이메일을 명시하시오.</div>
			</div>
			<div class="mb-3">
				<label for="password" class="form-label">비밀번호</label>
				<input type="password" class="form-control" id="password">
			</div>
			<!-- form-check : 라디오 버튼과 체크박스를 위한 CSS클래스 -->
			<div class="mb-3 form-check">
				<input type="checkbox" class="form=check-input" id="check1">
				<label class="form-check-label" for="check1">Check me out</label>
			</div>
			<button type="submit" class="btn btn-primary">Submit</button>
		</form>
		<p>
		
		<h4>Horizontal form</h4>
		<form>
			<div class="row mb-3">
				<label for="email2" class="col-sm-2 col-form-label">Email</label>
				<div class="col-sm-10">
					<input type="email" class="form-control" id="email2">
				</div>
			</div>
			<div class="row mb-3">
				<label for="password2" class="col-sm-2 col-form-label">비밀번호</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" id="password2">
				</div>
			</div>
			<div class="row mb-3">
				<div class="col-sm-10 offset-sm-2">
					<div class="form-check">
						<label class="form-check-label" for="check2">아이디 저장</label>
						<input class="form-check-input" type="checkbox" id="check2">
					</div>
				</div>
			</div>
			<button type="submit" class="btn btn-primary">Sign in</button>
		</form>
		<p>
		
		<h4>Floating labels</h4>
		<div class="form-floating mb-3">
			<input type="email" class="form-control" id="email3" placeholder="name@example.com">
			<label for="email3">Email address</label>
		</div>
		<div class="form-floating">
			<input type="password" class="form-control" id="password3" placeholder="Password">
			<label for="password3">Password</label>
		</div>
	</div>
</body>

 

Accordion

<body>
	<div class="container">
		<h4>기본 accordion</h4>
		<div class="accordion" id="accordionExample">
			<div class="accordion-item">
				<h2 class="accordion-header" id="headingOne">
															  <!-- data-bs-toggle : 클릭 시 데이터를 보여주고 숨겨주고 하는 역할을 하게 하는 자바스크립트와 연결 -->
							    							  							<!-- data-bs-target : 클릭했을 때 보여지는 데이터 명시 -->
					<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
						Accordion Item #1
					</button>
				</h2>
															<!-- data-bs-parent : 부모 데이터 값 상속 -->
				<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
					<div class="accordion-body">
						겨울이 지나가고 봄이 왔습니다. 야외 활동이 늘어나고 사람들이 많은 장소에 갈 때는 특히 조심하세요!!!
					</div>
				</div>
			</div><!-- end of item -->
			<div class="accordion-item">
				<h2 class="accordion-header" id="headingTwo">
															  <!-- data-bs-toggle : 클릭 시 데이터를 보여주고 숨겨주고 하는 역할을 하게 하는 자바스크립트와 연결 -->
							    							  							<!-- data-bs-target : 클릭했을 때 보여지는 데이터 명시 -->
											   <!-- collapsed : 여러 accordion을 펼칠 수 있음 -->
					<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
						Accordion Item #2
					</button>
				</h2>
															<!-- data-bs-parent : 부모 데이터 값 상속 -->
				<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
					<div class="accordion-body">
						겨울이 지나가고 봄이 왔습니다. 야외 활동이 늘어나고 사람들이 많은 장소에 갈 때는 특히 조심하세요!!!
					</div>
				</div>
			</div><!-- end of item -->
		</div>
		
		<!-- flush : 기본 accordion에서 테두리가 없고 아래 line만 있음 -->
		<h4>Flush</h4>
		<div class="accordion accordion-flush" id="accordionExample2">
			<div class="accordion-item">
				<h2 class="accordion-header" id="flush_headingOne">
															  <!-- data-bs-toggle : 클릭 시 데이터를 보여주고 숨겨주고 하는 역할을 하게 하는 자바스크립트와 연결 -->
							    							  							<!-- data-bs-target : 클릭했을 때 보여지는 데이터 명시 -->
					<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#flush_collapseOne">
						Accordion Item #1
					</button>
				</h2>
															<!-- data-bs-parent : 부모 데이터 값 상속 -->
				<div id="flush_collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample2">
					<div class="accordion-body">
						겨울이 지나가고 봄이 왔습니다. 야외 활동이 늘어나고 사람들이 많은 장소에 갈 때는 특히 조심하세요!!!
					</div>
				</div>
			</div><!-- end of item -->
			<div class="accordion-item">
				<h2 class="accordion-header" id="flush_headingTwo">
															  <!-- data-bs-toggle : 클릭 시 데이터를 보여주고 숨겨주고 하는 역할을 하게 하는 자바스크립트와 연결 -->
							    							  							<!-- data-bs-target : 클릭했을 때 보여지는 데이터 명시 -->
											   <!-- collapsed : 여러 accordion을 펼칠 수 있음 -->
					<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush_collapseTwo">
						Accordion Item #2
					</button>
				</h2>
															<!-- data-bs-parent : 부모 데이터 값 상속 -->
				<div id="flush_collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample2">
					<div class="accordion-body">
						겨울이 지나가고 봄이 왔습니다. 야외 활동이 늘어나고 사람들이 많은 장소에 갈 때는 특히 조심하세요!!!
					</div>
				</div>
			</div><!-- end of item -->
		</div>
	</div>
</body>

 

Alert

<body>
	<div class="container">
		<h4>Alert</h4>
		<div class="alert alert-primary">
			봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
		</div>
		<div class="alert alert-secondary">
			봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
		</div>
		<div class="alert alert-success">
			봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
		</div>
		<div class="alert alert-danger">
			봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
		</div>
		<div class="alert alert-warning">
			봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
		</div>
		<div class="alert alert-info">
			봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
		</div>
		<div class="alert alert-light">
			봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
		</div>
		<div class="alert alert-dark">
			봄철 산행을 조심하세요! 화기 취급이 금지되어 있습니다.
		</div>
		
		<h4>경고창 닫기</h4>
		<div class="alert alert-warning alert-dismissible fade show">
			환절기 건강 관리를 철저히 하세요!!
			<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
		</div>

	</div>
</body>

 

Badge

  • 기본 Badges : 색상이 채워져 있는 형태
  • Pill Badges : 색상이 채워져 있지 않은 형태
<body>
	<div class="container">
		<h4>기본 Badges</h4>
		<h1>Example heading
			<span class="badge bg-primary">New</span>
		</h1>
		<h2>Example heading
			<span class="badge bg-secondary">New</span>
		</h2>
		<h3>Example heading
			<span class="badge bg-success">New</span>
		</h3>
		<h4>Example heading
			<span class="badge bg-danger">New</span>
		</h4>
		<h5>Example heading
			<span class="badge bg-warning">New</span>
		</h5>
		<h6>Example heading
			<span class="badge bg-info">New</span>
		</h6>
		
		<h4>Pill badges</h4>
		<span class="badge rounded-pill bg-primary">Primary</span>
		<span class="badge rounded-pill bg-secondary">Secondary</span>
		<span class="badge rounded-pill bg-success">Success</span>
		<span class="badge rounded-pill bg-danger">Danger</span>
		<span class="badge rounded-pill bg-warning">Warning</span>
		<span class="badge rounded-pill bg-info">Info</span>
		<span class="badge rounded-pill bg-light text-dark">Light</span>
		<span class="badge rounded-pill bg-dark">Dark</span>
		
		<h4>Buttons</h4>
		<button type="button" class="btn btn-primary">
			Notifications <span class="badge bg-secondary">4</span>
		</button>
		
		<h4>Positioned</h4>
		<button type="button" class="btn btn-primary position-relative">
			Inbox <span class="position-absolute top-0 start-100 translate-middle rounded-pill badge bg-danger">
			99+ <span class="visually-hidden">unread messages</span>
			</span>
		</button>
		
	</div>
</body>

 

Button

<body>
<div class="container">
	<h4>Buttons</h4>
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-secondary">Secondary</button>
	<button type="button" class="btn btn-success">Success</button>
	<button type="button" class="btn btn-danger">Danger</button>
	<button type="button" class="btn btn-warning">Warning</button>
	<button type="button" class="btn btn-info">Info</button>
	<button type="button" class="btn btn-light">Light</button>
	<button type="button" class="btn btn-dark">Dark</button>
	
	<h4>outline Buttons</h4>
	<button type="button" class="btn btn-outline-primary">Primary</button>
	<button type="button" class="btn btn-outline-secondary">Secondary</button>
	<button type="button" class="btn btn-outline-success">Success</button>
	<button type="button" class="btn btn-outline-danger">Danger</button>
	<button type="button" class="btn btn-outline-warning">Warning</button>
	<button type="button" class="btn btn-outline-info">Info</button>
	<button type="button" class="btn btn-outline-light">Light</button>
	<button type="button" class="btn btn-outline-dark">Dark</button>
	
	<h4>Button group</h4>
	<div class="btn-group">
		<button type="button" class="btn btn-primary">Left</button>
		<button type="button" class="btn btn-primary">Middle</button>
		<button type="button" class="btn btn-primary">Right</button>
	</div>
	
	<h4>Active Link</h4>
	<div class="btn-group">
		<a href="#" class="btn btn-primary active">Active link</a>
		<a href="#" class="btn btn-primary">link</a>
		<a href="#" class="btn btn-primary">link</a>
	</div>
	
	<h4>Outlined styles</h4>
	<div class="btn-group">
		<button type="button" class="btn btn-outline-primary">Left</button>
		<button type="button" class="btn btn-outline-primary">Middle</button>
		<button type="button" class="btn btn-outline-primary">Right</button>
	</div>
	
	<h4>Checkbox button group</h4>
	<div class="btn-group">
		<input type="checkbox" class="btn-check" id="btncheck1">
		<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
		
		<input type="checkbox" class="btn-check" id="btncheck2">
		<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
		
		<input type="checkbox" class="btn-check" id="btncheck3">
		<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
	</div>
	
	
	<h4>Radio button group</h4>
	<div class="btn-group">
		<input type="radio" class="btn-check" id="btnradio1" name="btnradio">
		<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
		
		<input type="radio" class="btn-check" id="btnradio2" name="btnradio">
		<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
		
		<input type="radio" class="btn-check" id="btnradio3" name="btnradio">
		<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
	</div>
</div>
</body>

 

Card

네이버 이벤트 상자

<body>
	<div class="container">
		<h4>Cards</h4>
		<div class="card" style="width:18rem;">
			<img src="../files/Koala.jpg" class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">Card title</h5>
				<p class="card-text">여름에는 더운 날씨로 온열질환자가 많이 발생함</p>
				<a href="#" class="btn btn-success">관련 자료 보기</a>
			</div>
		</div>
		
		<h4>Body</h4>
		<div class="card">
			<div class="card-body">
				이 곳은 card body에 들어가 있는 텍스트가 보여지는 곳입니다.
			</div>
		</div>
		
		<h4>List groups</h4>
		<div class="card" style="width:18rem;">
			<ul class="list-group list-group-flush">
				<li class="list-group-item">서울</li>
				<li class="list-group-item">부산</li>
				<li class="list-group-item">대구</li>
			</ul>
		</div>
		
		<h4>header를 가진 card</h4>
		<div class="card" style="width:18rem;">
			<div class="card-header">
				서울의 교통
			</div>
			<ul class="list-group list-group-flush">
				<li class="list-group-item">서울</li>
				<li class="list-group-item">부산</li>
				<li class="list-group-item">대구</li>
			</ul>
		</div>
		
		<h4>Navigation</h4>
		<div class="card text-center">
			<div class="card-header">
				<ul class="nav nav-tabs card-header-tabs">
					<li class="nav-item">
						<a href="#" class="nav-link active">Active</a>
					</li>
					<li class="nav-item">
						<a href="#" class="nav-link">Link</a>
					</li>
					<li class="nav-item">
						<a href="#" class="nav-link">City</a>
					</li>
				</ul>
			</div>
			<div class="card-body">
				<h5 class="card-title">겨울 여행</h5>
				<p class="card-text">겨울에 기차로 여해을 떠나보세요</p>
				<a href="#" class="btn btn-primary">겨울 여행 신청하기</a>
			</div>
		</div>
		
		
		<h4>pill형태의 Navigation</h4>
		<div class="card text-center">
			<div class="card-header">
				<ul class="nav nav-pills card-header-pills">
					<li class="nav-item">
						<a href="#" class="nav-link active">Active</a>
					</li>
					<li class="nav-item">
						<a href="#" class="nav-link">Link</a>
					</li>
					<li class="nav-item">
						<a href="#" class="nav-link">City</a>
					</li>
				</ul>
			</div>
			<div class="card-body">
				<h5 class="card-title">겨울 여행</h5>
				<p class="card-text">겨울에 기차로 여해을 떠나보세요</p>
				<a href="#" class="btn btn-primary">겨울 여행 신청하기</a>
			</div>
		</div>
		
	</div>
</body>

 

Carousel

대문 이벤트 관련

  • 기본 Carousel : 슬라이드 효과
  • Crossfade Carousel : 사라짐 효과
<body>
	<div class="container">
		<h4>기본 Carousel</h4>
		<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
			<div class="carousel-indicators">
				<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></button>
				<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1"></button>
				<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2"></button>
				<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="3"></button>
			</div>
			<div class="carousel-inner">
				<!-- 첫번째 item -->
				<div class="carousel-item active">
					<img src="../files/Koala02.jpg" class="d-block w-100">
					<div class="carousel-caption">
						<h5>First slide label</h5>
						<p>코알라 이미지~~</p>
					</div>
				</div>
				<!-- 두번째 item -->
				<div class="carousel-item">
					<img src="../files/Penguins02.jpg" class="d-block w-100">
					<div class="carousel-caption">
						<h5>Second slide label</h5>
						<p>펭귄 이미지~~</p>
					</div>
				</div>
				<!-- 세번째 item -->
				<div class="carousel-item">
					<img src="../files/Lighthouse02.jpg" class="d-block w-100">
					<div class="carousel-caption">
						<h5>Third slide label</h5>
						<p>Lighthouse 이미지~~</p>
					</div>
				</div>
				<!-- 네번째 item -->
				<div class="carousel-item">
					<img src="../files/Tulips02.jpg" class="d-block w-100">
					<div class="carousel-caption">
						<h5>Fourth slide label</h5>
						<p>Tulip 이미지~~</p>
					</div>
				</div>
			</div>
			<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
				<span class="carousel-control-prev-icon"></span>
				<span class="visually-hidden">Previous</span>
			</button>
			<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
				<span class="carousel-control-next-icon"></span>
				<span class="visually-hidden">Next</span>
			</button>
		</div>
		<p>
		
		
		<h4>Crossfade</h4>
		<div id="carouselExample2" class="carousel slide carousel-fade" data-bs-ride="carousel">
			<div class="carousel-indicators">
				<button type="button" data-bs-target="#carouselExample2" data-bs-slide-to="0" class="active"></button>
				<button type="button" data-bs-target="#carouselExample2" data-bs-slide-to="1"></button>
				<button type="button" data-bs-target="#carouselExample2" data-bs-slide-to="2"></button>
				<button type="button" data-bs-target="#carouselExample2" data-bs-slide-to="3"></button>
			</div>
			<div class="carousel-inner">
				<!-- 첫번째 item -->
				<div class="carousel-item active">
					<img src="../files/Koala02.jpg" class="d-block w-100">
					<div class="carousel-caption">
						<h5>First slide label</h5>
						<p>코알라 이미지~~</p>
					</div>
				</div>
				<!-- 두번째 item -->
				<div class="carousel-item">
					<img src="../files/Penguins02.jpg" class="d-block w-100">
					<div class="carousel-caption">
						<h5>Second slide label</h5>
						<p>펭귄 이미지~~</p>
					</div>
				</div>
				<!-- 세번째 item -->
				<div class="carousel-item">
					<img src="../files/Lighthouse02.jpg" class="d-block w-100">
					<div class="carousel-caption">
						<h5>Third slide label</h5>
						<p>Lighthouse 이미지~~</p>
					</div>
				</div>
				<!-- 네번째 item -->
				<div class="carousel-item">
					<img src="../files/Tulips02.jpg" class="d-block w-100">
					<div class="carousel-caption">
						<h5>Fourth slide label</h5>
						<p>Tulip 이미지~~</p>
					</div>
				</div>
			</div>
			<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample2" data-bs-slide="prev">
				<span class="carousel-control-prev-icon"></span>
				<span class="visually-hidden">Previous</span>
			</button>
			<button class="carousel-control-next" type="button" data-bs-target="#carouselExample2" data-bs-slide="next">
				<span class="carousel-control-next-icon"></span>
				<span class="visually-hidden">Next</span>
			</button>
		</div>
		
	</div>
</body>

 

List

<body>
<div class="container">
	<h4>List group</h4>
	<ul class="list-group">
		<li class="list-group-item">서울</li>
		<li class="list-group-item">부산</li>
		<li class="list-group-item">대구</li>
		<li class="list-group-item">광주</li>
		<li class="list-group-item">인천</li>
	</ul>
	
	<h4>Active items</h4>
	<ul class="list-group">
		<li class="list-group-item active">서울</li>
		<li class="list-group-item">부산</li>
		<li class="list-group-item">대구</li>
		<li class="list-group-item">광주</li>
		<li class="list-group-item">인천</li>
	</ul>
	
	<h4>Links and buttons</h4>
	<div class="list-group">
		<a href="#" class="list-group-item list-group-item-action active">한국</a>
		<a href="#" class="list-group-item list-group-item-action">독일</a>
		<a href="#" class="list-group-item list-group-item-action">영국</a>
		<a href="#" class="list-group-item list-group-item-action">미국</a>
		<a href="#" class="list-group-item list-group-item-action">호주</a>
	</div>
	
	<h4>badges</h4>
	<ol class="list-group list-group-numbered">
							  <!-- d-flex : 세로로 정렬되어 있는 내용을 가로로 정렬 -->
		<li class="list-group-item d-flex justify-content-between align-items-start">
			<div class="ms-2 me-auto">
				<div class="fw-bold">Subheading</div>
				Content for list item
			</div>
			<span class="badge bg-primary rounded-pill">14</span>
		</li>
		<li class="list-group-item d-flex justify-content-between align-items-start">
			<div class="ms-2 me-auto">
				<div class="fw-bold">Subheading</div>
				Content for list item
			</div>
			<span class="badge bg-primary rounded-pill">14</span>
		</li>
		<li class="list-group-item d-flex justify-content-between align-items-start">
			<div class="ms-2 me-auto">
				<div class="fw-bold">Subheading</div>
				Content for list item
			</div>
			<span class="badge bg-primary rounded-pill">14</span>
		</li>
	</ol>
</div>
</body>

 

Modal

  • 기본 modal : 배경 누르면 창 꺼짐
  • Static Backdrop modal : 배경 누르면 창 꺼지지 않고 흔들림 효과
<body>
	<div class="container">
		<h4>기본 modal</h4>
		<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#basicModal">
			기본 modal
		</button>
		
		<!-- Modal 창 -->
		<div class="modal fade" id="basicModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Modal title</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
					</div>
					<div class="modal-body">
						여름이다!!!
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-primary">Save</button>
					</div>
				</div>
			</div>
		</div>
		
		<h4>Static backdrop</h4>
		<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
			static backdrop modal
		</button>
		
		<!-- Modal 창 -->
		<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Modal title</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
					</div>
					<div class="modal-body">
						여름이다!!!
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-primary">Save</button>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</body>

 

Navbar(Menu)

<body>
	<div class="container">
		<h4>기본 navbar</h4>
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<div class="container-fluid">
				<a href="#" class="navbar-brand">Logo</a>
				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
					<span class="navbar-toggler-icon"></span>
				</button>
				<!-- 메뉴 시작 -->
				<div class="collapse navbar-collapse" id="navbarContent">
					<ul class="navbar-nav me-auto mb-2 mb-lg-0">
						<li class="nav-item">
							<a class="nav-link active" href="#">Home</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Product</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-bs-toggle="dropdown">
								Dropdown
							</a>
							<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
								<li><a class="dropdown-item" href="#">사원소개</a></li>
								<li><a class="dropdown-item" href="#">제품소개</a></li>
								<!-- dropdown 줄 긋기 -->
								<li><hr class="dropdown-divider"></li>
								<li><a class="dropdown-item" href="#">회사소개</a></li>
							</ul>
						</li>
					</ul>
					<form class="d-flex">
						<input type="search" class="form-control me-2" placeholder="Search">
						<button class="btn btn-outline-success">Search</button>
					</form>
				</div>
			</div>
		</nav>
		
		<h4>navbar 배경색 변경</h4>
		<!-- 
		검정색 : bg-dark, navbar-dark 설정
		다른 색상 : style="background-color:#색상코드;"
		-->
		<nav class="navbar navbar-expand-lg navbar-light" style="background-color:#e3f3fd;">
			<div class="container-fluid">
				<a href="#" class="navbar-brand">Logo</a>
				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent2">
					<span class="navbar-toggler-icon"></span>
				</button>
				<!-- 메뉴 시작 -->
				<div class="collapse navbar-collapse" id="navbarContent2">
					<ul class="navbar-nav me-auto mb-2 mb-lg-0">
						<li class="nav-item">
							<a class="nav-link active" href="#">Home</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Product</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-bs-toggle="dropdown">
								Dropdown
							</a>
							<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
								<li><a class="dropdown-item" href="#">사원소개</a></li>
								<li><a class="dropdown-item" href="#">제품소개</a></li>
								<!-- dropdown 줄 긋기 -->
								<li><hr class="dropdown-divider"></li>
								<li><a class="dropdown-item" href="#">회사소개</a></li>
							</ul>
						</li>
					</ul>
					<form class="d-flex">
						<input type="search" class="form-control me-2" placeholder="Search">
						<button class="btn btn-outline-primary">Search</button>
					</form>
				</div>
			</div>
		</nav>
	</div>
</body>

 

Pagination

<body>
	<div class="container">
		<h4>기본 Pagination</h4>
		<nav>
			<ul class="pagination">
				<li class="page-item"><a href="#" class="page-link">이전</a></li>
				<li class="page-item"><a href="#" class="page-link">1</a></li>
				<li class="page-item"><a href="#" class="page-link">2</a></li>
				<li class="page-item"><a href="#" class="page-link">3</a></li>
				<li class="page-item"><a href="#" class="page-link">4</a></li>
				<li class="page-item"><a href="#" class="page-link">5</a></li>
				<li class="page-item"><a href="#" class="page-link">6</a></li>
				<li class="page-item"><a href="#" class="page-link">7</a></li>
				<li class="page-item"><a href="#" class="page-link">8</a></li>
				<li class="page-item"><a href="#" class="page-link">9</a></li>
				<li class="page-item"><a href="#" class="page-link">10</a></li>
				<li class="page-item"><a href="#" class="page-link">다음</a></li>
			</ul>
		</nav>
		
		<h4>Disabled and active states</h4>
		<nav>
			<ul class="pagination">
				<li class="page-item dissabled"><a class="page-link">이전</a></li>
				<li class="page-item active"><a href="#" class="page-link">1</a></li>
				<li class="page-item"><a href="#" class="page-link">2</a></li>
				<li class="page-item"><a href="#" class="page-link">3</a></li>
				<li class="page-item"><a href="#" class="page-link">4</a></li>
				<li class="page-item"><a href="#" class="page-link">5</a></li>
				<li class="page-item"><a href="#" class="page-link">6</a></li>
				<li class="page-item"><a href="#" class="page-link">7</a></li>
				<li class="page-item"><a href="#" class="page-link">8</a></li>
				<li class="page-item"><a href="#" class="page-link">9</a></li>
				<li class="page-item"><a href="#" class="page-link">10</a></li>
				<li class="page-item"><a href="#" class="page-link">다음</a></li>
			</ul>
		</nav>
		
	</div>
</body>
저작자표시

'IT 국비 교육' 카테고리의 다른 글

쌍용교육센터 - 45일  (0) 2024.04.22
쌍용교육센터 - 44일  (0) 2024.04.19
쌍용교육센터 - 42일  (0) 2024.04.17
쌍용교육센터 - 41일  (0) 2024.04.16
쌍용교육센터 - 40일  (0) 2024.04.15
IT 국비 교육 다른글

티스토리툴바