CSS와 JavaScript로 탭 만들기
웹 페이지에서 여러 개의 콘텐츠를 공간 낭비 없이 깔끔하게 보여주고 싶다면 탭(Tab) UI가 가장 효과적인 해결책입니다. CSS와 JavaScript만 사용하면 별도의 라이브러리 없이도 클릭할 때마다 내용이 전환되는 탭을 손쉽게 구현할 수 있습니다.
아래 예제에서는 '시험 일정'과 '시험장 정보' 두 개의 탭을 만들어, 버튼을 클릭하면 해당하는 콘텐츠만 화면에 표시되도록 구성했습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.tab {
overflow: hidden;
border: 2px solid gray;
background-color: #FFE4C4;
}
.tab button {
background-color: inherit;
float: left;
cursor: pointer;
padding: 14px 16px;
font-size: 15px;
}
.tab button:hover {
background-color: gray;
}
.tab button.active {
background-color: #ccc;
}
.demo2 {
display: none;
padding: 3px 12px;
}
</style>
</head>
<body>
<h2>Examination</h2>
<p>Following is the exam information:</p>
<div class="tab">
<button class="demo" onclick="infofunc(event, 'dates')">Exam Dates</button>
<button class="demo" onclick="infofunc(event, 'centre')">Exam Centre</button>
</div>
<div id="dates" class="demo2">
<h3>Dates</h3>
<p>Exam date will be announced on 25th March.</p>
</div>
<div id="centre" class="demo2">
<h3>Centre</h3>
<p>Exam Centre will be announced on 30th March.</p>
</div>
<script>
function infofunc(e, info) {
var i, content, links;
content = document.getElementsByClassName("demo2");
for (i = 0; i < content.length; i++) {
content[i].style.display = "none";
}
links = document.getElementsByClassName("demo");
for (i = 0; i < links.length; i++) {
links[i].className = links[i].className.replace(" active", "");
}
document.getElementById(info).style.display = "block";
e.currentTarget.className += " active";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같이 두 개의 탭 버튼이 나란히 배치된 화면이 출력됩니다.
이 상태에서 아무 탭이나 클릭하면 해당 탭의 내용으로 전환됩니다. 아래는 'Exam Dates' 탭을 클릭했을 때의 결과입니다.
코드 동작 원리
이 탭 기능의 핵심은 infofunc() 함수입니다. 동작 과정을 단계별로 살펴보면 다음과 같습니다.
1. 모든 콘텐츠 숨기기: getElementsByClassName("demo2")로 탭 패널 전체를 가져온 뒤, 반복문을 통해 display: none을 적용해 모든 내용을 일단 숨깁니다.
2. 활성화 스타일 초기화: 모든 탭 버튼에서 active 클래스를 제거하여 이전에 강조되었던 버튼의 하이라이트를 지웁니다.
3. 선택한 콘텐츠 표시: 클릭된 버튼이 전달한 ID(dates 또는 centre)에 해당하는 요소만 display: block으로 변경해 화면에 보여줍니다.
4. 현재 탭 강조: e.currentTarget을 활용해 방금 클릭한 버튼에 active 클래스를 추가함으로써, 사용자가 어떤 탭을 보고 있는지 시각적으로 알 수 있게 합니다.
CSS 부분에서는 :hover 선택자로 마우스를 올렸을 때의 반응을, .active 클래스로 현재 선택된 탭의 배경색을 각각 정의하고 있습니다. 이처럼 HTML 구조, CSS 스타일, JavaScript 로직 세 가지만 조합하면 외부 라이브러리 없이도 완전히 동작하는 탭 인터페이스를 만들 수 있습니다.