GNB / LNB / SNB 레이아웃 작업 절차

헤더(GNB)와 서브페이지 네비게이션(LNB·SNB)을 구성할 때 ND CMS는 방식 B(관리자 프리셋 즉시 선택)와 방식 A(커스텀 HTML 블록 + 동적 치환자 퍼블리싱) 두 가지 방식을 모두 지원합니다.

(1) 방식 B — GNB & 서브(LNB/SNB) 프리셋 선택 (권장 · 코딩 불필요)

관리자 콘솔 [레이아웃/블록 관리] (/_ndm/layout) 상단 카드에서 사이트별로 원하는 GNB 유형과 서브 네비게이션 유형을 선택하고 [네비게이션 프리셋 저장]을 누르면 즉시 반영됩니다.

(2) 방식 A — HEADER & SUB_LAYOUT 커스텀 블록 퍼블리싱 (자유도 100%)

프리셋 구조를 넘어 사이트 고유 디자인 시안의 HTML 마크업을 100% 그대로 적용해야 할 때는 [레이아웃/블록 관리]에서 HEADER 블록과 SUB_LAYOUT 블록을 편집합니다.

1. 프리셋 기본 템플릿 불러오기

   HEADER 또는 SUB_LAYOUT 편집 화면 우측 상단에서 원하는 프리셋(MEGA/DROPDOWN/SIMPLE 또는 LNB/SNB/BOTH)을 선택하고 [템플릿 불러오기]를 클릭하면 표준 HTML 골격과 치환자가 에디터에 자동 삽입됩니다.

2. 동적 메뉴 치환자 배치

   하드코딩된 메뉴 링크 대신 {{GNB_MENU}}, {{BREADCRUMB}}, {{SNB_MENU}} 등의 치환자를 원하는 위치에 배치하면 관리자 [메뉴관리] 트리와 실시간 연동됩니다.

3. 실시간 미리보기 및 프리셋 복귀

   편집 화면 하단에서 실제 메뉴 트리가 결합된 렌더링 결과를 즉시 확인합니다. 다시 방식 B(프리셋 모드)로 돌아가려면 블록 내용을 모두 비우고 저장하면 됩니다.

(3) SUB_LAYOUT 커스텀 블록 작성 예시 (좌측 SNB + 우측 본문)

SUB_LAYOUT 블록은 {{SUB_BODY}} 치환자를 기준으로 상단 래퍼와 하단 래퍼가 자동 분리되어 모든 콘텐츠(content.jsp)와 게시판(board_list.jsp, board_view.jsp) 본문을 감쌉니다.

<!-- SUB_LAYOUT 블록 커스텀 마크업 예시 -->
<div class="sub_head">
  <div class="sub_vis {{VIS_CLASS}}">
    <h3>{{VIS_TOP}}</h3>
    <h2>{{VIS_TITLE}}</h2>
  </div>
  <nav class="sub_nav"><div class="s_inner">
    {{BREADCRUMB}}
    {{SHARE_BAR}}
  </div></nav>
</div>
<div class="sub_layout_wrap sub_layout--both">
  <aside class="snb_side">
    <div class="snb_title"><span>{{SNB_TITLE}}</span></div>
    {{SNB_MENU}}
  </aside>
  <div class="sub_body_area">
    {{SUB_BODY}}
  </div>
</div>

퍼블리셔 필수 수칙 & 10종 블록 관리

ND CMS는 퍼블리셔가 웹 브라우저 관리자 콘솔에서 직접 레이아웃 마크업과 스타일시트, 스크립트를 편집할 수 있도록 동적 에셋 서빙 메커니즘을 제공합니다.

전체 10종 레이아웃 블록 코드 및 역할