웹 페이지에서 여러 콘텐츠 섹션을 하나의 화면 안에서 전환하며 보여주고 싶다면 전체 페이지 탭(Full-page Tabs) 기능이 유용합니다. 이 글에서는 CSS와 JavaScript만을 사용하여 화면 전체를 채우는 탭 인터페이스를 구현하는 방법을 단계별로 살펴보겠습니다.
전체 페이지 탭의 동작 원리
전체 페이지 탭은 크게 두 부분으로 구성됩니다.
- 탭 버튼(tablink): 상단에 배치되어 각 콘텐츠 페이지로 이동할 수 있는 버튼
- 탭 콘텐츠(tabcontent): 버튼을 클릭했을 때 화면 전체에 표시되는 실제 내용 영역
JavaScript가 각 버튼의 클릭 이벤트를 감지하여, 해당하는 콘텐츠 div만 화면에 표시(display: block)하고 나머지는 숨김(display: none) 처리하는 방식으로 동작합니다.
전체 예제 코드
아래는 HTML, CSS, JavaScript를 모두 포함한 완전한 예제 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body, html {
height: 100%;
margin: 0;
}
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px 14px;
font-size: 15px;
width:33.33%;
}
.tablink:hover {
background-color: black;
}
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {background-color: blue;}
#About {background-color: gray;}
#Contact {background-color: orange;}
</style>
</head>
<body>
<button class="tablink" onclick="demo('Home', this, 'blue')">Home</button>
<button class="tablink" onclick="demo('About', this, 'gray')" id="clickme">About</button>
<button class="tablink" onclick="demo('Contact', this, 'orange')">ContactUs</button>
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>This is the Home page.</p>
</div>
<div id="About" class="tabcontent">
<h3>About</h3>
<p>This is information about the company.</p>
</div>
<div id="Contact" class="tabcontent">
<h3>ContactUs</h3>
<p>Contact us for any feedback, query and complaints.</p>
</div>
<script>
function demo(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
document.getElementById("clickme").click();
</script>
</body>
</html>코드 주요 부분 설명
1. CSS 스타일링
.tablink 클래스는 상단 탭 버튼의 스타일을 정의합니다. width: 33.33%를 지정하여 세 개의 버튼이 화면 너비를 균등하게 나누어 차지하도록 했습니다. 마우스를 올리면(:hover) 버튼 색상이 검정으로 변경되어 시각적인 피드백을 제공합니다.
.tabcontent 클래스는 콘텐츠 영역의 스타일을 담당합니다. height: 100% 덕분에 각 탭의 내용이 브라우저 화면 전체를 꽉 채우게 되며, 기본값인 display: none으로 설정되어 있어 처음에는 보이지 않습니다.
2. JavaScript 함수(demo)
demo() 함수는 세 가지 작업을 수행합니다.
- 모든
.tabcontent요소를 숨겨 이전에 열려 있던 탭을 닫습니다. - 모든 탭 버튼의 배경색을 초기화합니다.
- 클릭된 버튼에 해당하는 콘텐츠만 표시하고, 해당 버튼의 배경색을 지정된 색상으로 변경합니다.
마지막 줄의 document.getElementById("clickme").click();은 페이지가 로드되자마자 'About' 탭을 자동으로 클릭하여 초기 화면이 비어 보이지 않도록 하는 역할을 합니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다. 페이지 로드 시 'About' 탭이 자동으로 활성화됩니다.
이제 'ContactUs' 탭을 클릭하면 아래와 같이 주황색 배경의 연락처 페이지로 전환됩니다.
마무리
이처럼 CSS와 JavaScript만으로도 별도의 라이브러리 없이 화면 전체를 활용하는 탭 내비게이션을 손쉽게 구현할 수 있습니다. 탭의 개수를 늘리고 싶다면 버튼의 width 값을 조정하고(예: 4개 탭이면 25%), 새로운 tabcontent div와 버튼을 추가하기만 하면 됩니다. 다양한 색상과 콘텐츠를 적용하여 자신만의 스타일로 응용해 보시기 바랍니다.