아코디언 메뉴를 스타일링한 2가지 예제를 아래에서 제시하겠습니다. 각 예제는 HTML 및 CSS 코드로 구성되어 있으며, 상세한 주석과 함께 설명됩니다.
예제 1: 간단한 아코디언 메뉴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 아코디언 스타일 */
.accordion {
max-width: 400px;
margin: 0 auto;
}
.accordion-item {
border: 1px solid #ddd;
margin-bottom: 10px;
}
.accordion-btn {
width: 100%;
padding: 10px;
text-align: left;
background-color: #f4f4f4;
border: none;
cursor: pointer;
outline: none;
}
.accordion-content {
display: none;
padding: 10px;
background-color: #fff;
}
.accordion-item.active .accordion-content {
display: block;
}
</style>
<title>간단한 아코디언 메뉴</title>
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<button class="accordion-btn">Section 1</button>
<div class="accordion-content">
<p>Content for section 1 goes here.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-btn">Section 2</button>
<div class="accordion-content">
<p>Content for section 2 goes here.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-btn">Section 3</button>
<div class="accordion-content">
<p>Content for section 3 goes here.</p>
</div>
</div>
</div>
<script>
// JavaScript 코드 (선택 사항)
const accordionItems = document.querySelectorAll('.accordion-item');
accordionItems.forEach(item => {
const button = item.querySelector('.accordion-btn');
button.addEventListener('click', () => {
item.classList.toggle('active');
});
});
</script>
</body>
</html>
이 예제는 간단한 아코디언 메뉴를 보여줍니다. 각 섹션은 버튼으로 시작하며 클릭하면 해당 섹션의 콘텐츠가 펼쳐집니다.
예제 2: 아이콘을 포함한 아코디언 메뉴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 아코디언 스타일 */
.accordion {
max-width: 400px;
margin: 0 auto;
}
.accordion-item {
border: 1px solid #ddd;
margin-bottom: 10px;
}
.accordion-btn {
width: 100%;
padding: 10px;
text-align: left;
background-color: #f4f4f4;
border: none;
cursor: pointer;
outline: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-content {
display: none;
padding: 10px;
background-color: #fff;
}
.accordion-item.active .accordion-content {
display: block;
}
.icon {
font-size: 20px;
transition: transform 0.2s;
}
.accordion-item.active .icon {
transform: rotate(90deg);
}
</style>
<title>아이콘을 포함한 아코디언 메뉴</title>
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<button class="accordion-btn">
Section 1
<span class="icon">▶</span>
</button>
<div class="accordion-content">
<p>Content for section 1 goes here.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-btn">
Section 2
<span class="icon">▶</span>
</button>
<div class="accordion-content">
<p>Content for section 2 goes here.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-btn">
Section 3
<span class="icon">▶</span>
</button>
<div class="accordion-content">
<p>Content for section 3 goes here.</p>
</div>
</div>
</div>
<script>
// JavaScript 코드 (선택 사항)
const accordionItems = document.querySelectorAll('.accordion-item');
accordionItems.forEach(item => {
const button = item.querySelector('.accordion-btn');
button.addEventListener('click', () => {
item.classList.toggle('active');
});
});
</script>
</body>
</html>
이 예제는 아이콘을 포함한 아코디언 메뉴를 보여줍니다. 섹션 버튼 우측에 아이콘이 표시되며, 섹션이 열리면 아이콘이 회전합니다.
'CSS' 카테고리의 다른 글
| 텍스트 음영: 텍스트 음영(글자 그림자) 설정. (0) | 2023.12.23 |
|---|---|
| 레이지 로딩: 이미지 레이지 로딩 구현. (0) | 2023.12.23 |
| 그리드 레이아웃: 그리드 레이아웃 스타일링. (0) | 2023.12.23 |
| 헤더 스크롤 효과: 스크롤 시 헤더 효과. (0) | 2023.12.23 |
| 랜딩 페이지 디자인: 랜딩 페이지 디자인. (0) | 2023.12.23 |
