2020.11.27 nav bar active 활성화 기능

 

2020.11.27 nav bar active 활성화 기능 정리노트

 

 

간만 간만! 옛날에 어떻게 1일 1 포스팅 했냐며.. 그래도 가끔씩 정리할 때 꾸준히 오겠다..!

 

그동안 더이상 html/css 만으로는 정적인 페이지 밖에 못만들어서 한계를 느껴서 java script 강의도 사서 조금씩 보는중 ㅎㅁㅎ 확실히 할 수 있는게 많아지니 이것저것 추가도 조금씩 프로젝트에 하기 시작함

 

오늘은 nav bar 에서 현재 내가 클릭하고 있는 페이지 표시 기능 구현!

 

 

먼저 네브바 ㄱ ㄱ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이렇게 내가 자유게시판을 가면 이 곳이 네브바에 표시 되도록 하는 기능을 jquery로 구현해봅씨다!!!

먼저 JQuery sdn 검색해서 

 

여기서 minified 링크 복붙해서 html body 부분 맨 밑에다가 붙여줍씨다 그럼 그 밑에 script 태그를 다시 써줘서 JQuery를 쓸 수 있게 되는데,

 

JQuery?

java script 라이브러리

 

왜 사용?

라이브러리는 우리가 자주 사용하는 코드들을 재사용할 수 있는 형태로 가공하여 좀 더 빠르고 쉽게 프로그래밍을 할 수 있게 만들어주는 말그대로 도서관인 느낌. 우리는 여기서 우리가 자주 쓰는 기능들을 간단하게 구현 가능하다.

 

script 태그는 왜  body 맨 밑?

브라우저는 동작할 때 순서가 존재한다. 

1. html 읽기 시작!

 

2. html  파싱 시작! - 코드를 컴퓨터가 읽을 수 있도록 바꾸는 작업

 

3. DOM tree 생성 

 

DOM ( Document Object Model ) ?

HTML, XML 문서의 프로그래밍 interface.

Html 코드 != Dom.

크롬에서 f12 로 개발자 도구에서 보이는 코드가 dom 인데, 그럼 다른게 없지 않나?

ㄴㄴ 우리는 html에 아무것도 안적고 그냥 "안녕하세요" 해도 브라우저상에서는 안녕하세요가 뜨는데, 그건 dom에서 자동으로 html, head, body 를 감싸서 출력해주기 때문. 

그 외에도 닫히지 않은 태그를 자동으로 닫아준다거나, 필수 요소 자동으로 채워주는 것도 dom이 작동 되고 있다는 뜻.

한 마디로 정리하면, 브라우저에 의해 기록되는 모든 것이라고 할 수 있음!

 

4. Render 트리 ( DOM tree + CSS 의 CSSOM tree ) 생성

 

5. Display 표시

 

 

오.. 이렇게 사실 브라우저는 작동했던 것이균.. 심오하다..ㅎ..  쨋든 이렇게 순서대로 읽게 되는데, 

script 태그가 중간에 난입을 해버리면, 중간에 파싱을 중단하고 스크립트를 먼저 읽게 된다.

그렇게 되면, 그만큼 5번까지의 시간이 지연이 된다. 

또한, Java Script 는 DOM 을 조작할 수 있는 언어이기 때문에, DOM 이 생성 되기 전에 script 를 통해 JS가 DOM 을 조작하는 오류가 생길 수 있다. 

 

길지만... 이러한 이유 때문에 왠만하면,  script 는 최하단에 적어주자! 물론 코드들을 이용하여, 이용 속도 제어 방법이 있다고 하는데, 그것은.. 다음에 좀 더 알아보겠음 ㅎㅁㅎ

---

 

쨋든!!!!! 

 

base.html

 

 

이렇게 JQuery 를 불러와주고, 하단에 script 태그를 쓰면, $로 시작하는 JQuery 세팅 완료!!!

 

이제 문법을 통해 기능 구현 ㄲ

 

 

base.html - category 네브바

base.html 최하단 scrpt 태그

 

이렇게 주석으로 설명해놓았음! 정리하면 url pathname 을 비교해주고, 현재 페이지와 비교해서, 같은 a 태그를 찾아 href 의 속성을 active 클래스로 넣었다 뺐다 하는 기능!

 

 

여기서 .find() 와 .children() 차이

 

.find() 

선택된 요소의 집합에서 선택자, jquery 객체, 요소와 같은 인자에 맞는 요소들 필터링.

 

.children()

선택요소의 직계 자손만 필터링 하여 가져올 수 있음.

 

비슷한 기능이지만, find는 깊이에 상관없이, 모든 하위 요소를 찾을 수 있는 반면에, children 은 바로 아래에 있는 자식요소만 선택이 가능하다!!

 

 

내 코드에서는 nav-item 안에 a 라는 요소 하나 밖에 없어서 children 을 사용해도 가능하지만, 조금 더 범용적으로 쓰고 싶어 find를 썼다! 만약

 

<div class='nav-item'>

    <a>

       <p></p>

    </a>

</div>

 

예를 들어 이 구조라고 생각하면, find 는 a 와 p를 모두 가져올 수 있지만, children 은 a 밖에 못가져오는 것!

 

지금 태그 이름 다 다르고 구조적으로 굉장히 문제가 많지만,,,ㅎ 대충 느낌 이해한다고 메모메모

 

쨋든 이렇게 적어주고, 

 

index.css

 

css 에 active 라는 class 를 적어주었다!

 

 

그렇게 하면,

 

 

 

 

 

 

 

이렇게 토글 css class 가 잘 적용이 된다 짝짜가짜가짝

 

 

---

 

간만에 포스팅 끝끝!!!