일단 이걸 css 트릭이라고 부르긴 하지만, 뭐 거창할 거 없이 팁정도의 내용이다. 일반적으로 기본서에는 잘 나오지 않는 내용을 다룰 예정이다. 정사각형 만들기 정사각형 만들기가 뭐 그리어렵다고, 글을 작성하는가? 라고 말할 수 있다. 당연하게도 맞는 말이다. <div style =" width : 200 px ; height : 200 px ; background : green" > 200*200 </div> 당연하게도 위처럼 하면 200*200의 정사각형이 된다. 만들어야 할 정사각형의 크기를 안다면 위처럼 지정 해줄 수 있다. 하지만, 부모 너비에 비례하는 정사각형을 만들려고 해보자. 예를 들어 부모의 너비의 10%하는 정사각형 말이다. <div style =" width : 10 % ; height : 10 % ; background : green" > 200*200 </div> 간단하게 작성해보았다. 하지만, 우리가 원했던 정사각형의 모양은 아니다. 아쉽게도 위의 코드는 부모(컨테이닝 블록)의 너비 10%, 높이 길이 10%이기 때문에 너비에 해당하는 정사각형을 이루기에는 어렵다. 비율지정 우리는 길이를 넣을 수 있는 속성의 값에 백분률도 넣기도 한다. 그런데 그 백분률이 무엇에 대한 백분률인지는 문서를 확인해보지 않으면 알 수 없다. 그래도 추정 할 수 있는 것은 width은 부모의 width를 height는 부모의 height를 따라가겠지 정도이다. 아래는 어떤 속성이 부모의 width, height따라 가는지에 대한 표이다. 부모의 width : width, left, right, padding, margin 부모의 heigh : height, top, bottom 자 위의 설명 대로면, padding이나 margin의 경우 padding-top, m...