CSS 반응형 사각형 만들기. Responsive Square with CSS

 

How to Create a Responsive Square with CSS

위의 글을 참고하였습니다

너비를 알 때 높이 지정 없이 반응형 사각형 만들기

CSS의 너비, 높이 값을 %값으로 적용함으로 써 반응형 요소를 만들 수 있는데, 정확한 %값을 알지 못하는 경우가 많다. 그럴경우 반응형 사각형을 만드는 일이 까다롭게 느껴져 방법을 찾았다.

1. width값을 지정한다. 원하는 요소의 width값을 %로 지정하여 요소의 원하는 크기를 설정한다.
2. ::after Pseudo Selector 가상 선택자를 이용하여 가상의 요소를 하나 만들어 주고, padding-bottom을 이용해 높이값을 지정한다.

const Profile = styled.div`
  width: 8%;
  background-color: black;
  position: relative; //자식요소가 있을 때.
  &::after {
    content: "";
    display: block;
    padding-bottom: 100%; //요소의 높이를 지정한다.
  }
  border-radius: 20%;
`;

위는 스타일컴포넌트 라이브러리를 사용한 코드.

Profile요소에 자식 요소가 있다면 기존 요소에 position: relative; 자식 요소에 position:absolute; 를 적용하여야 한다.

위의 방법으로 height를 %로 지정하지 않고 width값 하나만으로 정사각형을 어디서든 만들 수 있게 되었다!

---

참고로 padding-bottom이 100%값인데 높이를 지정하는게 무슨소리인가 할 듯 싶은데,

padding, margin등의 퍼센트% 값은 블럭의 width값을 기준으로 작동한다.

padding-right, left 뿐만 아니라 top, bottom 역시 width값을 기준으로 한다는 것을 알고있자.