margin이나 padding % 기준

CSS를 이용하여 반응형으로 정사각형을 어떻게 만들 수 있을지 알아보자. 그리고, margin이나 padding 값을 %로 입력 했을 때 무엇을 기준으로 그 값이 정해지는지 알아보자. 해결책 [ 원리 ] 우선, 반응형 정사각형을 만들 때 먼저 알아야 하는 것은 margin이나 padding 값을 %로 입력 했을 때 무엇을 기준으로 그 값이 정해지는지 이다. 결론부터 얘기하자면 margin이나 padding의 % 값은 부모 태그의 넓이를 기준으로 삼게 된다. 이때 조금 주의해야 하는 점은, 좌우 margin, padding 뿐만 아니라 위아래 margin, padding 역시 상위 요소의 넓이를 기준으로 삼는 다는 것이다. [ 방법 - 1 ] 정사각형 컴포넌트 height를 0으로 두고, width를..