HTML과 CSS로 사각형 만들기

HTML

컨텐츠는 특정 구간을 만드는 태그로 두 번 감싼다.

<div class="wrap-content">

    <div class="content">

    컨텐츠

    </div>

</div>

CSS

실제 길이는 wrap 클래스에서 모두 만들고, body 클래스는 그 위에 떠 있는 상태로 지정된다.

.wrap-content{

    position:relative;

    width:20px ; /* 원하는 길이 */

}

.wrap-content:before {

    content:"";

    display:block;

    padding-top:100%; /* 원하는 높이 */

}

.wrap-content .content {

    position:absolute;

    top:0;

    right:0;

    bottom:0;

    left:0;

}