padding-bottom: 60%과 가로스크롤 질문

Question

height; 0을 주고 padding-bottom에다가 %을 하면 부모의 width 값이 크거나 작아지면서 변할때 마다 그 width값의 60%가 해당 요소의 hieght 값이 된다는 거는 알겠는데 그럼 padding-bottom이 .card-image의 높이 역할을 대신해준다고 보면 될까요? 굳이 padding-bottom에다가 % 주는거 말고, .card-image의 height에다가 %를 직접 주지 않는 이유를 생각 해봤는데 그냥 .card-image(자식)에 height: 60%을 하게 되면 부모인 .card-item의 width 60% 값을 .card-image의 height으로 설정 하는게 아니라 .card-item(부모)의 height 60% 값을 .card-image의 height으로 하는 것 같군요. 결론은 .card-item(부모)의 width값이 변할때마다 .card-image의 height 값을 유동적으로 바꿀려면 padding를 이용해서 마치 (padding-bottom 또는 padding-top)이 .card-image(자식)의 height처럼 작동 해야하는 군요. 어떤 요소의 padding 값에 % 주게 되면 그 값의 기준은 그 요소의 부모의 width값인지 궁금합니다. 자식의 height에 직접 %으로 준거는 부모의 height를 기준으로 계산하기 때문에 기존의 height 값을 0으로 초기화하고 부모의 width 값을 기준으로 % 계산을 하는 padding-top 또는padding-bottom을 이용해서 hight을 설정 하는 것 같은데 맞나요? padding-top, padding-bottom, padding-left, padding-right 모두 %를 쓰게 되면 부모의 width값을 기준으로 되는 것 같은데 맞나요? ============ 선생님 가로스크롤를 overflow로 해결하셨는데 저는 이해가 되지 않아서 혹시 그림으로 설명 가능할까요? ㅠㅠ margin: 0 - 1rem; 부터 개발자 도구를 봐도 잘 모르겠습니다 ㅠㅠ 그리고 .cart-list-con으로 감싼 이유가 뭔가요? ㅠㅠ

1분코딩 · Answer

1. 어떤 요소의 padding 값에 % 주게 되면 그 값의 기준은 그 요소의 부모의 width값인지 궁금합니다 => 생각하신게 맞습니다. 패딩으로 높이를 확보했기때문에 height는 명시적으로 0으로 세팅해준거랍니다. 2. margin이 원래 외부 여백이므로, 이 경우에는 영역이 넘친 만큼 반대방향(마이너스)으로 빼준거라고 이해하시면 될 것 같습니다. 3. overflow라는게 원래 영역에서 넘칠 경우 어떻게 처리할건지를 설정하는 속성이기 때문에, 기준이 될 "원래 영역"의 역할을 하기 위해 .card-list-con를 사용해 주었습니다. .card-list-con이 브라우저에 꽉 차므로, 브라우저 폭을 벗어나는 경우 hidden을 해주는 거지요. 그림으로 하면 이런 식이라고 할까요?