로그인

검색

XE/Rhmix
2017.12.30 02:44

XE 레이아웃 만들기

조회 수 443 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

 

BlueNote

XpressEngine을 활용한 레이아웃 만들기 학습노트

bluenote

XE 레이아웃이란?

XE스쿨에서 나만의 레이아웃 만들기를 공부하셨다면 사용자 레이아웃의 폴더 위치와 layout.html 문서의 역할에 대해서 알 수 있습니다. 다시 정리해 보면 XE는 항상 완성된 HTML 문서를 제공합니다. 그리고 <body>와 </body> 태그 안에 표시할 내용은 사용자가 미리 만들어 둔 레이아웃 문서(layout.html)를 찾아서 확인하고 모니터 화면에 표시합니다. 그 중에서도 XE 관리자 설정에서 미리 만들어 두었던 페이지, 외부페이지, 게시판 모듈 등은 레이아웃 문서에 포함된 {$content} 변수를 이용해서 그 자리에 표시하게 됩니다. 만약 페이지, 외부페이지, 게시판 모듈의 설정에서 레이아웃을 선택하지 않았다면 레이아웃 없이 모듈만 표시하게 됩니다.

레이아웃(layout.html) 문서에는 <html>, <head>, <body>와 같은 문서 양식 태그는 필요하지 않습니다. 오직 <div>, <h1>, <p>, <ul>, <img> 등과 같이 내용을 표시할 수 있는 태그와 요소(엘리먼트)들만 배치해야 합니다. 레이아웃 문서에서 XE 템플릿 문법을 이용해 JS, CSS 문서를 불러오기 하였다면 XE는 이것을 미리 확인하고 자신의 <head>...</head> 안으로 가지고 올라 갑니다. 때문에 <body> 안에서는 JS와 CSS 구문을 찾을 수 없습니다.

XE에서 {$content} 내용 변수는 각각의 모듈을 표시하고 실제적인 내용을 출력하는 역할을 담당합니다. 반면에 헤더, 푸터, 사이드바(서브메뉴 또는 배너영역) 등은 웹사이트 방문자에게 웹서핑의 편리를 제공하기 위한 기본적인 공통 분모로써 {$content} 와는 별도로 레이아웃 안에서 미리 그 위치와 영역을 구분하여 구성하고 기능적인 역할과 함께 내용을 보다 아름답고 조화롭게 감싸안는 역할(심미감)을 할 수 있어야 합니다. 따라서 레이아웃을 만드는 것도 일종의 연구 과제라 할 수 있으며 XE스쿨 블루노트는 다양한 레이아웃의 구조(HTML)와 표현(CSS) 방법에 대해 소개할 계획입니다.


 

 

 

http://www.xeschool.com/xe/bluenote_information

?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
공지 XE/Rhmix 오라클 클라우드 - 우분투(Ubuntu) php7.3에서 php7.4로 업그레이드 하기 꽃지닷컴 2022.03.17 1347
공지 XE/Rhmix 라이믹스,XE 외부페이지 php 보안관련 꽃지닷컴 2022.03.16 1291
공지 XE/Rhmix PHP PDO CRUD with ajax jQuery and Bootstrap 회원관리(사진등록) file 꽃지닷컴 2021.03.19 1888
공지 XE/Rhmix soengsouy- PHPCRUD ALL FILE file 꽃지닷컴 2021.03.19 1293
공지 XE/Rhmix [구매하자] CRUD Application with PHP, PDO, and MySQL secret 꽃지닷컴 2021.03.19 0
공지 XE/Rhmix 라이믹스 사이트 모음 꽃지닷컴 2021.03.02 1372
공지 XE/Rhmix XE 참고 사이트 모음 secret 꽃지닷컴 2017.04.13 134
211 XE/Rhmix 꽃지닷컴 레이아웃 편집 꽃지닷컴 2017.12.03 335
210 XE/Rhmix 오른쪽 마우스 금지하기 꽃지닷컴 2017.12.05 279
209 편집파일 /common/tpl/common_layout.html secret 꽃지닷컴 2017.12.06 0
208 편집파일 widgets/contentextended/skins/default/css/widget.css 꽃지닷컴 2017.12.06 812
207 편집파일 /widgets/webcon_carousel/skins/carousel_style/css/normal.css 꽃지닷컴 2017.12.06 380
206 편집파일 /layouts/xe_kimtajo_layout/css 꽃지닷컴 2017.12.06 326
205 WEB TEXT 슬라이드 효과주기 꽃지닷컴 2017.12.14 976
204 WEB Text 애니메이션 Hover 효과 꽃지닷컴 2017.12.14 371
203 WEB CSS 버튼 animation 효과 꽃지닷컴 2017.12.16 345
202 WEB 하이브리드 채팅 연동 secret 꽃지닷컴 2017.12.17 0
201 WEB Font-awsome 적용하기 꽃지닷컴 2017.12.24 239
200 English 미국인들이 가장 많이 쓰는 100문장 꽃지닷컴 2017.12.28 182
199 XE/Rhmix 채팅 스크립트 Channel 꽃지닷컴 2017.12.28 426
» XE/Rhmix XE 레이아웃 만들기 file 꽃지닷컴 2017.12.30 443
197 XE/Rhmix 모바일 또는 이외기기 조건문으로 다르게 보이기 꽃지닷컴 2018.01.04 380
196 Joomla 줌라 무료 테마 설치하기 꽃지닷컴 2018.01.31 640
195 XE/Rhmix 본문 테두리 주기 꽃지닷컴 2018.02.05 247
194 PC 오피스 실행이 안될때 file 꽃지닷컴 2018.02.14 199
193 XE/Rhmix 아플로스 스킨 질의답변 게시판 설정 꽃지닷컴 2018.02.23 301
192 WEB Fontawsome 내 사이트에 위치 시키기 꽃지닷컴 2018.02.23 238
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 14 Next
/ 14