example.html

<style>
.p,.c {
    border: solid 1px;
}
.p {
    width: 800px;
    position: relative;
    padding: 30px;
    background: #FFF;
}
.p.full-w {
    width: auto;
}
.c {
    background: lightyellow;
}
.c.size {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    padding: 5px;
}
.h-100 {
    height: 100px;
}
.scroll { overflow-y: scroll; height: 300px; }
.offset { left: 50px; bottom: 50px; }
.top-10 { top: 10px; }
.pos-sta { position: static; }
.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.pos-fix { position: fixed; }
.flex { display: flex; }
.f-1 { flex: 1; }
.f-2 { flex: 2; }
.f-3 { flex: 3; }
.f-c { align-items: center; }
.grid {
    display: grid;
    grid-template-columns: 100px 1fr 2fr;
    gap: 10px;
    grid-auto-rows: 50px;
}
.gc {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}
.grid-a {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    grid-template-columns: 100px 1fr;
    gap: 20px;
}
header { grid-area: header; }
article { grid-area: content; }
aside { grid-area: sidebar; }
footer { grid-area: footer; }
</style>

<details>
    <summary>position 예제</summary>
    <div class="p scroll">
        this is relative parent
        <div class="c size pos-sta offset">
            1. static
        </div>
        <div class="c size pos-rel offset">
            2. relative
        </div>
        <div class="c size pos-abs offset">
            3. absolute
        </div>
        <div class="c size pos-fix offset">
            4. fixed
        </div>
        <div class="c size pos-sta offset">
            5. static
        </div>
        <div class="c size pos-sta offset">
            6. static
        </div>
        <div class="c size pos-sta offset">
            7. static
        </div>
    </div>
</details>

<details>
    <summary>normal flow 예제</summary>
    <div class="p">
        <div class="c">
            div는 block입니다.
        </div>
        <span class="c">
            span은 inline입니다.
        </span>
        inline은 바로 오른쪽에서 계속됩니다. llorem ipsumlorem ipsumorem ipsum
        <span class="c">
            span은 줄이 넘어가기도 합니다.
        </span>
        <div class="c">
            새로운 block은 다음 줄에 배치됩니다.
        </div>
    </div>
</details>

<details>
    <summary>flexbox 예제</summary>
    <h3>flex만 지정한 기본 레이아웃.</h3>
    <div class="p flex">
        <div class="c">
            자식1
        </div>
        <div class="c">
            자식2는 내용이 좀 있어요
        </div>
        <div class="c size">
            자식3은 크기가 있어요
        </div>
    </div>
    <hr>
    <h3>자식에 flex 값을 줘보자</h3>
    <div class="p flex">
        <div class="c f-1">flex: 1</div>
        <div class="c f-3">flex: 3</div>
        <div class="c f-2">flex: 2</div>
    </div>
    <hr>
    <h3>center로 정렬해보자</h3>
    <div class="p flex f-c">
        <div class="c f-1">flex: 1</div>
        <div class="c size f-3">flex: 3, with size</div>
        <div class="c f-2">flex: 2</div>
    </div>
</details>

<details>
    <summary>grid 예제</summary>
    <div class="p grid full-w">
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
        <div class="c gc">col 1/3, row 2/4</div>
    </div>
    <div class="p grid-a full-w">
        <header class="c">this is header</header>
        <article class="c">this is content</article>
        <aside class="c h-100">this is sidebar</aside>
        <footer class="c">this is footer</footer>
    </div>
</details>