적용버전 : XE Ver 1.5 or higher 레이아웃 추가하기

레이아웃 추가하기

레이아웃(Layout)의 역할

레이아웃은 사용자가 생성한 컨텐츠 모듈을 가장 아름답게 포장하는 겉 옷과 같기 때문에 스킨이라고도 표현하며, 웹사이트의 전체적인 스타일을 결정하기 때문에 디자인 요소입니다.


레이아웃 추가하기

레이아웃 스킨을 다운로드 받고 코어에 추가하여 사용하는 방법에 대해 알아봅니다. 레이아웃 스킨은 업로드하는 것만으로 사용할 수 없습니다. 코어는 레이아웃(layouts) 디렉터리에 새로운 레이아웃이 업로드 된 경우 [설치된 레이아웃]으로만 판단합니다. 사용자는 [설치된 레이아웃]에서 해당 레이아웃을 사용할 수 있도록 레이아웃의 복사본(객체)을 생성해야 합니다. 레이아웃은 다양한 옵션 설정을 포함하고 있습니다. 옵션에 따라 각각 복사된 레이아웃은 콘텐츠 모듈에서 선택하고 활용하게 됩니다.

  • image▲ XE 공식 홈페이지에 접속하여 다운로드 항목의 [프로그램]을 클릭합니다.
  • image▲ XpressEngine ver.2 레이아웃 스킨을 클릭합니다.
  • image▲ 레이아웃 [다운로드] 버튼을 클릭합니다.
  • image▲ 다운로드 받은 압축 파일을 해제하여 서버 계정의 layouts 디렉터리 안으로 업로드합니다.
  • image▲ 레이아웃 스킨의 업로드가 완료되면 관리자 메뉴의 [설치된 레이아웃]을 클릭합니다.
  • image▲ 추가된 XpressEngine ver.2 레이아웃을 클릭합니다.
  • image▲ 레이아웃을 생성하기 위해 [추가] 버튼을 클릭합니다.
  • image▲ 레이아웃을 사용할 때 구분하기 위한 제목을 입력합니다.
  • image▲ 레이아웃 헤더 영역에 출력할 로고와 로고이미지 링크 URL을 입력합니다.
  • image▲ 레이아웃에서 사용할 메뉴를 선택하고 [추가] 버튼을 클릭합니다.
  • image▲ 사용할 수 있는 레이아웃이 생성 되었습니다.
  • image▲ 레이아웃을 적용하는 방법에는 2가지가 있는데 우선 모듈에서 직접 설정해 봅니다. [설치된 모듈]을 클릭합니다.
  • image▲ [게시판] 모듈을 클릭합니다.
  • image▲ 콘텐츠 모듈에서 [설정]을 클릭합니다.
  • image▲ 레이아웃 옵션에서 생성한 [공식 레이아웃 2]를 선택합니다.
  • image▲ 하단의 [등록] 버튼을 클릭합니다.
  • image▲ 해당 모듈의 레이아웃이 변경 되었습니다. 이번에는 메뉴에서 [자유게시판]을 클릭합니다.
  • image▲ [설정]을 클릭합니다.
  • image▲ 같은 방법으로 사용할 레이아웃을 선택하고 하단의 [등록] 버튼을 클릭합니다.
  • image▲ 레이아웃이 적용 되었습니다.

레이아웃 스킨은 다양한 디자인과 활용을 위해 사용자 옵션을 포함하고 있습니다. 레이아웃에서 사용할 수 있는 옵션의 설정이나 이용방법은 개발자 홈페이지 또는 사용자 메뉴얼을 참고하여 적용하고 활용하도록 합니다.

image


위 레이아웃 추가 과정에서는 해당 모듈에서 레이아웃을 수정하였지만, 메뉴 링크에 포함된 모든 콘텐츠 모듈의 레이아웃를 한꺼번에 변경하고 싶다면 아래 그림과 같이 [레이아웃 일괄 적용]에 체크 표시하고 [저장]하면 메뉴와 연결된 콘텐츠 모듈의 모든 레이아웃이 일괄 변경 됩니다.

image


레이아웃 편집과 초기화

[레이아웃 편집]을 활용하면 아래 그림과 같이 내용을 직접 추가하여 사용할 수 있습니다. 아래 편집창에서 가져온 원본의 내용은 레이아웃 원본 파일(layout.html)을 참조하게 됩니다. 에디터를 이용해 간단히 레이아웃을 편집할 수 있는 편리한 기능입니다.

image

만약, [레이아웃 편집]을 활용하지 않았다면 코어는 항상 원본 파일을 참조합니다. 하지만 [레이아웃 편집]을 활용하여 [저장]하게 되면 편집된 레이아웃은 복사본을 만들어 캐시에 저장하고 사용하기 시작합니다. 이때 원본 파일(layout.html)을 수정하고 업로드 해도 코어는 캐시에 복사된 레이아웃 복사본을 참조하기 때문에 출력 화면에서는 아무런 변화가 없을 것입니다. 다시 원본 파일을 참조하려면 [초기화]를 클릭합니다. 그러면 편집된 내용은 모두 삭제되고 코어는 이때부터 다시 복사본이 아닌 레이아웃 원본 파일을 참조하며 수정된 원본 파일을 바로 적용할 수 있습니다.

TIP - 1개의 레이아웃 스킨으로 다수의 레이아웃을 생성할 수 있는 것은 복사본을 만들어 사용하기 때문입니다. 이때 [레이아웃 편집]과의 차이점은 일반 생성은 옵션 설정값만 캐시로 저장하고 원본의 내용은 레이아웃의 원본 파일(layout.html)을 참조하지만, [레이아웃 편집]은 원본 파일까지 복사하여 편집된 내용으로 변경하기 때문입니다.