2026, 새로운 도약을 시작합니다.

css 정렬 질문 입니다. 채택완료

10개월 전 조회 4,432

아래 형태의 레이아웃으로 display 시킬려면 css 어떻게 해야 될까요?

32936023_1740459417.333.png

답변 2개

채택된 답변
+20 포인트
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

다음 코드가 도움이 될지 모르겠습니다.

Copy




:root {

    --wrap-height: 30em;

    --wrap-el-gap: 0.2em;

}

* {

    box-sizing: border-box;

}



.wrap {

    background-color: #ededed;

    height: var(--wrap-height);

    display: inline-flex;

    flex-flow: column wrap;

    gap: var(--wrap-el-gap);

}

.wrap .el {

    border: 1px solid #ccc;

    width: 10em;

}

.wrap .el.sz-1 { height: calc(var(--wrap-height) * 0.1); }

.wrap .el.sz-2 { height: calc(var(--wrap-height) * 0.2); }

.wrap .el.sz-3 { height: calc(var(--wrap-height) * 0.3); }

.wrap .el.sz-half { height: calc(var(--wrap-height) * 0.5 - calc(var(--wrap-el-gap) * 0.5)); }



 



    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13



로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고