안녕하세요 이번 게시글에서는 탭 메뉴를 만들어 탭 클릭시 하단의 내용이 보여지는 예제입니다.
우선 시연영상입니다.
다음은 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- jQuery 라이브러리를 불러옴 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>탭 메뉴</title>
<style>
/* 스타일 시트 (CSS) 시작 */
/* 페이지 전체(body)에 대한 스타일 */
body {
margin-top: 100px; /* 페이지 상단 여백 설정 */
font-family: "Trebuchet MS", serif; /* 폰트 설정 */
line-height: 1.6; /* 텍스트 라인 높이 설정 */
}
/* 컨테이너(.container)에 대한 스타일 */
.container {
width: 500px; /* 컨테이너 너비 설정 */
margin: 0 auto; /* 가운데 정렬을 위한 왼쪽/오른쪽 여백 설정 */
}
/* 탭 목록(ul.tabs)에 대한 스타일 */
ul.tabs {
margin: 0px; /* 왼쪽 여백 제거 */
padding: 0px; /* 내부 여백 제거 */
list-style: none; /* 목록 기호 제거 */
}
/* 각 탭 버튼(ul.tabs li)에 대한 스타일 */
ul.tabs li {
background: none; /* 배경 없음 */
color: #222; /* 글자 색상 설정 */
display: inline-block; /* 인라인 블록 요소로 표시 (가로로 나열) */
padding: 10px 15px; /* 내부 여백 설정 */
cursor: pointer; /* 커서를 포인터로 변경하여 클릭 가능하게 함 */
}
/* 현재 선택된 탭 버튼(ul.tabs li.current)에 대한 스타일 */
ul.tabs li.current {
background: #ededed; /* 선택된 탭의 배경색 설정 */
color: #222; /* 선택된 탭의 글자 색상 설정 */
}
/* 탭 컨텐츠(.tab-content)에 대한 스타일 */
.tab-content {
display: none; /* 컨텐츠 숨김 */
background: #ededed; /* 배경색 설정 */
padding: 15px; /* 내부 여백 설정 */
}
/* 현재 선택된 탭 컨텐츠(.tab-content.current)에 대한 스타일 */
.tab-content.current {
display: inherit; /* 선택된 컨텐츠를 표시 */
}
/* 스타일 시트 (CSS) 끝 */
</style>
</head>
<body>
<div class="container">
<!-- 탭 메뉴 목록을 표시하는 리스트 -->
<ul class="tabs">
<!-- 각 탭 버튼에 data-tab 속성을 설정하여 해당 탭을 구별 -->
<li class="tab-link current" data-tab="tab-1">탭1</li>
<li class="tab-link" data-tab="tab-2">탭2</li>
<li class="tab-link" data-tab="tab-3">탭3</li>
</ul>
<!-- 탭 컨텐츠 영역 -->
<div id="tab-1" class="tab-content current">
<h2>탭1</h2>
<p>탭1의 내용을 넣어주세요</p>
</div>
<div id="tab-2" class="tab-content">
<h2>탭2</h2>
<p>탭2의 내용을 넣어주세요</p>
</div>
<div id="tab-3" class="tab-content">
<h2>탭3</h2>
<p>탭3의 내용을 넣어주세요</p>
</div>
</div>
<!-- jQuery를 사용하여 탭 메뉴의 동작을 구현하는 스크립트 -->
<script>
// 문서가 준비되면 실행됨
$(document).ready(function () {
// 각 탭 버튼을 클릭할 때의 동작을 정의하는 이벤트 핸들러
$("ul.tabs li").click(function () {
// 클릭한 탭 버튼의 data-tab 속성 값을 가져옴
var tab_id = $(this).attr("data-tab");
// 모든 탭 버튼과 탭 컨텐츠의 'current' 클래스를 제거
$("ul.tabs li").removeClass("current");
$(".tab-content").removeClass("current");
// 클릭한 탭 버튼과 해당 탭 컨텐츠에 'current' 클래스를 추가하여 활성화
$(this).addClass("current");
$("#" + tab_id).addClass("current");
});
});
</script>
</body>
</html>'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] Bootstrap으로 네비게이션 드로어 만들기 (0) | 2024.02.24 |
|---|---|
| [HTML/CSS] 슬라이드쇼 만들기 (0) | 2024.02.16 |
| [HTML/CSS] 세로 드롭다운 메뉴 (0) | 2024.02.06 |
| [HTML/CSS] 버튼 클릭시 나오는 모달창 구현하기 (0) | 2024.01.29 |
| [HTML/CSS] 다크모드 구현하기 (0) | 2024.01.20 |
