s11_buttons.html
<!DOCTYPE html>
<html lang="ko">
<!-- 언어지정 -->
<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">
</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>
<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 groups</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 groups</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>
<!-- 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>
</html>
s12_card.html
<!DOCTYPE html>
<html lang="ko">
<!-- 언어지정 -->
<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">
</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 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><!-- active는 여기만 쓴다. -->
</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>
<!-- 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>
</html>
s13_carousel.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<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">
<div class="carousel-item active">
<img src="../files/Koala02.jpg" class="d-block w-100" alt="First slide">
<div class="carousel-caption">
<h5>First slide label</h5>
<p>코알라 이미지~~</p>
</div>
</div>
<div class="carousel-item">
<img src="../files/Penguins02.jpg" class="d-block w-100" alt="Second slide">
<div class="carousel-caption">
<h5>Second slide label</h5>
<p>펭귄 이미지~~</p>
</div>
</div>
<div class="carousel-item">
<img src="../files/Lighthouse02.jpg" class="d-block w-100" alt="Third slide">
<div class="carousel-caption">
<h5>Third slide label</h5>
<p>Lighthouse 이미지~~</p>
</div>
</div>
<div class="carousel-item">
<img src="../files/Tulips02.jpg" class="d-block w-100" alt="Fourth slide">
<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" aria-hidden="true"></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" aria-hidden="true"></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">
<div class="carousel-item active">
<img src="../files/Koala02.jpg" class="d-block w-100" alt="First slide">
<div class="carousel-caption">
<h5>First slide label</h5>
<p>코알라 이미지~~</p>
</div>
</div>
<div class="carousel-item">
<img src="../files/Penguins02.jpg" class="d-block w-100" alt="Second slide">
<div class="carousel-caption">
<h5>Second slide label</h5>
<p>펭귄 이미지~~</p>
</div>
</div>
<div class="carousel-item">
<img src="../files/Lighthouse02.jpg" class="d-block w-100" alt="Third slide">
<div class="carousel-caption">
<h5>Third slide label</h5>
<p>Lighthouse 이미지~~</p>
</div>
</div>
<div class="carousel-item">
<img src="../files/Tulips02.jpg" class="d-block w-100" alt="Fourth slide">
<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" aria-hidden="true"></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" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
s14_list.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<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-actions">호주</a>
</div>
<h4>badges</h4>
<ol calss ="list-group list-group-numbered">
<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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
s15_modal.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
</head>
<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>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>
s16_navbar.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
</head>
<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>
<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>
<!--
검정색 : navbar-dark bg-dark 설정
다른색상: style="background-color:#e3f3fd;"
-->
<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>
<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>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>
s17_pagination.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
</head>
<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">
<!-- disabled: 클릭이 안되도록함 -->
<li class="page-item disabled"><a class="page-link">이전</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item active"><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>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>
