인프런 커뮤니티 질문&답변

소스코드는 잘 작성하셨고, 해당 코드로 동작도 잘 되고 있습니다.
그림으로 보여드릴게요-

그림과 같이 padding은 %로 했을 경우, 상하좌우값 모두 부모의 width를 100% 기준으로 잡습니다.
즉 padding-bottom: 60%라는 의미는, 바닥의 패딩값을 부모 width의 60%로 잡겠다는 것이고, 부모의 width가 늘어나거나 줄어드는대로 같은 비율로 계속 유지가 되는 것이지요.
우리가 만든 .card-image는 width가 부모요소의 width에 꽉 차있기때문에
.card-image의 width는 부모 width의 100%,
.card-image의 height는 부모 width의 60%가 됩니다.

엘리먼트의 높이를 height 대신 padding-bottom으로 잡아주는 방식이기 때문에
아래 그림처럼 height를 따로 갖고 있으면 우리가 원하는 height보다 커지므로,
height는 명시적으로 0으로 해주는 것이고요.

올려주신 페이지에 참고로 걸어두신 링크(https://hyeonseok.com/blog/712)에 잘 나와있는 방법입니다.