▶︎ 이미지 (Images)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>container</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<body>
<div class="container">
<h4>반응형 이미지</h4>
<img src="../files/Koala.jpg" class="img-fluid" alt="Responsive Image">
<br>
<h4>썸네일 이미지</h4>
<img src="../files/Koala.jpg" class="img-thumbnail" alt="thumbnail" width="200">
<h4>모서리를 둥글게 처리</h4>
<div class="text-center">
<img src="../files/Koala.jpg" class="rounded" alt="round" width="200">
</div>
<h4>이미지 정렬</h4>
<div class="row">
<div class="col-md-12">
<img src="../files/Koala.jpg" class="rounded float-end" width="200">
<img src="../files/Penguins.jpg" class="rounded float-start" width="200">
</div>
</div>
<br>
<h4>Figures(이미지와 이미지에 대한 설명)</h4>
<figure class="figure">
<img src="../files/Koala.jpg" class="figure-img img-fluid rounded" width="400" height="300">
<figcaption class="figure-caption">이미지 아래 설명</figcaption>
</figure>
<h4>텍스트 정렬하기</h4>
<figure class="figure">
<img src="../files/Penguins.jpg" class="figure-img img-fluid rounded" width="400" height="300">
<figcaption class="figure-caption text-end">이미지 아래 설명</figcaption>
</figure>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
▶︎ 테이블 (Tables)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>table</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h4>기본 table</h4>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>test</td>
</tr>
<tr>
<th>2</th>
<td>Mark</td>
<td>Otto</td>
<td>test</td>
</tr>
<tr>
<th>3</th>
<td>Mark</td>
<td>Otto</td>
<td>test</td>
</tr>
</tbody>
</table>
<h4>striped row</h4>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>test</td>
</tr>
<tr>
<th>2</th>
<td>Mark</td>
<td>Otto</td>
<td>test</td>
</tr>
<tr>
<th>3</th>
<td>Mark</td>
<td>Otto</td>
<td>test</td>
</tr>
</tbody>
</table>
<h4>테두리가 있는 table</h4>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>test</td>
</tr>
<tr>
<th>2</th>
<td>Mark</td>
<td>Otto</td>
<td>test</td>
</tr>
<tr>
<th>3</th>
<td>Mark</td>
<td>Otto</td>
<td>test</td>
</tr>
</tbody>
</table>
<h4>Hoverable rows</h4>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>test</td>
</tr>
<tr>
<th>2</th>
<td>Mark</td>
<td>Otto</td>
<td>test</td>
</tr>
<tr>
<th>3</th>
<td>Mark</td>
<td>Otto</td>
<td>test</td>
</tr>
</tbody>
</table>
<h4>테두리가 없는 table</h4>
<table class="table table-borderless">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>test</td>
</tr>
<tr>
<th>2</th>
<td>Mark</td>
<td>Otto</td>
<td>test</td>
</tr>
<tr>
<th>3</th>
<td>Mark</td>
<td>Otto</td>
<td>test</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
- Hoverable rows → 마우스 커서 올려두면 영역 선택됨
▶︎ 폼 (Forms)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>form</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h4>기본 form</h4>
<form>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="check1">
<label class="form-check-label">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<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">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password2">
</div>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
▶︎ 아코디언 (Accordion)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>accordion</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h4>Accordion</h4>
<div class="accordion" id="accordionExample" >
<div class="accordion-item">
<h2 class="accordion-header" id=headingOne>
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
Accordion Item #1
</button>
</h2>
<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>
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
내용이 보여지는 곳입니다. 질문에 대한 답변이 보여지게 처리할 수 있습니다.
</div>
</div>
</div><!-- end of item -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
- data-bs → 버튼이 자바스크립트와 연동됨
▶︎ 알림 (Alerts)
: 문맥에 맞은 색상 처리 가능
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>alert</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h4>Alert</h4>
<div class="alert alert-primary">
일반 알림 또는 경고로 사용할 수 있는 공간
</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>Alert 숨기기</h4>
<div class="alert alert-warning alert-dismissible fade show">
일반 알림 또는 경고로 사용할 수 있는 공간
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
- alert창 x 누르면 숨겨짐
▶︎ 뱃지 (Badge)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Badges</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<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-primary">New</span></h2>
<h3>Example heading <span class="badge bg-primary">New</span></h3>
<h4>Example heading <span class="badge bg-primary">New</span></h4>
<h5>Example heading <span class="badge bg-primary">New</span></h5>
<h6>Example heading <span class="badge bg-primary">New</span></h6>
<h4>Buttons</h4>
<button type="button" class="btn btn-secondary">
Notifications <span class="badge bg-primary">4</span>
</button>
<h4>Positioned</h4>
<button type="button" class="btn btn-primary position-relative">
Inbax
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
</span>
<span class="visually-hidden">읽지 않은 메시지</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
▶︎ 버튼 (Buttons)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Button</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<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>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
▶︎ 카드 (Cards)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<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>Card title</h5>
<p class="card-text">오늘은 날씨가 매우 좋아요~~</p>
<a href="#" class="btn btn-primary">Go someWhere</a><!-- a태그가 버튼 형태가 됨 -->
</div>
<h4>Body</h4>
<div class="card">
<div class="card-body">
본문의 내용이 위치합니다.
</div>
</div>
<h4>Titles, text, and links</h4>
<div class="card" style="width:18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h5 class="card-subtitle">Card subtitle</h5>
<p class="card-text">본문의 내용이 위치합니다.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
<h4>List group</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>
<li class="list-group-item">광주</li>
</ul>
</div>
<h4>List group - header</h4>
<div class="card" style="width:18rem;">
<div class="card-header">
Featured
</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>
<li class="list-group-item">광주</li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
▶︎ 캐러셀 (Carousel)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>carousel</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h4>기본</h4>
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<!-- indicator 시작 -->
<div class="carousel-indicators">
<!-- active는 하나만 명시 가능 -->
<button type="button" class="active" data-bs-target="#carouselExample" data-bs-slide-to="0"></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>
</div>
<!-- indicator 끝 -->
<!-- 이미지 표시 영역 시작 -->
<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 끝 -->
<!-- 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 끝 -->
<!-- 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>세번째 이미지에 대한 내용</p>
</div>
</div>
<!-- item 끝 -->
</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>
<h4>Crossfade</h4>
<div id="carouselExample" class="carousel slide carousel-fade" data-bs-ride="carousel">
<!-- indicator 시작 -->
<div class="carousel-indicators">
<button type="button" class="active" data-bs-target="#carouselExample" data-bs-slide-to="0"></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>
</div>
<!-- indicator 끝 -->
<!-- 이미지 표시 영역 시작 -->
<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 끝 -->
<!-- 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 끝 -->
<!-- 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>세번째 이미지에 대한 내용</p>
</div>
</div>
<!-- item 끝 -->
</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>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
→ 기본은 slide 형식으로, Crossfade는 페이드 형식으로 화면전환
▶︎ 모달 (Modal)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modal</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
기본 모달창 띄우기
<!-- 부모 영역을 선택하면 모달창이 사라짐 -->
</button>
<!-- 모달 시작 -->
<div class="modal fade" id="exampleModal">
<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 Changes</button>
</div>
</div>
</div>
</div>
<!-- 모달 끝 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2">
모달창 유지
<!-- 모달창이 보여지면 부모 영역을 선택할 수 없음 -->
</button>
<!-- 모달 시작 -->
<div class="modal fade" id="exampleModal2" data-bs-backdrop="static" data-bs-keyboard="false">
<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 Changes</button>
</div>
</div>
</div>
</div>
<!-- 모달 끝 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
- 기본 모달창 띄우기 클릭 시 창이 닫히지만, 모달창 유지 클릭 시 창이 닫히지 않음
