CSS와 JavaScript로 세로 탭 메뉴 만드는 방법 완벽 가이드

웹 페이지에서 공간을 효율적으로 활용하고 싶다면 세로 탭 메뉴가 좋은 선택입니다. 이 글에서는 CSS와 JavaScript만을 사용하여 세로 탭 메뉴를 만드는 방법을 단계별로 알아보겠습니다.

세로 탭 메뉴의 기본 구조

세로 탭 메뉴는 크게 두 부분으로 구성됩니다.

탭 버튼 영역: 화면 왼쪽에 세로로 배치되는 메뉴 버튼들
콘텐츠 영역: 클릭한 탭에 따라 내용이 바뀌는 오른쪽 패널

탭 버튼을 클릭하면 JavaScript가 해당 콘텐츠만 화면에 표시하고 나머지는 숨기는 방식으로 동작합니다.

전체 예제 코드

아래는 시험 정보를 보여주는 세로 탭 메뉴의 완전한 HTML 코드입니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box
}
.tab {
    float: left;
    border: 1px solid blue;
    background-color: black;
    width: 20%;
    height: 200px;
}
.tab button {
    display: block;
    background-color: inherit;
    color: white;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
}
.tab button:hover {
    background-color: gray;
}
.tab button.active {
    background-color: #006400;
}
.demo2 {
    float: left;
    padding: 0px 10px;
    border: 1px solid;
    width: 70%;
    border-left: none;
    height: 200px;
}
</style>
</head>
<body>
<h2>시험 안내</h2>
<p>아래는 시험 관련 정보입니다:</p>
<div class="tab">
    <button class="demo" onclick="infofunc(event, 'dates')" id="current">시험 일정</button>
    <button class="demo" onclick="infofunc(event, 'centre')">시험 장소</button>
</div>
<div id="dates" class="demo2">
    <h3>일정</h3>
    <p>시험 일정은 3월 25일에 공개됩니다.</p>
</div>
<div id="centre" class="demo2">
    <h3>장소</h3>
    <p>시험 장소는 3월 30일에 공개됩니다.</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";
}
document.getElementById("current").click();
</script>
</body>
</html>

코드 핵심 요소 분석

1. CSS 스타일링

.tab 클래스는 왼쪽 탭 메뉴 영역을 담당합니다. float: left;와 width: 20%를 사용해 화면 왼쪽 20%를 차지하는 세로 메뉴를 만듭니다.

.tab button에 display: block;을 적용하면 버튼들이 세로로 쌓이며, transition: 0.3s; 덕분에 마우스를 올릴 때 부드러운 색상 전환 효과가 나타납니다.

:hover — 마우스를 올렸을 때 회색 배경으로 변경
.active — 현재 선택된 탭을 진한 초록색(#006400)으로 강조

2. JavaScript 동작 원리

infofunc() 함수는 다음 순서로 작동합니다.

모든 콘텐츠 패널(.demo2)을 display: none으로 숨깁니다.
모든 탭 버튼에서 active 클래스를 제거합니다.
클릭된 탭에 해당하는 콘텐츠만 display: block으로 표시합니다.
클릭된 버튼에 active 클래스를 추가해 선택 상태를 표시합니다.

마지막 줄의 document.getElementById("current").click();은 페이지가 로드되자마자 첫 번째 탭이 자동으로 열리도록 하는 역할을 합니다.

실행 결과

위 코드를 실행하면 왼쪽에 검은색 세로 탭 메뉴가 나타나고, 초기에는 '시험 일정' 탭이 활성화된 상태로 표시됩니다.

CSS와 JavaScript로 세로 탭 메뉴 만드는 방법 완벽 가이드

이제 '시험 장소' 탭을 클릭해 보세요. 선택된 탭의 배경색이 진한 초록색으로 바뀌고, 오른쪽 콘텐츠도 해당 내용으로 전환됩니다.

CSS와 JavaScript로 세로 탭 메뉴 만드는 방법 완벽 가이드

마무리 및 확장 아이디어

이처럼 CSS의 float 레이아웃과 JavaScript의 간단한 DOM 조작만으로도 실용적인 세로 탭 메뉴를 구현할 수 있습니다. 여기에 더해 다음과 같은 확장도 고려해 볼 수 있습니다.

탭 개수를 늘려 더 많은 콘텐츠 분류하기
반응형 디자인을 적용해 모바일에서는 가로 탭으로 전환
float 대신 Flexbox나 Grid 레이아웃으로 현대적으로 재구성
페이드 인 애니메이션을 추가해 전환 효과 강화

실무에서는 유지보수성을 위해 인라인 onclick 대신 addEventListener를 사용하는 방식도 추천합니다. 기본 원리를 익힌 후 프로젝트 성격에 맞게 응용해 보세요!