모바일웹 만들기

개요

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

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

최근게시글 가져오기

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

공지사항 및 자유게시글은 최신 등록순으로 3개만 출력하고 사진 갤러리는 관리자가 지정한 게시글만 출력 해보도록 하겠습니다.
[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]로 이동 후 [프로그램 마법사 생성]을 클릭 합니다.
[게시글출력 탭]을 클릭 후 프리미엄 그룹디자인에서 "최근 게시글 - 목록형"을 선택 후 생성 합니다.


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


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


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

최근 등록한 사진 가져오기

갤러리게시판은 위 공지게시판, 자유게시판과는 달리 관리자가 지정한 게시글만 메인에 출력 해야 합니다.
PC웹을 제작하면서 메인화면 출력 그룹을 만들었기 때문에, 바로 그룹디자인을 생성해 보도록 하겠습니다.
[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]에서 [프로그램마법사 생성]을 통해서 "최신게시글 - 앨범형"을 선택 합니다.


아래와 같은 마법사 환경설정이 나타 나는데 이때 메인출력 그룹에서 "메인 갤러리" 를 선택 합니다.
모바일웹은 가로크기가 작으므로, 컬럼수를 2단으로 설정하고 출력수도 4로 입력합니다.

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

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

PC웹을 제작하면서 프로그램샵을 통해 메인 슬라이드를 설치하였는데, 모바일도 비슷한 방법으로 슬라이드를 설치해 보도록 하겠습니다.
[프로그램샵 > 프로그램 추가설치 > 견적문의]로 이동 후 "미디어"를 클릭합니다.
'SlidesJS jQuery 이미지 슬라이드' [모바일] 버전을 설치해 보도록 하겠습니다.


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



생성된 추가페이지의 경우 이해를 돕기위한 설명페이지이므로 확인하신 후 삭제하시면 됩니다.
이렇게 생성된 {GROUP_top_img_m}을 [디자인관리 > 고급 디자인 관리 > 메인 화면 디자인] 에 붙여보도록 하겠습니다.


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

수고하셨습니다.


top