[ CSS / SCSS ] 반응형 정사각형 만들기

HTML

<div class="card">
    <div class="card_img">
        <img src="image" alt="이미지" />
    </div>
    <div class="card_info">
        <div class="card_title">title</div>
        <div class="card_contents">contents</div>
        <div class="card_nick">nick</div>
    </div>
</div>

 

SCSS

.card {
    .card_img {
        position: relative;
        width: 50%;
        &::after {
            content: '';
            display: block;
            padding-bottom: 100%;
        }
        > img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            padding: .5rem
        }
    }
}

 

.card_img : 감싸주는 div의 크기를 설정해주고, 부모 포지션을 설정해줍니다.

::after : 가상요소를 만들어주고 content: '', display: block, padding-bottom: 100%를 설정해줍니다.

 

위처럼 해주면 정사각형이 만들어집니다.

 

이후 내부에 이미지등을 추가시켜주려면 아래에 내용을 더 추가해주면 됩니다.

img : 자식 포지션을 설정해주고, 크기를 꽉차게 해주기 위해서 크기 설정을 해줍니다.