반응형 정사각형 만들기

반응형 정사각형 만들기

ChatGPT
반응형 정사각형을 만들기 위해서는 다음과 같은 CSS를 사용할 수 있습니다:

.square {
  width: 100%;
  padding-top: 100%; /* 가로 너비와 같은 비율의 패딩을 설정합니다 */
  position: relative;
}

.square-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 필요한 스타일을 추가로 설정합니다 */
}

위의 코드에서 .square 클래스는 정사각형을 감싸는 컨테이너를 나타냅니다. width: 100%로 설정하여 컨테이너의 너비를 100%로 확장하고, padding-top: 100%로 설정하여 컨테이너의 너비와 같은 비율의 패딩을 생성합니다. 이로 인해 컨테이너는 정사각형의 형태를 갖게 됩니다.

.square-inner 클래스는 정사각형 내부의 콘텐츠를 담는 요소입니다. position: absolute를 사용하여 부모인 .square에 상대적으로 위치하도록 설정하고, 너비와 높이를 100%로 설정하여 부모의 크기에 맞게 정사각형 내부를 채웁니다. 이곳에 필요한 추가적인 스타일을 설정할 수 있습니다.

이렇게 설정된 코드는 .square 클래스를 가진 요소가 반응형 정사각형으로 표시될 것입니다. 부모 요소의 너비에 따라 정사각형의 크기도 조정되며, 콘텐츠를 .square-inner에 추가하여 정사각형 내부에 내용을 표시할 수 있습니다.