반응형 정사각형 만들기 (margin, padding 기준)

CSS를 이용하여 반응형으로 정사각형을 어떻게 만들 수 있을지 알아보자.
그리고, margin이나 padding 값을 %로 입력 했을 때 무엇을 기준으로 그 값이 정해지는지 알아보자.

 

해결책

 

[ 원리 ]

우선, 반응형 정사각형을 만들 때 먼저 알아야 하는 것은
margin이나 padding 값을 %로 입력 했을 때 무엇을 기준으로 그 값이 정해지는지 이다.

 

결론부터 얘기하자면 margin이나 padding의 % 값은 부모 태그의 넓이를 기준으로 삼게 된다. 

이때 조금 주의해야 하는 점은, 좌우 margin, padding 뿐만 아니라 위아래 margin, padding 역시 상위 요소의 넓이를 기준으로 삼는 다는 것이다.

 

 

 

[ 방법 - 1 ]

정사각형 컴포넌트 height를 0으로 두고,
width를 100%(원하는 값을 %로 넣어도 된다.) padding-bottom을 width와 같은 값으로 준다.

.first {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-color: aliceblue;
}

 

 

[ 방법 - 2 ]

.first의 가상요소 after를 만들고, padding-bottom: 100%를 준다.
이때 기준은 .first의 넓이가 될 것이므로 항상 정사각형이 된다.

 

정사각형 안에 컨텐츠를 주고 싶다면, position: absolute를 주고, .frist에 position: relative를 주어 붙이면 된다.

.first {
  position: relative;
  width: 50%;
}
.first::after {
  display: block;
  content: "";
  padding-bottom: 100%;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

 

 

결과물