레이아웃 만들기 - Rhymix Documentation

레이아웃 만들기¶

레이아웃은 사이트의 전체적인 구조와 디자인을 담당하는 중요한 요소입니다. 이 문서에서는 기본적인 레이아웃을 만드는 방법과 메인/서브 페이지를 구분하는 방법을 설명합니다.

준비물¶

레이아웃을 만들기 위해서는 다음 파일들이 필요합니다:

conf/info.xml - 레이아웃 설정 파일
layout.html - 레이아웃 템플릿 파일
CSS, JS, 이미지 파일 등 (필요에 따라)

1. info.xml 설정¶

레이아웃의 기본 정보와 설정을 정의하는 파일입니다. 보통 /layouts/default/conf/info.xml 파일을 참고하여 작성합니다.

2. layout.html 작성¶

기본 구조¶

{@
    // PHP 코드 영역
    $li = $layout_info;

    // 메인 페이지 판별
    $index = ($mid=='index' && !$act) || ($site_module_info->module_srl === $current_module_info->module_srl && !$act);
}

<!-- CSS 파일 로드 -->
<load target="assets/css/style.min.css" />

<div id="wrap">
    <!-- 헤더 영역 -->
    <header id="header-wrap">
        <div class="header-tp">
            <div class="container">
                <div class="header-loginbox">
                    <ul class="header-login">
                        <li><a href="#"><span>로그인</span></a></li>
                        <li><a href="#"><span>회원가입</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="header-md">
            <!-- 로고, 메뉴 등 -->
        </div>
        <div class="header-bt"></div>
    </header>

    <!-- 콘텐츠 영역 -->
    <div id="contents-wrap">
        <div class="container">
            <div id="main">
                <!--@if($index)-->
                    <!-- 메인 페이지 콘텐츠 -->
                    인덱스
                <!--@else-->
                    <!-- 서브 페이지 콘텐츠 -->
                    {$content}
                <!--@end-->
            </div>
            <aside id="side">
                <!-- 사이드바 콘텐츠 -->
            </aside>
        </div>
    </div>

    <!-- 푸터 영역 -->
    <footer id="footer-wrap">
        <!-- 푸터 콘텐츠 -->
    </footer>
</div>

메인과 서브 페이지 구분하기¶

메인 페이지 판별 코드¶

{@
    // 방법 1: mid가 'index'이고 act가 없는 경우
    $is_main = ($mid == 'index' && !$act);

    // 방법 2: 사이트 모듈과 현재 모듈이 같고 act가 없는 경우
    $is_main = ($site_module_info->module_srl === $current_module_info->module_srl && !$act);

    // 방법 3: 두 조건을 모두 사용
    $index = ($mid == 'index' && !$act) || ($site_module_info->module_srl === $current_module_info->module_srl && !$act);
}

조건부 콘텐츠 표시¶

<!--@if($index)-->
    <!-- 메인 페이지 전용 콘텐츠 -->
    <div class="main-visual">
        <img src="main-banner.jpg" alt="메인 배너">
    </div>
    <div class="main-widgets">
        <!-- 위젯 코드 -->
    </div>
<!--@else-->
    <!-- 서브 페이지 콘텐츠 -->
    <div class="sub-content">
        {$content}
    </div>
<!--@end-->

레이아웃 구조 설명¶

주요 변수¶

$layout_info: 레이아웃 설정 정보
$mid: 현재 모듈 ID
$act: 현재 액션
$content: 모듈에서 출력하는 콘텐츠
$site_module_info: 사이트 모듈 정보
$current_module_info: 현재 모듈 정보

필수 요소¶

{$content}: 모듈의 콘텐츠가 출력되는 위치
CSS/JS 로드: <load> 태그를 사용하여 필요한 파일 로드
컨테이너 구조: 반응형 디자인을 위한 적절한 HTML 구조

실전 예제¶

반응형 레이아웃 구조¶

<div id="wrap" class="{$index ? 'main-page' : 'sub-page'}">
    <header>
        <div class="container">
            <!-- 헤더 콘텐츠 -->
        </div>
    </header>

    <main>
        <div class="container">
            <!--@if(!$index)-->
                <!-- 서브 페이지 경로 표시 -->
                <div class="breadcrumb">
                    <a href="{getUrl('')}">홈</a> &gt; 
                    {$module_info->browser_title}
                </div>
            <!--@end-->

            <div class="content-area">
                {$content}
            </div>

            <!--@if(!$index && $layout_info->use_sidebar == 'Y')-->
                <aside class="sidebar">
                    <!-- 사이드바 위젯 -->
                </aside>
            <!--@end-->
        </div>
    </main>

    <footer>
        <div class="container">
            <!-- 푸터 콘텐츠 -->
        </div>
    </footer>
</div>

디렉토리 구조¶

layouts/
└── my_layout/
    ├── conf/
    │   └── info.xml
    ├── layout.html
    ├── css/
    │   └── style.css
    ├── js/
    │   └── script.js
    └── img/
        └── logo.png

추가 팁¶

모바일 대응: 미디어 쿼리를 사용하여 반응형 디자인 구현
성능 최적화: CSS는 상단에, JS는 하단에 로드
접근성: 시맨틱 HTML 태그 사용 (header, nav, main, aside, footer)
유지보수: 재사용 가능한 컴포넌트로 구조화