padding값에 따라 요소의 크기가 변하는 이슈 해결

 

padding-top 30px을 기준으로 보다 높아지면 배경 애니메이션이 안 보이고,

30px보다 낮아지면 애니메이션이 보이는 문제가 발생했다.

 

 

먼저 배경의 height를 확인해 봤다.

884px

 

그리고 배경 안의 컨텐츠의 height를 확인했다.

854px

 

padding 30px을 기준으로 버그가 발생하고 있었는데, 884px - 854px = 30px과 연관이 있을 것이라는 생각이 들었다.

 

 

그리고 pdding 값의 변화에 따라 star의 크기가 달라지고 있었다.

 

star의 크기를 고정시켜 줘야겠다는 생각이 들었다.

div로 감싸준 후 height에 100%를 줬다.

                <div style={{ height: "100%" }}>
                  <div id="stars" />
                  <div id="stars2" />
                  <div id="stars3" />
                </div>

 

padding값을 아무리 늘려도, star의 크기가 변하지 않게 되었다.