소개

동적 웹사이트 내비게이션은 사용자가 웹사이트를 탐색할 때 마다 내비게이션 메뉴가 동적으로 변경되는 기능입니다. 이를 구현하기 위해 자바스크립트에서 ‘this’ 키워드를 활용할 수 있습니다. 이 글에서는 ‘this’ 키워드를 활용하여 동적 웹사이트 내비게이션을 구현하는 방법에 대해 알아보겠습니다.

내비게이션 구조 설계

동적 웹사이트 내비게이션을 구현하기 위해 먼저 내비게이션 구조를 설계해야 합니다. 일반적으로 내비게이션은 <ul>과 <li> 태그를 사용하여 구현됩니다. 아래는 예시 내비게이션 구조입니다.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

‘this’ 키워드를 활용한 동적 내비게이션 구현

이제 ‘this’ 키워드를 활용하여 동적 웹사이트 내비게이션을 구현해보겠습니다. ‘this’는 자바스크립트에서 현재 실행 중인 객체를 참조하는 키워드입니다.

아래는 내비게이션 링크를 클릭했을 때 해당 링크에 ‘active’ 클래스를 추가하여 현재 활성화된 내비게이션을 표시하는 방법입니다.

// 내비게이션 링크 클릭 이벤트 처리
const navLinks = document.querySelectorAll('nav ul li a');

navLinks.forEach(link => {
  link.addEventListener('click', function() {
    // 기존에 활성화된 내비게이션 링크의 'active' 클래스 제거
    const activeLink = document.querySelector('nav ul li a.active');
    if (activeLink) {
      activeLink.classList.remove('active');
    }

    // 현재 클릭한 링크에 'active' 클래스 추가
    this.classList.add('active');
  });
});

위의 코드에서 querySelectorAll 메소드는 HTML 문서에서 선택된 모든 요소를 반환합니다. forEach 메소드를 사용하여 각 링크에 클릭 이벤트 리스너를 추가합니다. 클릭 이벤트가 발생하면 ‘active’ 클래스를 가진 링크를 찾아 제거한 뒤, 현재 클릭한 링크에 ‘active’ 클래스를 추가합니다.

마무리

이렇게 ‘this’ 키워드를 활용하여 동적 웹사이트 내비게이션을 구현할 수 있습니다. ‘this’ 키워드를 이해하고 적절히 활용하면 사용자 경험을 향상시킬 수 있는 동적 웹사이트를 만들 수 있습니다. 이를 바탕으로 다양한 기능을 추가해보세요.

#javascript #webdevelopment