LAYOUT LAB / CANONICAL HTML + CSS

Layout Brief Template

Questions to answer before selecting a layout pattern stack.

720px

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

실행한 HTML·CSS 코드
<section class="settings_shell" aria-label="Settings">
    <nav class="settings_shell_nav" aria-label="Settings sections"><a href="#profile">Profile</a><a href="#notifications">Notifications</a></nav>
    <main class="settings_shell_scroll_area"><section id="profile"><h2>Profile</h2><p>A bounded shell with a scrollable body.</p></section><section id="notifications" style="min-height:900px"><h2>Notifications</h2><p>Scroll this region while navigation stays in place.</p></section></main>
</section>

<style>
.settings_shell {
    block-size: 100dvb;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
}

.settings_shell_scroll_area {
    min-block-size: 0;
    overflow: auto;
}

</style>
원문 가이드