|
|
 4. 사이트 제작하기
4-6. 페이지 코딩하기 (2) (Module 추가하여 다시 코딩하기)
이제 방금전 생성한 [메인메뉴] 모듈을 9개의 페이지에 적용(Embed)하도록 하겠습니다.
시작페이지(index)를 작업창(HTML소스보기창)으로 읽어 들입니다.
그림_17 : 모듈 적용하기 - 작업할 페이지 불러오기
다음과 같이 소스를 수정-저장 하시고 작업중인 사이트를 브라우저에서 다시 읽기(F5번 키) 한 후 어떻게 변했는지 확인합니다.
그림_18 : 모듈을 적용(Embed)한 소스
원래 있던 메인메뉴 부분이 사라졌습니다. 메뉴테이블에 해당하는 모듈이 적용되고 있지 않기때문입니다.
그림_19 : 모듈을 잘못 적용한 경우
다시 모듈 적용 작업중인 빌더의 작업창(시작페이지(index))을 보시기 바랍니다.
지금부터 빌더의 모듈 사용시 가장 주의해야 할 사항에 관한 내용이 나옵니다.
!! 중요 : 특정 페이지 내에서 모듈을 사용하기 위해서는 해당 페이지가 사용할 모듈 리스트를 미리 작성해 두어야 합니다.
다음은 특정 페이지 내에서 사용할 수 있는 모듈을 확인하고 모듈을 추가 지정하는 방법입니다.
[모듈정보보기]를 누릅니다.
그림_20 : [모듈정보보기] 버튼 선택
현재 작업중인 페이지에서 사용할 수 있는 모듈 리스트가 출력됩니다.
[메인메뉴 모듈] 적용을 위해 작업하고 있는 페이지에는 사용가능한 모듈 (등록된 모듈이)이 하나도 없음을 확인 할 수 있습니다.
사용할 모듈을 추가하기 위해 [전체모듈리스트] 버튼을 누릅니다.
그림_21 : 현재 작업 페이지에서 사용가능한 모듈듈정보보기
모듈 리스트 팝업창에서 사용할 모듈을 지정합니다. 지정하는 방법은 그림과 같습니다.
여기에서 지정-추가하는 모듈은 시작페이지(index)에서만 사용하는 모듈이라는 것을 꼭 기억하시기 바랍니다.
그림_22 : 모듈 리스트에서 모듈 추가하기 - 전
그림_23 : 모듈 리스트에서 모듈 추가하기 - 후
모듈정보에 메인메뉴 변수가 추가된 것을 확인하실 수 있습니다.
그림_24 : 사용가능한 모듈의 확인
이 상태에서 다시 작업창을 등록(저장) 하시고 작업중인 사이트를 브라우저에서 다시 읽기(F5번 키) 한 후 어떻게 변했는지 확인합니다.
그림_25 : 모듈이 정상적으로 적용된 사이트
이제 나머지 8개 페이지의 HTML 소스에도 [메인메뉴 모듈]을 적용하여 보시기 바랍니다.
!!주의 : 다시 한번 말씀드리면 [메인메뉴모듈]을 페이지 내에 Embed 하시기 전에 해당 페이지가 사용할 수 있는 모듈의 목록을 확인하시고 필요한 모듈이
등록되어 있지 않다면 반드시 위와 같은 방법으로 모듈을 추가-지정해 주시기 바랍니다.
|
4-1. 사이트구조 & 메뉴 
4-8. 게시판 모듈 추가하기