03. 레이아웃

03. 레이아웃¶

사이트의 전체적인 구조와 디자인을 담당하는 레이아웃에 대해 학습합니다.

📋 이 섹션에서 다루는 내용¶

기본 레이아웃¶

• 레이아웃 만들기 - 기본 구조와 메인/서브 페이지 구분
• 헤더와 푸터 (준비 중)
• 메뉴 시스템 (준비 중)

위젯 활용¶

• 콘텐츠 위젯 (준비 중)
• 로그인 위젯 (준비 중)
• 최신글 위젯 (준비 중)

반응형 디자인¶

• 모바일 대응 (준비 중)
• 미디어 쿼리 활용 (준비 중)

🎯 학습 목표¶

이 섹션을 완료하면 다음을 할 수 있습니다:
- 커스텀 레이아웃 제작
- 위젯을 활용한 동적 콘텐츠 구성
- 반응형 웹 디자인 구현
- 다국어 지원 레이아웃 제작

📁 레이아웃 파일 구조¶

layouts/my_layout/
├── conf/
│   └── info.xml          # 레이아웃 정보
├── layout.html           # 메인 템플릿
├── layout.m.html         # 모바일 템플릿 (선택)
├── css/
│   ├── layout.css        # PC 스타일
│   └── mobile.css        # 모바일 스타일
├── js/
│   └── layout.js         # 자바스크립트
└── img/                  # 이미지 파일들

💡 유용한 팁¶

레이아웃 변수¶

// 현재 페이지 정보
$layout_info      // 레이아웃 설정
$mid              // 모듈 ID
$act              // 현재 액션
$module_info      // 모듈 정보
$logged_info      // 로그인 정보

조건부 로딩¶

<!-- PC만 -->
<load target="pc.css" targetie="!IE" cond="!Mobile::isMobile()" />

<!-- 모바일만 -->
<load target="mobile.css" cond="Mobile::isMobile()" />

<!-- 관리자만 -->
<load target="admin.css" cond="$logged_info->is_admin == 'Y'" />

다음 단계¶

레이아웃의 기본을 익혔다면 게시판 스킨으로 이동하여 콘텐츠 표시 방법을 학습하세요.