<!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{
font-family:Arial, sans-serif;
background:#f1f5f9;
padding:50px;
}
h1{
text-align:center;
margin-bottom:30px;
}
/* 전체 박스 */
.wrap{
max-width:800px;
margin:auto;
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.1);
}
/* 버튼 영역 */
.tab-menu{
display:flex;
}
/* 버튼 */
.tab-btn{
flex:1;
padding:20px;
border:none;
background:#ddd;
cursor:pointer;
font-size:18px;
transition:.3s;
}
/* 활성화 버튼 */
.tab-btn.active{
background:#4f46e5;
color:white;
}
/* 내용 */
.tab-content{
display:none;
padding:40px;
line-height:1.8;
}
/* 활성화 내용 */
.tab-content.active{
display:block;
}
</style>
</head>
<body>
<h1>탭 메뉴 만들기</h1>
<div class="wrap">
<!-- 탭 버튼 -->
<div class="tab-menu">
<button class="tab-btn active">
HTML
</button>
<button class="tab-btn">
CSS
</button>
<button class="tab-btn">
JavaScript
</button>
</div>
<!-- 탭 내용 -->
<div class="tab-content active">
HTML은 웹페이지 구조를 만드는 언어입니다.
</div>
<div class="tab-content">
CSS는 디자인을 꾸미는 언어입니다.
</div>
<div class="tab-content">
JavaScript는 웹페이지를 움직이게 만듭니다.
</div>
</div>
<script>
// 버튼 여러 개 가져오기
const buttons =
document.querySelectorAll(".tab-btn");
// 내용 여러 개 가져오기
const contents =
document.querySelectorAll(".tab-content");
// 반복문
for(let i = 0; i < buttons.length; i++){
// 버튼 클릭
buttons[i].addEventListener("click", function(){
// 기존 active 제거
for(let j = 0; j < buttons.length; j++){
buttons[j].classList.remove("active");
contents[j].classList.remove("active");
}
// 현재 active 추가
buttons[i].classList.add("active");
contents[i].classList.add("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{
font-family:Arial, sans-serif;
background:#f1f5f9;
padding:50px;
}
h1{
text-align:center;
margin-bottom:30px;
}
/* 전체 박스 */
.wrap{
max-width:800px;
margin:auto;
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.1);
}
/* 버튼 영역 */
.tab-menu{
display:flex;
}
/* 버튼 */
.tab-btn{
flex:1;
padding:20px;
border:none;
background:#ddd;
cursor:pointer;
font-size:18px;
transition:.3s;
}
/* 활성화 버튼 */
.tab-btn.active{
background:#4f46e5;
color:white;
}
/* 내용 */
.tab-content{
display:none;
padding:40px;
line-height:1.8;
}
/* 활성화 내용 */
.tab-content.active{
display:block;
}
</style>
</head>
<body>
<h1>탭 메뉴 만들기</h1>
<div class="wrap">
<!-- 탭 버튼 -->
<div class="tab-menu">
<button class="tab-btn active">
HTML
</button>
<button class="tab-btn">
CSS
</button>
<button class="tab-btn">
JavaScript
</button>
</div>
<!-- 탭 내용 -->
<div class="tab-content active">
HTML은 웹페이지 구조를 만드는 언어입니다.
</div>
<div class="tab-content">
CSS는 디자인을 꾸미는 언어입니다.
</div>
<div class="tab-content">
JavaScript는 웹페이지를 움직이게 만듭니다.
</div>
</div>
<script>
// 버튼 여러 개 가져오기
const buttons =
document.querySelectorAll(".tab-btn");
// 내용 여러 개 가져오기
const contents =
document.querySelectorAll(".tab-content");
// 반복문
for(let i = 0; i < buttons.length; i++){
// 버튼 클릭
buttons[i].addEventListener("click", function(){
// 기존 active 제거
for(let j = 0; j < buttons.length; j++){
buttons[j].classList.remove("active");
contents[j].classList.remove("active");
}
// 현재 active 추가
buttons[i].classList.add("active");
contents[i].classList.add("active");
});
}
</script>
</body>
</html>
#탭 메뉴