첫번째랑 마지막 요가+폰하는 그림이 높이가 꼬였습니다

Question

보여드린 스크린샷처럼 첫번째는 여백에 비해 그림이 너무 동떨어지고, 마지막 폰하는 그림이 요가 그림을 스크롤하면 바로 밑으로 나옵니다 😥 css 코드는 html { font-family : " Noto Sans KR " , sans-serif ; } body { margin : 0 ; } div , section , header , footer , p , h1 , h2 { box-sizing : border-box ; } a { color : royalblue ; } img { max-width : 100% ; height : auto ; } . global-width { max-width : 620px ; margin : 0 auto ; padding : 0 1rem ; } . scroll-graphic { position : sticky ; top : 0 ; height : 100vh ; } . graphic-item { display : flex ; align-items : center ; justify-content : center ; position : absolute ; left : 0 ; top : 0 ; width : 100vw ; height : 100vh ; opacity : 0 ; transition : 0.5s ; } . visible { opacity : 1 ; } . scene-img { max-height : 100vh ; } . scroll-text { position : relative ; } . step { margin-bottom : 60vh ; padding : 0.5rem 1rem ; border-radius : 10px ; border : 0.2px solid rgba ( 216 , 216 , 216 , 0.2 ); box-shadow : rgba ( 0 , 0 , 0 , 0.3 ) 0 0 3px ; background : rgba ( 255 , 255 , 255 , 0.8 ); } 이거구요 js는 ( () => { const stepElems = document . querySelectorAll ( ' .step ' ) ; const graphicElems = document . querySelectorAll ( ' .graphic-item ' ) ; let currentItem = graphicElems[ 0 ] ; for ( let i = 0 ; i < stepElems . length ; i ++ ) { // stepElems[i].setAttribute('date-index', i); stepElems[i] . dataset . index = i ; graphicElems[i] . dataset . index = i ; } function activate () { currentItem . classList . add ( ' visible ' ) ; } function inactivate () { currentItem . classList . remove ( ' visible ' ) ; } window . addEventListener ( ' scroll ' , () => { let step ; let boundingRect ; for ( let i = 0 ; i < stepElems . length ; i ++ ) { step = stepElems[i] ; boundingRect = step . getBoundingClientRect () ; if (boundingRect . top > window . innerHeight * 0.1 && boundingRect . top < window . innerHeight * 0.8 ) { inactivate () ; currentItem = graphicElems[step . dataset . index] ; activate () ; } } } ) ; activate () ; } )() ; 이 코드입니다 어떤게 문제일까요..?😥

Caesiumy · Answer

css파일에서 .scroll-text에 padding-bottom: 1px; 이 빠져있는 거 같아요 자세한 내용은 아래 링크에서! https://www.inflearn.com/questions/59182

신혜리 · Answer

감사합니다! 다시 살펴보겠습니다 :D

1분코딩 · Answer

보니까 영상에 그 부분 설명이 빠져있더라고요^^; 강의 노트에 텍스트로 같이 보실 수 있게 수정했습니다! 그리고 감사드려요 Caesiumy님! ㅎㅎ

신혜리 · Answer

:D 헉 감사합니다!