인천시 공간정보플랫폼에서 사용하는 다양한 레이아웃 구조와 사용법을 안내합니다. KRDS 기반의 표준화된 레이아웃을 통해 일관된 사용자 경험을 제공합니다.

📁 레이아웃 구조 이해하기

태그 파일(.tag)과 JSP 레이아웃 파일(.jsp)의 2단계 구조로 구성됩니다.

        /tags/layout/resDefault.tag → /jsp/common/layout/res/resDefaultLayout.jsp
    

resDefault 레이아웃

헤더, 좌측 내비게이션, 컨텐츠 영역을 포함한 기본 관리자 레이아웃입니다. 대부분의 관리 페이지에서 사용됩니다.

📄 resDefault.tag → resDefaultLayout.jsp

resEmpty 레이아웃

최소한의 구조만 제공하는 빈 레이아웃입니다. 팝업이나 특별한 페이지에서 사용됩니다.

📄 resEmpty.tag → resEmptyLayout.jsp

resIndex 레이아웃

메인 페이지용 레이아웃으로 전체 화면을 활용하는 구조입니다.

📄 resIndex.tag → resIndexLayout.jsp

resLayer 레이아웃

모달이나 레이어 팝업에 특화된 레이아웃입니다.

📄 resLayer.tag → resLayerLayout.jsp

사용 예시

<%@ taglib prefix="layout" tagdir="/WEB-INF/tags/layout" %>

<layout:resDefault>
    <jsp:attribute name="title">페이지 제목</jsp:attribute>
    <jsp:attribute name="script">
        <script src="/static/custom/page.js"></script>
    </jsp:attribute>
    <jsp:body>
        <!-- 페이지 내용 -->
        <div class="contents">
            여기에 페이지 내용을 작성합니다.
        </div>
    </jsp:body>
</layout:resDefault>

레이아웃 동작 원리

1. JSP에서 <layout:resDefault> 태그 사용
2. resDefault.tag가 호출됨
3. <jsp:doBody>로 JSP 본문 내용을 캡처
4. resDefaultLayout.jsp로 내용을 전달하여 실제 HTML 렌더링
5. KRDS 스타일이 적용된 완성된 페이지 출력

파트별 커스터마이징 가이드

태그 파일 수정

/WEB-INF/tags/layout/ 경로의 .tag 파일을 수정하여 래퍼 로직 변경

레이아웃 JSP 수정

/jsp/common/layout/res/ 경로의 실제 레이아웃 파일 수정

스타일 경로 변경

각 파트별 /static/파트명/ 경로로 CSS/JS 리소스 분리

Include 파일 관리

헤더, 푸터, 내비게이션 등 공통 요소의 독립적 관리

레이아웃 가이드