[CSS] 반응형으로 정사각형 만들기

결론: after요소에 padding-bottom을 100% 넣어주면 된다.
내부에 다양한 크기에 컨텐츠가 있다면, position: absolute인 width, height 100%인 div로 감싸준다.

<div class="note">
    <div class="inner">
        <div class="title">{noteData.title}</div>
    </div>
</div>

.note {
  border: 1px solid red;
  &:after { /* after로 반응형 정사각형 만들기 */
    content: "";
    display: block;
    padding-bottom: 100%;
  }
  .inner { /* 내부에 컨텐츠가 있을 때 추가 */
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

Refer

https://spin.atomicobject.com/2015/07/14/css-responsive-square/