Components - layout

comment

  • 레이아웃 모드:
    • app-body--split: 사이드바와 메인 콘텐츠 영역을 좌우로 분할
    • app-body: 사이드바 없이 전체 너비 레이아웃 사용
  • 필수 구조: 작업 영역(app-workspace)이 필요하며, app-body--split 모드에서는 사이드바(app-sidebar)도 필요합니다.
  • 헤더 영역: app-header 내부에는 유틸리티 영역(app-utils)을 구성합니다. app-body 모드에서는 서비스 영역(app-service)도 포함할 수 있습니다.
  • 메인 콘텐츠: main.main 요소에 실제 페이지 콘텐츠를 추가합니다.
  • 페이지별 제어: 페이지별로 제어할 수 있는 클래스는 main 요소에 추가합니다.
layout - split

예제보기

HTML 구조
<div class="app">
  <div class="app-body app-body--split">
    <!-- sidebar -->
    <aside class="app-sidebar"> ~ </aside>
    <!-- // sidebar -->

    <div class="app-workspace">
      <header class="app-header">
        <div class="app-utils"> ~ </div> <!-- // app-utils -->
      </header>

      <main class="main main-dashboard">
        <div class="main-header">
          <h1 class="main-header__title">타이틀 영역</h1>
        </div>

        <div class="main-content"> ~  </div>
      </main>
    </div>
  </div>
</div>
layout - header(sticky)

예제보기

HTML 구조
<div class="app">
  <div class="app-body">
    <div class="app-workspace">
      <header class="app-header">
        <div class="app-service"> ~ <div> <!-- app-service -->
        <div class="app-utils">  ~ <div> <!-- app-utils -->
      </header>

      <main class="main">
        <div class="main-header">
          <h1 class="main-header__title">타이틀 영역</h1>
        </div>

        <div class="main-content"> ~ </div>
      </main>
    </div>
  </div>
</div>