8.18 개발일지. 실무 프로젝트( 더보기 개선 )

김지형·2022년 8월 18일
0

ai-school

목록 보기
59/61

학습한 내용

오늘은 어제 수정한 피드백 중, 더보기 버튼이 사라지는 기능을 개선하는 작업을 하였다

어제는 단순히 클릭하면 버튼이 사라지도록 구현했지만, 오늘은 버튼이 사라지는 조건을 부여하였다

click 함수에 if 조건문을 주었다

클릭하면 모든 기사들이 fadeIn되는데 그러면 display가 none이 아니게 되고,
마지막 기사가 나타나게 되면 더보기 버튼이 보일 필요가 없게 되므로 버튼을 감추도록 설정하였다

어려운 내용

기사의 갯수가 바꼈을 경우 nth-child를 사용하면 대상을 매번 바꿔줘야 한다

해결방법

nth-last-child를 이용해 어느 경우라도 항상 마지막 기사를 대상으로 하도록 설정한다

학습소감

어제 작업한 더보기 작동을 개선하였다
다만 기사 목록이 더 늘어날 경우 더보기 버튼을 누르면 기사 이외의 모든 숨겨진 기사들이 한번에 보이게 되는데,
여기에 버튼 클릭 한번에 보이는 기사의 갯수를 지정해두면 좋을 것 같지만 어떻게 구현을 해야

할 지 고민이다

profile
안녕하세요!

0개의 댓글