슬라이드 유형 만들기

설명: 

해당 페이지의 탭 메뉴를 만든 script 에 대해서 설명하겠습니다.

script 

const navItems = document.querySelectorAll(".nav > ul > li");

navItems.forEach((item) => {
item.addEventListener("mouseover", () => {
    const subMenu = item.querySelector(".submenu");
    const allSubMenus = document.querySelectorAll(".submenu");

    // 모든 서브메뉴를 보이게 하기
    allSubMenus.forEach((menu) => {
    menu.style.display = "block";
    });

    // 현재 아이템의 서브메뉴만 숨기지 않고 보이게 하기
    subMenu.style.display = "block";
});
});

// 마우스 아웃 이벤트 핸들러 등록
navItems.forEach((item) => {
item.addEventListener("mouseout", () => {
    const allSubMenus = document.querySelectorAll(".submenu");

    // 모든 서브메뉴를 숨기기
    allSubMenus.forEach((menu) => {
    menu.style.display = "none";
    });
});
});

탭 메뉴는 웹사이트나 앱에서 다른 콘텐츠 또는 기능에 대한 탐색을 돕기 위해 사용되는 인터페이스 요소입니다. 

일반적으로 화면 상단이나 측면에 위치하며, 각각의 탭은 해당 콘텐츠나 기능을 나타내며 클릭하면 해당 콘텐츠나 기능으로 전환됩니다.

탭 메뉴는 웹사이트나 앱에서 사용자 경험을 향상시키는 데 매우 유용합니다. 

탭을 사용하면 사용자는 빠르고 쉽게 다른 콘텐츠나 기능으로 전환할 수 있으며, 탭에 표시된 콘텐츠나 기능이 무엇인지 명확하게 파악할 수 있습니다.

웹사이트나 앱 디자이너들은 탭 메뉴를 효과적으로 활용하기 위해 몇 가지 지침을 따르는 것이 좋습니다. 

 

예를 들어, 탭의 수를 적게 유지하여 사용자가 쉽게 탐색할 수 있도록 해야 합니다. 

또한, 탭에 표시되는 콘텐츠나 기능은 관련성이 높아야 하며, 탭 이름은 간결하고 명확해야 합니다. 이러한 조건들을 잘 고려하여 탭 메뉴를 구성하면 사용자 경험을 높일 수 있습니다.

 

이 코드는 마우스 오버 이벤트 발생 시 모든 서브메뉴를 보이게 하고, 현재 아이템의 서브메뉴는 숨기지 않고 보이게 합니다. 마우스 아웃 이벤트 발생 시 모든 서브메뉴를 숨기는 기능을 수행합니다.

해당 코드는 먼저 document.querySelectorAll를 사용하여 .nav > ul > li 클래스를 갖는 모든 메뉴 아이템을 선택합니다. 

선택된 모든 메뉴 아이템에 대해 forEach 메소드를 사용하여 이벤트 리스너를 등록합니다.

mouseover 이벤트가 발생하면, 현재 아이템의 서브메뉴를 보이게 하고, 모든 서브메뉴를 보이게 합니다. 

mouseout 이벤트가 발생하면 모든 서브메뉴를 숨깁니다.

이 코드에서 querySelectorAll 메소드와 forEach 메소드는 JavaScript의 내장 함수로서, 각각 선택자를 통해 요소를 선택하고, 배열 또는 NodeList 등 순회 가능한 객체에 대해 반복 작업을 수행합니다. 

이벤트 리스너를 등록하기 위해 addEventListener 메소드를 사용합니다.

slideDown, slideUp, stop 등의 jQuery 메소드는 JavaScript에서 제공하지 않기 때문에, 해당 코드에서는 서브메뉴를 보이게 하거나 숨기기 위해 style 속성의 display 값을 직접 조작하는 방식을 사용하였습니다.

 

여기에 쓰인 속성들에 대해서 설명하겠습니다.

forEach는 배열이나 배열과 비슷한 객체를 순회하며, 배열의 각 요소에 대해 콜백 함수를 실행하는 메소드입니다. forEach 메소드는 콜백 함수를 인자로 받으며, 인자로 전달된 콜백 함수는 배열의 각 요소에 대해 실행됩니다.
콜백 함수는 일반적으로 세 개의 인자를 받습니다.

array.forEach(function(currentValue, index, array) {
  // 실행될 코드
});​

- currentValue: 현재 배열 요소의 값
- index: 현재 배열 요소의 인덱스
- array: 배열 객체

forEach는 배열의 길이만큼 반복하며, 콜백 함수의 실행 순서는 배열의 인덱스 순서와 일치합니다.
반환 값이 없으며, forEach 메소드를 호출한 배열 자체를 변경하지 않습니다.
아래는 배열에 대한 forEach 예시입니다.

const fruits = ['apple', 'banana', 'orange'];

fruits.forEach(function(fruit, index) {
  console.log(index + 1 + '. ' + fruit);
});

// 출력 결과:
// 1. apple
// 2. banana
// 3. orange​

이 예시에서 forEach는 fruits 배열의 요소를 각각 fruit 매개변수로 전달받아 콜백 함수를 실행합니다. 
index 매개변수를 통해 배열의 인덱스를 출력하며, console.log 함수를 사용하여 출력합니다.

mouseover 이벤트는 마우스 커서가 요소 위로 올라갈 때 발생하는 이벤트입니다. 요소의 자식 요소 위로 마우스 커서가 이동하더라도 mouseover 이벤트는 발생하지 않습니다.

