아임웹 탭 메뉴 만들기｜버튼 클릭으로 섹션 전환하는 커스텀 코드

 

아임웹에서 탭 버튼으로 섹션 전환하기

아임웹으로 홈페이지를 제작하다 보면 갤러리, 이미지, 일정처럼 여러 콘텐츠를 한 화면에서 깔끔하게 보여주고 싶은 경우가 많습니다.

하지만 섹션을 모두 세로로 나열하면 페이지가 길어지고 사용자가 원하는 정보를 찾기 어려워집니다.

이번에 소개하는 커스텀 코드는 상단 탭 버튼을 클릭하면 원하는 섹션만 보여주는 기능입니다.

실제로 아임웹 홈페이지 제작 시 많이 사용하는 방식이며, 별도의 플러그인 없이 HTML/CSS/JS만으로 구현할 수 있습니다.

 

[구현 예시 실제로 보기]

믓아 스튜디오

 

---

 

이 코드로 구현되는 기능

✔ 버튼 클릭 시 원하는 섹션만 노출

✔ 갤러리 / 이미지 / 일정 등 콘텐츠 분리 가능

✔ 활성화된 탭 자동 표시

✔ 모바일 가로 스크롤 지원

✔ 아임웹 갤러리 및 캘린더 위젯 대응

✔ 깔끔한 웹디자인 구성 가능

예시 구조

• 갤러리
• 이미지
• 일정

사용자는 필요한 정보만 확인할 수 있어 가독성과 UX가 크게 향상됩니다.

 

06. 아임웹 HTML 위젯 사용법｜초보자도 가능한 커스텀 코드 적용 방법

 

---

 

사용하면 좋은 상황

다음과 같은 홈페이지 제작 시 특히 유용합니다.

포트폴리오 사이트

• 프로젝트
• 작업 과정
• 결과물

병원 홈페이지

• 의료진 소개
• 시설 사진
• 진료 일정

기업 홈페이지

• 서비스 소개
• 구축 사례
• 문의 안내

행사 페이지

• 행사 소개
• 사진 갤러리
• 일정 안내

---

 

적용 방법

STEP 1

HTML 위젯을 추가합니다.

 

STEP 2

아래 탭 버튼 코드를 붙여넣습니다.

 

STEP 3

연결할 섹션 ID를 확인합니다.

예시

s20260529acefc9cf2ddec
s202605293bd832bae200b
s2026052979d8123658de9

 

STEP 4

스크립트 내부의 섹션 ID를 자신의 홈페이지에 맞게 변경합니다.

const sections = {
  gallery: document.getElementById("섹션ID"),
  schedule: document.getElementById("섹션ID"),
  image: document.getElementById("섹션ID")
};

---

 

전체 코드

<div class="motsa-section-tabs">
  <button type="button" class="motsa-tab-btn active" data-target="gallery">갤러리</button>
  <button type="button" class="motsa-tab-btn" data-target="schedule">이미지</button>
  <button type="button" class="motsa-tab-btn" data-target="image">일정</button>
</div>

