J-Query는 자바스크립트의 기능을 함축시킨 일종의 프레임워크로서 코딩의 양을 대폭 줄일 수 있습니다.

J-Query를 사용하면 스마트폰에서도 잘 보이고, 로딩속도 또한 플래시보다 빠릅니다.

이번 시간은 제이쿼리를 사용해서 메인비쥬얼 이미지를 추가해보도록 하겠습니다.

 

 

 

J-Query를 사용하기 위해서 [디자인관리 > 고급 디자인 관리 > 전체 화면 구성]으로 이동합니다.

다음과 같이 XHTML형식으로 J-Query를 지원하도록 설정합니다.

① XHTML을 선택해서 J-Query가 정상적으로 나타납니다.

  

② J-Query가 자동으로 불러오도록 체크합니다.

 ③ 웹폰트를 사용하기 위해서 나눔고딕-Blod를 선택합니다.

 

※ 간혹 위와 같이 설정후 화면이 정상적으로 나타나지 않을 경우가 있습니다. 이 때에는 style을 사용한 padding, margin, width, height, ... 값에 px을 붙여주셔야 정상적으로 나타납니다. XHTML에서는 px를 삽입하지 않을 경우 0으로 인식합니다.

예를 들어,  style="padding:10px 0 5px 15px", style="margin:5px 0 0 10px",  style="width:200px, height:50px"

 

 

 

 

[디자인관리 > 전문가 환경설정 > 맞춤 XML 파일생성]로 이동합니다.

기존에 생성된 "메인 중앙 비쥬얼"에서 아래와 같이 XML유형1의 "복사"버튼을 클릭합니다.

※ 메인플래시의 경우에는 XML유형2를 사용하지만, J-Query는 XML유형1을 사용합니다.

 

 

 

 

J-Query를 생성하기 위해서 [디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]로 이동합니다.

프로그램마법사 생성버튼을 클릭해서 [XML연동 > 이미지 슬라이드 롤링 v0.02]을 선택하고 아래처럼 설정합니다.

앞에서 복사된 XML경로를 "맞춤 XML경로"에 붙여넣습니다.

 

 

 

 

앞에서 생성된 그룹디자인 코드 {GROUP_jq_main}를 메인화면에 추가해보겠습니다.

[디자인관리 > 고급 디자인 관리 > 메인 화면 디자인]의 Body디자인으로 이동해서 아래와 같이 코드를 추가합니다.

※ 기존의 메인플래시는 지우지마시고, 아래쪽에 삽입하세요~ (차후 미션확인을 위해서 필요합니다!!)

 

 완성이 되었다면 스마트폰으로 홈페이지를 확인해보시기 바랍니다.

 

 

수고하셨습니다. ^^

 

 완성화면 : http://uhkr62.aramschool.co.kr/shop_main/main_body.htm