<!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>기본 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">
<!-- data-bs-target="#collapseOne"를 하고 버튼을 누르면 아래에 <div id="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 collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseTwo">
<!-- data-bs-target="#collapseOne"를 하고 버튼을 누르면 아래에 <div id="collapseOne" 가 펼쳐진다. -->
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>
<h4>Flush</h4>
<div class="accordion accordion-flush" id="accordionExample2">
<div class="accordion-item">
<!-- 제목 -->
<h2 class="accordion-header" id="flush_headingOne">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#flush_collapseOne">
<!-- data-bs-target="#collapseOne"를 하고 버튼을 누르면 아래에 <div id="collapseOne" 가 펼쳐진다. -->
Accordion Item #1
</button>
</h2>
<!-- 내용 -->
<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">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush_collapseTwo">
<!-- data-bs-target="#collapseOne"를 하고 버튼을 누르면 아래에 <div id="collapseOne" 가 펼쳐진다. -->
Accordion Item #2
</button>
</h2>
<!-- 내용 -->
<div id="flush_collapseTwo" class="accordion-collapse collapse"
data-bs-parent="#accordionExample2">
<div class="accordion-body">겨울이 지나가고 봄이 왔습니다. 야외 활동이 늘어나고
사람들이 많은 장소에 갈 때는 특히 조심하세요.</div>
</div>
</div>
<!--end of item -->
</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>
s09_alert.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>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>
<!-- 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>
