CSS 작업 시 간단하게 반응형 정사각형 만들기 💟

리액트 기반으로 작업하였고 먼저 마크업부터 설명하자면 부모태그 하나와 자식태그 하나 이렇게 만들어준다. <PhotoAdd> 이 태그가 부모태그이고 squere 클래스는 자식태그이다.

HTML 마크업

<PhotoAdd>
  <div className="square">
   <button type="reset">
    <svg
     (...)
    </svg>
   </button>
   <button type="button">
     <svg
     (...)
     </svg>
   </button>
  </div>
</PhotoAdd>

다음, CSS 작업은 이렇게 했다.

export const PhotoAdd = styled.div`
  width: 100%;
  background: #e4e4e4;
  display: flex;
  margin: 1.375em 0;
  ✔️position: relative;
  ✔️&:after {
    ✔️content: "";
    ✔️display: block;
    ✔️padding-bottom: 100%;
  }
  ✔️.square {
    ✔️position: absolute;
    ✔️width: 100%;
    ✔️height: 100%;
  }
`;

부모태그에 position: relative; 로 지정해주고, 자식 태그에 position: absolute , width와 height를 100% 주면 정사각형이 만들어지는데, 이때 부모태그에 after 가상 클래스를 만들어서 padding-bottom: 100%; 를 지정해야 한다.

그럼 어느 기기에서나 유연하게 반응형으로 정사각형을 유지할 수 있다.