LAYOUT LAB / CANONICAL HTML + CSS

읽는 동안 곁에 머무는 목차

Keep related aside content visible during long reads.

720px

원문 CSS의 공간 배치를 실행합니다. 색·테두리는 영역 구분용이며, 비어 있던 미디어와 설정 슬롯에는 예시 콘텐츠를 채웠습니다.

실행한 HTML·CSS 코드
<section class="sticky_aside" aria-label="Long article">
    <main class="sticky_aside_main">Article sections continue down the page.</main>
    <aside class="sticky_aside_side">Table of contents</aside>
</section>

<style>
.sticky_aside {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 16rem;
}

.sticky_aside_main {
    min-inline-size: 0;
}

.sticky_aside_side {
    inset-block-start: 1rem;
    position: sticky;
}

</style>
원문 가이드