mouseover 이벤트는 일반적으로 이벤트 리스너를 등록하여 요소에 마우스 커서가 진입할 때 특정 동작을 수행하는 데 사용됩니다. mouseover 이벤트는 MouseEvent 객체를 인자로 전달하며, 이 객체를 통해 마우스 이벤트의 발생 위치, 버튼 상태 등을 확인할 수 있습니다.

아래는 mouseover 이벤트를 이용한 예시 코드입니다.

const button = document.querySelector('.button');

button.addEventListener('mouseover', function(event) {
  console.log('마우스가 버튼 위로 진입했습니다.');
  console.log('이벤트 발생 위치:', event.clientX, event.clientY);
});

위 코드에서는 .button 클래스를 가진 요소를 선택하여 mouseover 이벤트 리스너를 등록하였습니다. 
이벤트 리스너 함수는 console.log 함수를 사용하여 메시지와 마우스 이벤트의 발생 위치를 출력합니다. 
event.clientX와 event.clientY는 마우스 이벤트의 발생 위치를 나타냅니다.

mouseout 이벤트는 마우스 커서가 요소를 벗어날 때 발생하는 이벤트입니다. 
요소의 자식 요소로 마우스 커서가 이동하더라도 mouseout 이벤트는 발생하지 않습니다.

mouseout 이벤트는 일반적으로 이벤트 리스너를 등록하여 요소에서 마우스 커서가 벗어날 때 특정 동작을 수행하는 데 사용됩니다. mouseout 이벤트는 MouseEvent 객체를 인자로 전달하며, 이 객체를 통해 마우스 이벤트의 발생 위치, 버튼 상태 등을 확인할 수 있습니다.

아래는 mouseout 이벤트를 이용한 예시 코드입니다.

const button = document.querySelector('.button');

button.addEventListener('mouseout', function(event) {
  console.log('마우스가 버튼을 벗어났습니다.');
  console.log('이벤트 발생 위치:', event.clientX, event.clientY);
});

위 코드에서는 .button 클래스를 가진 요소를 선택하여 mouseout 이벤트 리스너를 등록하였습니다. 
이벤트 리스너 함수는 console.log 함수를 사용하여 메시지와 마우스 이벤트의 발생 위치를 출력합니다. 
event.clientX와 event.clientY는 마우스 이벤트의 발생 위치를 나타냅니다.

addEventListener는 DOM 요소에 이벤트 리스너를 등록하는 메서드입니다. 
이벤트 리스너는 특정 이벤트가 발생했을 때 실행되는 함수를 말합니다. 

예를 들어, 버튼을 클릭했을 때 특정 동작을 수행하도록 하려면 click 이벤트에 대한 이벤트 리스너를 등록해야 합니다.

addEventListener 메서드는 다음과 같은 구조를 가지고 있습니다.

target.addEventListener(type, listener, options);

- target: 이벤트 리스너를 등록할 DOM 요소입니다.
- type: 등록할 이벤트의 종류를 나타내는 문자열입니다. 예를 들어, 버튼의 경우 click 이벤트를 사용합니다.
- listener: 이벤트 발생 시 실행될 콜백 함수입니다.
- options (선택 사항): 이벤트 리스너의 동작을 세부적으로 지정할 수 있는 객체입니다. 주로 capture와 once 등의 속성을 사용합니다.

아래는 addEventListener 메서드를 사용하여 버튼 클릭 시 특정 동작을 수행하는 예시 코드입니다.

<button id="myButton">Click me</button>
const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  console.log('버튼이 클릭되었습니다.');
  // 여기에 원하는 동작을 작성합니다.
});

위 코드에서는 getElementById 메서드를 사용하여 myButton ID를 가진 버튼 요소를 선택하였습니다. 
이후 addEventListener 메서드를 사용하여 click 이벤트에 대한 이벤트 리스너를 등록하였습니다. 
이벤트 리스너 함수에서는 console.log 함수를 사용하여 메시지를 출력하고, 원하는 동작을 작성합니다.

style.display는 DOM 요소의 CSS display 속성 값을 변경하는 프로퍼티입니다. 
display 속성은 요소의 표시 방법을 지정하는데, 요소를 보이거나 감추는 데 사용됩니다. 
style.display는 요소의 CSS 스타일을 변경하는 방법 중 하나이며, JavaScript를 사용하여 요소를 동적으로 보이게 하거나 감출 때 유용하게 사용됩니다.

style.display 프로퍼티의 값은 다음과 같이 지정할 수 있습니다.

- "none": 요소를 숨깁니다. 빈 공간이 생기지 않습니다.
- "block": 요소를 블록 요소로 표시합니다. 요소를 수직으로 쌓입니다.
- "inline": 요소를 인라인 요소로 표시합니다. 요소를 수평으로 쌓입니다.
- "inline-block": 요소를 인라인 블록 요소로 표시합니다. 요소를 수평으로 쌓지만, 높이와 너비를 지정할 수 있습니다.

아래는 style.display를 사용하여 요소를 보이게 하거나 감추는 예시 코드입니다.

<div id="myDiv">Hello, world!</div>
const div = document.getElementById('myDiv');

// 요소를 감추기
div.style.display = 'none';

// 요소를 보이기
div.style.display = 'block';

위 코드에서는 getElementById 메서드를 사용하여 myDiv ID를 가진 div 요소를 선택하였습니다. 
이후 style.display 프로퍼티를 사용하여 요소를 보이게 하거나 감췄습니다. 
요소를 보이게 하려면 display 속성을 "block"이나 "inline-block"으로 지정하고, 요소를 감추려면 display 속성을 "none"으로 지정합니다.