<style>
  .motsa-section-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 40px;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 50;
  }

  .motsa-tab-btn {
    min-width: 120px;
    height: 46px;
    padding: 0 22px;
    border: 1px solid #d9d9d9;
    border-radius: 999px;
    background: #fff;
    color: #222;
    font-family: Pretendard, sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .motsa-tab-btn:hover {
    border-color: #111;
  }

  .motsa-tab-btn.active {
    background: #111;
    border-color: #111;
    color: #fff;
  }

  @media (max-width: 768px) {
    .motsa-section-tabs {
      justify-content: flex-start;
      gap: 8px;
      margin-bottom: 28px;
      padding: 0 16px;
      overflow-x: auto;
    }

    .motsa-tab-btn {
      flex: 0 0 auto;
      min-width: 100px;
      height: 42px;
      padding: 0 18px;
      font-size: 14px;
    }
  }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const tabButtons = document.querySelectorAll(".motsa-tab-btn");

  const sections = {
    gallery: document.getElementById("s20260529acefc9cf2ddec"),
    schedule: document.getElementById("s202605293bd832bae200b"),
    image: document.getElementById("s2026052979d8123658de9")
  };

  function hideSection(section) {
    if (!section) return;

    section.style.position = "absolute";
    section.style.visibility = "hidden";
    section.style.opacity = "0";
    section.style.pointerEvents = "none";
    section.style.width = "100%";
    section.style.left = "-99999px";
    section.style.top = "0";
  }

  function showSection(section) {
    if (!section) return;

    section.style.position = "relative";
    section.style.visibility = "visible";
    section.style.opacity = "1";
    section.style.pointerEvents = "auto";
    section.style.width = "";
    section.style.left = "";
    section.style.top = "";
  }

  function refreshImwebWidgets() {
    setTimeout(function () {
      window.dispatchEvent(new Event("resize"));

      if (window.jQuery) {
        jQuery(window).trigger("resize");

        if (jQuery("#calendar").length) {
          try {
            jQuery("#calendar").fullCalendar("render");
            jQuery("#calendar").fullCalendar("rerenderEvents");
            jQuery("#calendar").fullCalendar("option", "height", "auto");
          } catch (e) {}
        }
      }
    }, 300);
  }

  function activateTab(target) {
    Object.keys(sections).forEach(function (key) {
      hideSection(sections[key]);
    });

    showSection(sections[target]);

    tabButtons.forEach(function (btn) {
      btn.classList.toggle("active", btn.dataset.target === target);
    });

    refreshImwebWidgets();
  }

  tabButtons.forEach(function (btn) {
    btn.addEventListener("click", function () {
      activateTab(btn.dataset.target);
    });
  });

  activateTab("gallery");
});
</script>

---

 

코드 수정 포인트

버튼 이름 변경

갤러리
이미지
일정

원하는 문구로 자유롭게 변경 가능합니다.

 

기본으로 열리는 탭 변경

현재는 갤러리가 기본 노출됩니다.

activateTab("gallery");

예를 들어 일정을 먼저 보여주고 싶다면

activateTab("image");

로 변경하면 됩니다.

 

버튼 디자인 변경

배경색

background: #111;

글자색

color: #fff;

테두리

border: 1px solid #111;

만 수정하면 브랜드 컬러에 맞게 쉽게 커스터마이징할 수 있습니다.

---

 

자주 발생하는 오류와 해결 방법

버튼은 보이는데 섹션이 안 바뀌는 경우

대부분 섹션 ID가 잘못 입력된 경우입니다.

반드시 개발자 모드에서 실제 섹션 ID를 확인하세요.

 

모바일에서 버튼이 잘리는 경우

현재 코드는 모바일 가로 스크롤을 지원합니다.

overflow-x: auto;

삭제하지 않는 것을 추천합니다.

 

캘린더가 깨지는 경우

탭 전환 후 캘린더 높이나 일정이 깨질 수 있는데, 해당 코드에는 자동 리렌더 기능이 포함되어 있어 대부분 해결됩니다.

---

 

마무리

아임웹 기본 기능만으로는 구현하기 어려운 탭 메뉴 UI도 HTML/CSS/JS 커스텀 코드를 활용하면 어렵지 않게 만들 수 있습니다.

특히 홈페이지 제작 과정에서 정보가 많아질수록 콘텐츠를 깔끔하게 분류하는 것이 중요합니다.

이번 코드는 갤러리, 이미지, 일정뿐 아니라 서비스 소개, 포트폴리오, FAQ, 후기 등 다양한 영역에도 응용할 수 있으니 자유롭게 활용해 보시기 바랍니다.

 

전환 중심 홈페이지가 필요하신가요?

예쁜 디자인보다 중요한 것은 방문자가 빠르게 이해하고, 신뢰를 형성하며, 문의까지 이어지는 구조입니다.

믓아 스튜디오는 아임웹 기반의 전환 중심 홈페이지 설계 및 커스텀 코드 제작을 진행하고 있습니다.

• 기업 홈페이지 제작
• 병원 홈페이지 제작
• 랜딩페이지 제작
• 아임웹 커스텀 코드 개발
• UI/UX 개선
• 반응형 웹디자인

문의 전에도 홈페이지를 분석해 드리니 편하게 상담 요청해 주세요.

 

믓아 스튜디오