이번 시간에는 Bootstrap으로 아코디언을 만들어보겠습니다.
1. 아코디언이란?
아코디언(Accordion)은 웹 디자인에서 자주 사용되는 UI 패턴 중 하나입니다. 아코디언은 섹션을 축소 및 확장할 수 있는 상호작용 컴포넌트로, 사용자가 특정 섹션을 선택하면 해당 섹션이 펼쳐지고, 다른 섹션들은 축소됩니다.
2. Bootstrap 불러오기
이 예제에서는 CDN으로 Bootstrap을 불러오겠습니다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
3. 전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body style="padding: 20px; text-align: center;">
<div class="d-grid gap-2 col-6 mx-auto">
<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" aria-expanded="true" aria-controls="collapseOne">
자주하는 질문
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>인공지능과 머신러닝의 차이는 무엇인가요?</strong>
인공지능은 인간의 지능적인 특성을 컴퓨터 시스템에 구현하는 더 큰 개념이며, 머신러닝은 그 중에서도 데이터 학습을 강조하는 특별한 기술이라고 볼 수 있습니다. 즉, 모든 머신러닝은 인공지능이지만, 모든 인공지능이 머신러닝은 아닙니다.
</div>
</div>
</div>
<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" aria-expanded="false" aria-controls="collapseTwo">
프로그래밍과 개발
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>JavaScript와 Python의 주요 차이는 무엇인가요?</strong>
JavaScript은 주로 웹 브라우저에서 클라이언트 측 웹 개발에 사용되며, Python은 웹 개발부터 데이터 분석, 인공지능, 자동화 등 다양한 분야에서 활용되는 범용 프로그래밍 언어입니다.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
웹 개발
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>SPA(Single Page Application)란 무엇인가요?</strong>
SPA는 "Single Page Application"의 약자로, 단일 페이지 애플리케이션을 나타냅니다. SPA는 전통적인 다중 페이지 애플리케이션(MPA, Multi-Page Application)과는 다르게 웹 애플리케이션의 모든 필요한 리소스를 최초에 한 번 로드하고, 이후에는 페이지 전환 시에 필요한 부분만 동적으로 업데이트하는 방식을 채택합니다.
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
4. 결과
5. 출처
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] Bootstrap의 Toast 기능 사용하기 (0) | 2024.04.08 |
|---|---|
| [HTML/CSS] 레이아웃 만들기 (0) | 2024.03.16 |
| [HTML/CSS] CTA 만들기 (0) | 2024.03.07 |
| [HTML/CSS] Bootstrap으로 네비게이션 드로어 만들기 (0) | 2024.02.24 |
| [HTML/CSS] 슬라이드쇼 만들기 (0) | 2024.02.16 |
