반응형
세로형 아코디언(Vertical Accordion) 코드를 작성하려면, HTML, CSS, 그리고 JavaScript를 이용하여 구현할 수 있습니다. 여기서는 HTML로 아코디언의 구조를 만들고, CSS로 디자인을 스타일링하며, JavaScript로 아코디언 기능을 추가하는 방식으로 작성하겠습니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세로형 아코디언</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="accordion-container">
<div class="accordion-item">
<button class="accordion-header">항목 1</button>
<div class="accordion-content">
<p>항목 1의 내용입니다.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">항목 2</button>
<div class="accordion-content">
<p>항목 2의 내용입니다.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">항목 3</button>
<div class="accordion-content">
<p>항목 3의 내용입니다.</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (style.css)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
padding: 20px;
}
.accordion-container {
width: 300px;
margin: 0 auto;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.accordion-item {
border-bottom: 1px solid #ddd;
}
.accordion-header {
width: 100%;
padding: 15px;
text-align: left;
background-color: #f1f1f1;
border: none;
cursor: pointer;
font-size: 16px;
font-weight: bold;
transition: background-color 0.3s;
}
.accordion-header:hover {
background-color: #e1e1e1;
}
.accordion-content {
padding: 15px;
background-color: #fafafa;
display: none;
font-size: 14px;
color: #333;
}
JavaScript (script.js)
// 모든 아코디언 헤더를 가져옵니다.
const accordionHeaders = document.querySelectorAll('.accordion-header');
// 각 아코디언 항목에 클릭 이벤트를 추가합니다.
accordionHeaders.forEach(header => {
header.addEventListener('click', function() {
const content = this.nextElementSibling;
// 해당 항목이 열려 있으면 닫고, 닫혀 있으면 열기
if (content.style.display === 'block') {
content.style.display = 'none';
} else {
// 다른 열려 있는 항목을 닫기
document.querySelectorAll('.accordion-content').forEach(item => {
item.style.display = 'none';
});
content.style.display = 'block';
}
});
});
설명:
- HTML:
- accordion-container는 모든 아코디언 항목을 감싸는 컨테이너입니다.
- 각 아코디언 항목은 accordion-item 클래스를 가지고 있으며, accordion-header는 클릭 가능한 버튼 역할을 합니다.
- accordion-content는 숨겨진 내용 영역입니다.
- CSS:
- accordion-container는 세로형 아코디언의 전체 스타일을 담당합니다.
- accordion-header는 버튼 스타일을 지정하며, accordion-content는 숨겨지는 콘텐츠 영역의 스타일을 담당합니다.
- JavaScript:
- accordion-header에 클릭 이벤트 리스너를 추가하여, 클릭 시 해당 콘텐츠를 열고, 다른 콘텐츠는 닫습니다.
- display 스타일을 이용해 아코디언 콘텐츠를 토글합니다.
이 코드를 사용하면 세로형 아코디언을 구현할 수 있습니다. 각 항목을 클릭하면 해당 항목의 내용이 표시되고, 다른 항목이 열려 있는 경우에는 닫히게 됩니다.
반응형
'HTML&CSS' 카테고리의 다른 글
| 홈페이지 제작에 앞서 알아두면 좋을 프로그래밍 언어 (0) | 2024.12.23 |
|---|---|
| HTML5.2 에서 구현 할 수 있는 3D 그래픽은 어떤게 있을까 (5) | 2024.12.22 |
| HTML6 얼마나 발전한 코딩 일까 (2) | 2024.12.22 |
| 티스토리 서식 등록하기 (0) | 2024.12.19 |
| HTML5로 만들 수 있는 게임 – 초보자가 도전할 만한 3가지 게임 추천 (4) | 2024.12.08 |
