레이아웃 적용

1. 우리는 앞에서 게시판과 페이지를 생성했다. 그러나 앞에서 생성한 아무런 꾸밈이 없는 게시판과 페이지로, 이를 사이트를 적용 운영하기는 다소 무리가 있다. 여기서는 페이지와 게시판 주변에 레이아웃을 적용, 배너 및 로그인 창 삽입 등을 통해 주변부를 꾸미고 메뉴와 같은 기능을 추가하는 방법에 대해 살펴보겠다. 우선 관리자 화면에의 "사이트 설정"에서 "레이아웃"을 클릭한다음 "생성"버튼을 클릭한다.

2. 레이아웃 이름의 콤보박스를 클릭하면 기본으로 제공되는 레이아웃이 보이는데 이 중 "XE 공식 사이트 레이아웃(xe_official)"을 선택한다. 그리고 제목에 "기본레이아웃"이라 입력한다. 참고로 제목은 임의의 이름을 줄 수 있다. 제목을 입력했으면 "다음" 버튼을 클릭한다.

3. 팝업창이 뜨면 "확인" 버튼을 클릭한다.

4. 레이아웃 설정화면이 나오면 각 항목을 적당히 선택한다. 여기서는 상단메뉴와 하단메뉴를 "메인메뉴"로 선택했다. "메인메뉴"는 앞 글(메뉴만들기)에서 만든 메뉴이다. 이는 레이아웃의 상단과 하단에 "메인메뉴"를 출력하도록 설정한 것이다.

5. 팝업창이 뜨면 "확인" 버튼을 클릭한다.

6. 이제 페이지 관리 화면으로 이동한 후 "메인페이지" 설정아이콘을 클릭한다.

7. 페이지 설정화면의 레이아웃 항목의 콤보박스를 클릭하면 위에서 생성한 "기본레이아웃 (xe_official)"이 보이는데 이를 선택한 다음 "저장" 버튼을 글릭한다.

8. 팜업창이 뜨면 "확인" 버튼을 클릭한다.

9. 이제 페이지 관리화면의 페이지 목록에서 "메인페이지"를 클릭하면 페이지가 아래와 같이 변한것을 알 수 있다. 여기서 상단의 메뉴와 하단의 메뉴가 표시되고 있음을 볼 수 있다.

10. 이제 위에서 만든 기본 레이아웃을 "공지사항" 게시판에 적용해보자. 이를 위해 게시판 목록으로 이동한 후 "공지사항" 게시판의 설정 아이콘을 클릭한다.

11. "공지사항" 게시판 설정 화면에서 레이아웃 항목을 "기본레이아웃 (xe_official)"으로 한 후 "등록" 버튼을 클릭한다.

12. 팝업창에 응답한 후 게시판 목록으로 이동 브라우저 제목 "공지사항"을 클릭한다.

13. 그러면 "공지사항" 게시판도 "메인페이지"와 동일한 레이아웃이 적용됐음을 볼 수 있다. 만약 "공지사항"이 아닌 다른 게시판을 클릭해보면 "공지사항"과는 다른 화면을 보게된다. 이는 다른 게시판에는 레이아웃이 적용되지 않았기 때문이다. 다른 게시판에도 "공지사항"과 동일한 레이아웃을 적용하려면 각 게시판의 설정 아이콘을 통해 레이아웃을 적용하면 된다.