-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
초반강의를 보고 커스터마이징 해보고 있어요~
20.07.12 23:46 작성 조회수 98
0
jquery로만 하다가 javascript로 해볼라니 1도 모르겠고 어렵네요~~~
https://codepen.io/JoonSol/pen/eYJjpWp
여기 보면 사이드 버튼에 각 섹션에 불이 들어오게 구현해보고 싶은데요~ body에 붙는 아이디 값을 side btn ,index에 class가 붙게 하려고 하는데요~ 어떤식으로 써보면 좋을지 조언해 주시면 감사하겠습니다.
추가)
첫번째 섹션에서 스크롤 높이값을 찍어보고 있는데 마지막 섹션의 8play가 나오지 않아요~ 기존에 jquery로 할때로 이런 문제 때문에 마지막 섹션 이벤트 내용을 어떻게 처리할지 고민이었는데요. 8섹션의 높이값이 작아서 안나오는걸까요? 기존에는 현재 높이값의 5배로 했었는데 지금은 그냥 다 기본값으라서요~ 이 부분도 알려주심 감사하겠습니다.
답변을 작성해보세요.
0
0
1분코딩
지식공유자2020.07.15
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픽셀이라도 스크롤이 지나가야하기 때문에, 디자인상 관계 없는 하단 여백 등으로 조금만 스크롤을 확보해 주시면 해결이 될 것 같습니다. (테스트로 이미지를 살짝 삐져나가게 해보시면 체크가 될거에요)
답변 2