padding

padding은 %로 했을 경우, 상 하 좌 우값 모두 부모의 width를 100% 기준으로 잡는다.

즉 padding-bottom: 60%라는 의미는, 바닥의 패딩값을 부모 width의 60%로 잡겠다는 것.

즉, height 는 width의 60% 를 먹은 값이 된다.

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