Portfolio 페이지 꾸미기_(4)

< Table of Contents >

• What did I Today
• The Desired Result
• Train of Thought
• Memorable Things

---

< What did I Today >

• Portfolio 페이지 꾸미기

---

< The Desired Result >

1. 스크롤에 따른 메뉴바 색상 변경
2. 스크롤에 따른 메뉴바 고정
3. JavaScript를 이용한 책갈피 기능 추가
4. 선택한 네비게이션바/프로젝트만 보이게 하기

---

< Train of Thought >

1. 스크롤에 따른 메뉴바 색상 변경

• 효과를 넣고 싶은 태그를 정하고(HTML)
• 가져와야겠지(querySelector).
• 화면의 일정 거리(getBoundingClientRect().height)를 기준으로,
• 스크롤했을 때(addEventListener)
• (window.scrollY)보다 더 움직였으면
• 메뉴바 색상(CSS)이 바뀌도록(classList.add()) 하고싶다.
• 그런데 누를 때마다 재시작되어야하기 때문에 초기화(classList.remove()) 시켜줘야 한다.

2. 스크롤에 따른 메뉴바 고정

• 효과를 넣고 싶은 태그를 정하고(HTML)
• 가져와야겠지(querySelector)
• 클릭했을 때(addEventListener)
• 어떤 세부 대상을 향해(target, dataset)
• 스크롤을 이동시키고 싶은데(scrollIntoView)
• 누를 때마다 재시작되어야하기 때문에 초기화(classList.remove()) 시켜줘야 한다.

3. JavaScript를 이용한 책갈피 기능 추가

4. 선택한 네비게이션바/프로젝트만 보이게 하기

---

< Memorable Things >

• 대상객체 . classList . add ( '클래스명' )
  : 대상객체에 '클래스명'이라는 이름의 클래스를 만들어 넣어준다.