[React]반응형 정사각형 만들기

반응형으로 정사각형을 만드려면 padding-bottom값을 100%로 주면 된다! padding이 부모 엘리멘터의 width 값을 기준으로 계산되기 때문이다.

<div className="outer">
  <div className="inner"></div>
<div>

.outer{
	width:100px
}

.inner{
	width:50%
	padding-bottom:100%
}

참고
https://minhanpark.github.io/today-i-learned/css-responsive-square/