How TO - Clickable Dropdown / Navigation Bar (클릭하면 보여지는...

How TO - Clickable Dropdown / Navigation Bar (클릭하면 보여지는...

728x90

버튼 클릭 시 숨겨진 내용이 Dropdown 되도록하는 예제를 공부하고 이를 활용해 Navigation Bar를 생성해보겠습니다.

https://www.w3schools.com/howto/howto_js_dropdown.asp

Dropdown.txt 0.00MB

ClassList 관련 메서드

1) classList.add(String) : 지정한 클래스 값을 추가.

만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.

2) classList.remove(String) : 지정한 클래스 값을 제거.

존재하지않는 클래스를 제거해도 에러를 발생하지않는다.

3) classList.contains(String) : 지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인.

4) classList.replace(oldClass,newClass) : 존재하는 클래스를 새로운 클래스로 교체.

NavigationBar.txt 0.00MB

검색기능이 추가된 menu bar.txt 0.00MB

여기서 잠깐!

더 자세히 알아보자

Study 1.

toUpperCase() : 대상 문자열을 모두 대문자로 변환하여 리턴.

toLowerCase() : 대상 문자열을 모두 소문자로 변환하여 리턴.

trim() : 대상 문자열의 앞/뒤 공백문자를 모두 제거하여 리턴.

Study 2. 주요 논리연산자

출처 : https://opentutorials.org/module/3921/23607

Study 3. textContent, InnerText 차이점.

https://hianna.tistory.com/483

https://blog.naver.com/indi121/222081626201

자바스크립트에서 엘리먼트 및 노드의 텍스트를 추가하거나 엘리먼트에 있는 텍스트를 가져올 수 있는 기능.

Study4. IndexOf()

: 지정된 객체가 몇번째 인덱스에 있는지 찾아서 리턴.

728x90

from http://nossodia.tistory.com/136 by ccl(A) rewrite - 2021-10-13 18:26:18