순수 CSS의 너비 반응형 완전 정사각형

Unsplash를 통한 Daniel McCullough의 표지 사진.

가볼만한 곳

크기 조정 가능한 블록 수준 div

resize 속성 - 이 과거의 텍스트 영역을 실제로 제어할 수 있다는 것을 몰랐지만 JavaScript를 사용하지 않고 사용자가 크기를 조정할 수 있는 div를 만드는 방법을 찾다가 우연히 발견했습니다.

광장은 어떻게 만들어지는가

#square {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  background-color: #2980b9;
}

이것을 세분화:

width: 100%는 크기 조정이 가능한 외부 컨테이너와 동일한 너비를 갖도록 정의되었는지 확인하기 위한 것입니다.

padding-bottom: 100%는 CSS 사양의 트릭을 기반으로 합니다. 여백 또는 패딩을 백분율로 지정할 때 -top 또는 -bottom 속성인 경우에도 항상 based on the width 입니다. 이런 식으로 너비와 같은 속성을 얻습니다.

position: relative는 패딩을 방해하지 않고 안에 물건을 넣을 수 있도록 하기 위한 것입니다. 내용이 추가되면 상자에 내용이 추가되어 사각형이 됩니다

.

background-color 그게 어디에 있는지 볼 수 있도록 있나요? ¯\_(ツ)_/¯

원은 어떻게 만들어지는가

사각형이 있으면 원을 만드는 것은 충분히 쉽습니다. 실제로 필요한 유일한 트릭은 border-radius: 50% 이지만 반응형 원을 좀 더 세분화해 보겠습니다.

#circle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-width: 4px;
  border-color: #27ae60;
  border-style: solid;
  border-radius: 50%;
}

position: absolute는 유입 콘텐츠를 추가하지 않으면서 이 원이 position: relative 사각형 내에 있도록 합니다.

top: 0; bottom: 0; width: 100%; height: 100%;는 원을 반응 사각형의 정확한 크기로 제한합니다. 이 시점에서 우리가 가진 것은 사각형의 내부 복사본인 위치: 절대 컨테이너입니다.

border-* 속성은 원의 윤곽선을 만드는 데 사용됩니다. 4px의 녹색 실선 테두리가 있고 반경은 사각형 가장자리의 절반입니다.

빠른 지오메트리 요약

다음은 왜 50%가 사각형에서 원을 만드는 마법의 숫자인지에 대한 설명입니다.



원의 반지름은 정사각형 변의 절반과 같습니다.