CSS와 JavaScript를 활용하면 클릭할 때마다 내용이 전환되는 탭 헤더(tab header) UI를 손쉽게 구현할 수 있습니다. 각 버튼을 클릭하면 해당 콘텐츠 영역만 화면에 표시되고, 나머지 탭의 내용은 자동으로 숨겨지는 방식으로 동작합니다.
예제 코드
아래는 CSS와 JavaScript를 사용하여 탭 헤더를 구현한 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.tablink {
background-color: black;
color: white;
float: left;
cursor: pointer;
padding: 20px 12px;
font-size: 15px;
width: 33.3%;
}
.tablink:hover {
background-color: black;
}
.tabcontent {
color: white;
display: none;
padding: 50px;
text-align: center;
}
#date {
background-color:blue;
border: 1px solid black;
}
#time {
background-color:yellow;
color: black;
border: 1px solid black;
}
#venue {
background-color:orange;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Match Schedule</h2>
<div id="date" class="tabcontent">
<h1>Date</h1>
<p>Match will held on 2nd April.</p>
</div>
<div id="time" class="tabcontent">
<h1>Time</h1>
<p>Begins: 9AM</p>
</div>
<div id="venue" class="tabcontent">
<h1>Venue</h1>
<p>MCG, Australia</p>
</div>
<button class="tablink" onclick="demo('date', this, 'red')" id="defaultOpen">Date</button>
<button class="tablink" onclick="demo('time', this, 'green')">Time</button>
<button class="tablink" onclick="demo('venue', this, 'blue')">Venue</button>
<script>
function demo(match,e,color) {
var i, content, links;
content = document.getElementsByClassName("tabcontent");
var len1 = content.length;
for (i = 0; i < len1; i++) {
content[i].style.display = "none";
}
links = document.getElementsByClassName("tablink");
var len2 = links.length;
for (i = 0; i < len2; i++) {
links[i].style.backgroundColor = "";
}
document.getElementById(match).style.display = "block";
e.style.backgroundColor = color;
}
document.getElementById("defaultOpen").click();
</script>
</body>
</html>코드 동작 원리
- .tablink 클래스: 상단에 배치된 탭 버튼의 스타일을 정의합니다. 세 개의 버튼이 각각 33.3% 너비를 차지하도록 설정되어 있으며, 마우스 커서가 포인터 형태로 표시됩니다.
- .tabcontent 클래스: 탭에 연결된 콘텐츠 영역의 스타일입니다. 기본적으로
display: none;으로 설정되어 있어 페이지 로드 시 모든 내용이 숨겨집니다. - demo() 함수: 탭이 클릭되면 실행되는 핵심 함수입니다. 먼저 모든 콘텐츠 영역을 숨기고(
display: none), 모든 버튼의 배경색을 초기화한 뒤, 선택된 콘텐츠만 다시 표시하고(display: block) 해당 버튼의 배경색을 지정된 색상으로 변경합니다. - defaultOpen: 페이지가 로드되면
document.getElementById("defaultOpen").click();코드를 통해 첫 번째 탭(Date)이 자동으로 열리도록 설정되어 있습니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
이제 아무 탭이나 클릭해 보면 해당 내용으로 전환되는 것을 확인할 수 있습니다.
