초반강의를 보고 커스터마이징 해보고 있어요~

Question

jquery로만 하다가 javascript로 해볼라니 1도 모르겠고 어렵네요~~~ https://codepen.io/JoonSol/pen/eYJjpWp 여기 보면 사이드 버튼에 각 섹션에 불이 들어오게 구현해보고 싶은데요~ body에 붙는 아이디 값을 side btn ,index에 class가 붙게 하려고 하는데요~ 어떤식으로 써보면 좋을지 조언해 주시면 감사하겠습니다. 추가) 첫번째 섹션에서 스크롤 높이값을 찍어보고 있는데 마지막 섹션의 8play가 나오지 않아요~ 기존에 jquery로 할때로 이런 문제 때문에 마지막 섹션 이벤트 내용을 어떻게 처리할지 고민이었는데요. 8섹션의 높이값이 작아서 안나오는걸까요? 기존에는 현재 높이값의 5배로 했었는데 지금은 그냥 다 기본값으라서요~ 이 부분도 알려주심 감사하겠습니다.

LIZ.B · Answer

앗 감사합니다~! ! 간단한 방법이었네요~~~~ 해볼께요~

1분코딩 · Answer

CSS에 아래 코드를 추가해보세요~ body에 붙은 클래스 순번에 해당하는 a 요소에 빨간색이 적용되도록 한 코드입니다. ------------- #show-scene-0 aside ul li:nth-child(1) a, #show-scene-1 aside ul li:nth-child(2) a, #show-scene-2 aside ul li:nth-child(3) a, #show-scene-3 aside ul li:nth-child(4) a, #show-scene-4 aside ul li:nth-child(5) a, #show-scene-5 aside ul li:nth-child(6) a, #show-scene-6 aside ul li:nth-child(7) a, #show-scene-7 aside ul li:nth-child(8) a, #show-scene-8 aside ul li:nth-child(9) a {   background: red; } ------------- 아, 그리고 추가적으로 말씀드리면 aside ul li a {} 이런식으로 태그 이름을 여러번 중첩하는 방식보다는, 따로 클래스 이름을 사용하는 것이 바람직합니다^^ 유지보수나 유연성 면에서도 그렇고, 렌더링 성능면에서도요. 추가질문답변) 일단 1픽셀이라도 스크롤이 지나가야하기 때문에, 디자인상 관계 없는 하단 여백 등으로 조금만 스크롤을 확보해 주시면 해결이 될 것 같습니다. (테스트로 이미지를 살짝 삐져나가게 해보시면 체크가 될거에요)