Vanilla JavaScript로 탭 메뉴 구현

늑대의 코딩 스토리 - 바닐라 자바스크립트 탭 구현

HTML, CSS, 바닐라 자바스크립트를 사용해 간단하고 반응형 탭 메뉴를 만드는 방법 (2025.06.12 20:49 KST)

바닐라 자바스크립트 탭 메뉴란?

늑대의 코딩 스토리가 제공하는 이 튜토리얼은 바닐라 자바스크립트를 사용해 탭 메뉴를 구현하는 방법을 설명합니다. 외부 라이브러리 없이 HTML, CSS, JavaScript만으로 간단하고 반응형 탭을 만들 수 있습니다. 아래는 완성된 탭 메뉴와 코드 예제입니다.

홈 탭

늑대의 코딩 스토리가 제공하는 바닐라 자바스크립트 탭 구현 튜토리얼에 오신 것을 환영합니다! 이 탭 메뉴는 HTML, CSS, 그리고 순수 자바스크립트로 제작되었습니다. (2025.06.12 20:49 KST)

웹 개발에서 탭 메뉴는 사용자 경험을 향상시키는 중요한 UI 요소입니다. 이 예제는 프론트엔드 개발을 배우는 분들에게 적합합니다.

프로필 탭

늑대의 코딩 스토리는 웹 개발과 프론트엔드 기술을 공유하는 블로그입니다. 이 튜토리얼에서는 바닐라 자바스크립트를 활용해 탭 기능을 구현합니다.

자바스크립트 탭 메뉴를 만드는 과정은 간단하면서도 강력합니다. 이 코드는 외부 라이브러리 없이 작성되었습니다.

연락처 탭

늑대의 코딩 스토리에게 연락하고 싶으신가요? 이 탭은 연락처 정보를 표시합니다. 바닐라 자바스크립트로 구현된 탭 메뉴는 빠르고 가볍습니다.

더 많은 웹 개발 튜토리얼을 원한다면, 늑대의 코딩 스토리 블로그를 방문하세요!

코드 예제

아래는 이 탭 메뉴를 구현한 HTML, CSS, JavaScript 코드입니다. 늑대의 코딩 스토리 튜토리얼을 따라 복사하여 사용해보세요!

HTML 코드

<div class="tabs-container" style="width: 100%;">
    <div class="tabs-header" style="display: flex; visibility: visible;">
        <button class="tab-btn active" data-id="tab1">홈</button>
        <button class="tab-btn" data-id="tab2">프로필</button>
        <button class="tab-btn" data-id="tab3">연락처</button>
    </div>
    <div class="tabs-content">
        <div id="tab1" class="tab-pane active">
            <h2>홈 탭</h2>
            <p>늑대의 코딩 스토리가 제공하는 바닐라 자바스크립트 탭 구현 튜토리얼에 오신 것을 환영합니다!</p>
        </div>
        <div id="tab2" class="tab-pane">
            <h2>프로필 탭</h2>
            <p>늑대의 코딩 스토리는 웹 개발과 프론트엔드 기술을 공유하는 블로그입니다.</p>
        </div>
        <div id="tab3" class="tab-pane">
            <h2>연락처 탭</h2>
            <p>늑대의 코딩 스토리에게 연락하고 싶으신가요? 이 탭은 연락처 정보를 표시합니다.</p>
        </div>
    </div>
</div>

CSS 코드

.tabs-container {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    visibility: visible;
}

.tabs-header {
    display: flex;
    background-color: #f4f4f4;
    visibility: visible;
}

.tab-btn {
    flex: 1;
    padding: 15px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    visibility: visible;
}

.tab-btn:hover {
    background-color: #e0e0e0;
}

.tab-btn.active {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}

.tabs-content {
    padding: 20px;
    width: 100%;
    visibility: visible;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

@media (max-width: 576px) {
    .tab-btn {
        font-size: 14px;
        padding: 10px;
    }

    .tabs-content {
        padding: 15px;
    }
}
        

JavaScript 코드

const tabs = document.querySelectorAll(".tab-btn");
const panes = document.querySelectorAll(".tab-pane");

tabs.forEach(tab => {
    tab.addEventListener("click", function() {
        tabs.forEach(t => t.classList.remove("active"));
        panes.forEach(p => p.classList.remove("active"));

        this.classList.add("active");
        const target = document.getElementById(this.getAttribute("data-id"));
        target.classList.add("active");
    });
});
        

늑대의 코딩 스토리의 웹 개발 튜토리얼

이 페이지는 바닐라 자바스크립트, HTML, CSS를 사용해 탭 메뉴를 구현한 예제입니다. 더 많은 프론트엔드 개발 튜토리얼을 보려면 늑대의 코딩 스토리 블로그를 방문하세요! (2025.06.12 20:49 KST)