0. 개요

이번 강좌에서는 메인화면을 만들어 보도록 하겠습니다.

 

 

 

1. 메인페이지에 게시글 가져오기

1.1 최근게시글 가져오기

PC웹과 동일하게 생성하지만, 모바일에 맞게 약간 변경해서 만들어 봅시다.

공지사항 및 자유게시글은 최신 등록순으로 3개만 출력하고 사진 갤러리는 관리자가 지정한 게시글만 출력 해보도록 합겠습니다.

[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리] 로 이동 후 [프로그램 마법사 생성]을 클릭 합니다.

[게시글출력 탭]을 클릭 후 프리미엄 그룹디자인에서 "최근 게시글 - 목록형"을 선택 후 생성 합니다.

 

 

[사용] 버튼 클릭 하면 아래와 같이 환경 설정 화면이 출력 됩니다. 게시판 코드에 "공지사항"을 선택 하고 출력수를 3 입력 후 그룹디자인을 생성 합니다.

 

 

생성된 {GROUP_notice} 코드를, [디자인관리 > 고급 디자인 관리 > 메인 화면 디자인] 으로 이동 해서 적당한 위치에 붙여 보시기 바랍니다.

 

 

공지 게시판을 불러왔다면 자유게시판도 똑같은 방식으로 만들어 보시기 바랍니다. 작업 방법은 위 와 동일하므로 설명은 생략하겠습니다.

 

 

 

1.2 최근 등록한 사진 가져오기

갤러리게시판은 위 공지게시판, 자유게시판과는 달리 관리자가 지정한 게시글만 메인에 출력 해야 합니다.

PC웹을 제작하면서 메인화면 출력 그룹을 만들었기 때문에, 바로 그룹디자인을 생성해 보도록 하겠습니다.

[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리] 에서 [프로그램마법사 생성]을 통해서 "최신게시글 - 앨범형"을 선택 합니다.

 

 

아래와 같은 마법사 환경설정이 나타 나는데 이때 메인출력 그룹에서 "메인 갤러리" 를 선택 합니다.

모바일웹은 가로크기가 작으므로, 컬럼수를 2단으로 설정하고 출력수도 4로 입력합니다.

 

 

마찬가지로, 생성된 {GROUP_photo} 코드를 메인화면에 붙여넣습니다.

 

 

 

2. 메인에 슬라이드 이미지 설치

PC웹을 제작하면서 프로그램샵을 통해 메인 슬라이드를 설치하였는데, 모바일도 비슷한 방법으로 슬라이드를 설치해 보도록 하겠습니다.

[프로그램샵 > 프로그램 추가설치 > 견적문의] 로 이동 후 "미디어"를 클릭합니다.

'SlidesJS jQuery 이미지 슬라이드' [모바일] 버전을 설치해 보도록 하겠습니다.

 

 

[설치하기]를 클릭 하고, 코드를 다음과 같이 설정합니다.

 

 

생성된 추가페이지의 경우 이해를 돕기위한 설명페이지이므로 확인하신 후 삭제하시면 됩니다.

이렇게 생성된 {GROUP_top_img_m}을 [디자인관리 > 고급 디자인 관리 > 메인 화면 디자인] 에 붙여보도록 하겠습니다.

 

 

 

홈페이지에서 메인화면이 정상적으로 출력되는지 확인하고, 직접 게시글도 확인해보세요.

 

http://uany05.anybuild.com/m

 

 

 

수고하셨습니다.