0302-html구조짜면서-padding이 높이

1.

.aside-banner {
  width: 100%;
  padding: 30% 0;
  margin-top: 15px;

  border: 1px solid grey;

  background-image: url("../img/aside-img.jpg");
  background-repeat: no-repeat;
  background-size: contain;
}

여기에서 

난 높이를 px로 주기싫다 반응형시 골치아프기 떄문이다.

height를 또 따로주기 싫다 .그럼  padding을 이용하자!!

동적으로 변하니 말이다.

 

그럼 여기에서 padding: 30% 0;

의 의미는 몰까?

 

부모너비의 30%를 padding으로 쓰겠다는 것이다.

예를 들면,

부모너비가 1000 px일때 

1000 * 0.3이므로 300px가 나온다.

이말은

padding-top:300px / padding-bottom:300px 를 의미한다

곧 height:600px이다.

 

여기에서 궁금..

 

높이인데 왜 부모너비를 가지고 판단하지? 높이를 가지고 판단해야지..

결론은 css표준이 부모너비 가지고 계산이 된다는 거다.

아래 글

부모 요소의 높이를 기준으로 패딩을 설정하면 화면의 너비에 따라 요소의 높이가 변화하는 경우, 즉 화면이 가로로 길어지거나 세로로 길어질 때 요소의 패딩이 일관성을 유지하지 못하고 불규칙하게 변화하게 됩니다.
그래서 CSS 표준에서는 패딩의 백분율 값을 부모 요소의 너비를 기준으로 계산하도록 정하였습니다. 이렇게 하면 레이아웃의 가로 세로 비율이 일정하게 유지될 수 있습니다.