<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아코디언 메뉴</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:#f1f5f9;
font-family:Arial, sans-serif;
padding:50px;
}
h1{
text-align:center;
margin-bottom:30px;
}
.wrap{
max-width:700px;
margin:auto;
}
/* 카드 */
.accordion{
background:white;
border-radius:15px;
margin-bottom:15px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,.1);
}
/* 제목 */
.title{
background:#4f46e5;
color:white;
padding:20px;
cursor:pointer;
font-size:20px;
}
/* 내용 */
.content{
padding:20px;
display:none;
line-height:1.7;
color:#555;
}
/* 열렸을 때 */
.content.active{
display:block;
}
</style>
</head>
<body>
<h1>자바스크립트 아코디언 메뉴</h1>
<div class="wrap">
<div class="accordion">
<div class="title">
JavaScript란?
</div>
<div class="content">
JavaScript는 웹페이지를 움직이게 만드는 언어입니다.
</div>
</div>
<div class="accordion">
<div class="title">
DOM이란?
</div>
<div class="content">
HTML을 JavaScript가 조작할 수 있게 만든 구조입니다.
</div>
</div>
<div class="accordion">
<div class="title">
querySelector란?
</div>
<div class="content">
HTML 요소를 선택하는 기능입니다.
</div>
</div>
</div>
<script>
// 제목 여러 개 가져오기
const titles =
document.querySelectorAll(".title");
// 내용 여러 개 가져오기
const contents =
document.querySelectorAll(".content");
// 반복문
for(let i = 0; i < titles.length; i++){
// 클릭 이벤트
titles[i].addEventListener("click", function(){
// 열기/닫기
contents[i].classList.toggle("active");
});
}
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아코디언 메뉴</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:#f1f5f9;
font-family:Arial, sans-serif;
padding:50px;
}
h1{
text-align:center;
margin-bottom:30px;
}
.wrap{
max-width:700px;
margin:auto;
}
/* 카드 */
.accordion{
background:white;
border-radius:15px;
margin-bottom:15px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,.1);
}
/* 제목 */
.title{
background:#4f46e5;
color:white;
padding:20px;
cursor:pointer;
font-size:20px;
}
/* 내용 */
.content{
padding:20px;
display:none;
line-height:1.7;
color:#555;
}
/* 열렸을 때 */
.content.active{
display:block;
}
</style>
</head>
<body>
<h1>자바스크립트 아코디언 메뉴</h1>
<div class="wrap">
<div class="accordion">
<div class="title">
JavaScript란?
</div>
<div class="content">
JavaScript는 웹페이지를 움직이게 만드는 언어입니다.
</div>
</div>
<div class="accordion">
<div class="title">
DOM이란?
</div>
<div class="content">
HTML을 JavaScript가 조작할 수 있게 만든 구조입니다.
</div>
</div>
<div class="accordion">
<div class="title">
querySelector란?
</div>
<div class="content">
HTML 요소를 선택하는 기능입니다.
</div>
</div>
</div>
<script>
// 제목 여러 개 가져오기
const titles =
document.querySelectorAll(".title");
// 내용 여러 개 가져오기
const contents =
document.querySelectorAll(".content");
// 반복문
for(let i = 0; i < titles.length; i++){
// 클릭 이벤트
titles[i].addEventListener("click", function(){
// 열기/닫기
contents[i].classList.toggle("active");
});
}
</script>
</body>
</html>
#아코디언 메뉴