소개

탭 메뉴는 웹 애플리케이션에서 다양한 섹션 간의 전환을 간편하게 할 수 있는 중요한 요소입니다. 이번 블로그 포스트에서는 자바스크립트와 CSS Grid를 사용하여 탭 메뉴를 구현하는 방법에 대해 알아보겠습니다.

HTML 마크업

먼저, HTML 마크업을 작성합니다. 탭 메뉴의 각 탭은 <button> 요소로 구성되며, 선택된 탭의 내용을 표시하는 부분은 <div>로 작성합니다. 각 탭과 내용에는 고유한 id를 부여합니다. 아래는 탭 메뉴의 간단한 HTML 마크업 예시입니다.

<div class="tab-container">
  <button class="tab" id="tab1">Tab 1</button>
  <button class="tab" id="tab2">Tab 2</button>
  <button class="tab" id="tab3">Tab 3</button>

  <div class="tab-content" id="content1">
    <p>Tab 1 Content</p>
  </div>
  <div class="tab-content" id="content2">
    <p>Tab 2 Content</p>
  </div>
  <div class="tab-content" id="content3">
    <p>Tab 3 Content</p>
  </div>
</div>

CSS 스타일링

CSS Grid를 사용하여 탭 메뉴를 스타일링합니다. 탭 메뉴 컨테이너에 display: grid 속성을 적용하고, 각 탭과 내용 요소를 그리드 아이템으로 배치합니다. 아래는 CSS 스타일링의 예시입니다.

.tab-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-column-gap: 20px;
}

.tab {
  background-color: #f1f1f1;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.tab-content {
  display: none;
}

.tab-content.show {
  display: block;
}

자바스크립트 로직

마지막으로, 자바스크립트를 사용하여 탭 메뉴의 동작을 구현합니다. 클릭 이벤트를 처리하여 선택된 탭에 대한 내용을 표시하고, 나머지 탭의 내용은 숨깁니다. 아래는 자바스크립트 로직의 예시입니다.

const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 선택된 탭에 대한 스타일 변경
    tabs.forEach(tab => tab.classList.remove('active'));
    tab.classList.add('active');

    // 선택된 탭 내용 표시
    const tabId = tab.getAttribute('id').replace('tab', 'content');
    tabContents.forEach(content => content.classList.remove('show'));
    document.getElementById(tabId).classList.add('show');
  });
});

결과

위의 HTML, CSS, 자바스크립트를 적용하면 탭 메뉴가 구현됩니다. 각 탭을 클릭하면 해당 탭의 내용이 표시되며, 나머지 탭은 숨겨집니다.

이 방법을 사용하면 자바스크립트와 CSS Grid를 활용하여 웹 애플리케이션의 탭 메뉴를 구현할 수 있습니다. 이 방법은 유연하고 확장 가능한 탭 메뉴 제작에 도움이 될 것입니다.

#javascript #cssgrid