외부페이지 위젯 코드 연결하기

1. layout_gz / htmls / gz_widget_type.html 파일은 꿀잼 레이아웃에 포함된 위젯이 미리 세팅되어 있는

   위젯 코드 위주의 외부페이지 입니다. 

2. 외부페이지의 안에 있는 위젯 코드의 경우(<img class ... >로 시작하는 코드) 각 컨텐트 위젯의

    "module_srls" 부분에 연결하고 싶은 해당 게시판의 모듈 srl 넘버를 입력해야 출력됩니다.

    먼저 자신의 사이트에 게시판이 있어야 하고 게시물이 있어야 합니다.
    (포함된 외부페이지만 연결 할 경우 게시판 연결이 없어 아무런 내용이 출력되지 않습니다.) 

    (포함된 위젯코드에 적힌 srl 넘버는 데모페이지의 srl 넘버이므로 자신의 사이트 게시판 srl 넘버로

    바꿔야 합니다.)

    (관리 > 고급 > 설치된 위젯 > 해당 위젯의 오른쪽에 코드생성 클릭, 스킨을 선택하고

    원하는 설정값들을 입력 후 코드생성을 클릭하면 코드가 생성됩니다.

    그 코드를 카피하셔서 외부페이지 해당 위젯코드 위치에 붙여넣기 하면 자신의 사이트에서 작동하는 

    가장 확실한 위젯 코드가 됩니다.)

 

 

※ slr값 확인하는 법 : xe관리자 > 즐겨찾기 > 게시판 > 편집 > 설정(톱니바퀴) 누르면

    주소창에 맨 마지막 숫자
    

3. "ws_title1" 부분에 위젯의 제목을 입력하세요.

4. "ws_more_url"부분에 위젯의 더보기 클릭시 이동할 주소를 입력하여 주십시요. 

5. 이미지 배너는 코드에서 지정한 경로를 참고하여 같은 위치의 경로로 지정하시면 됩니다. 

6. 각 외부페이지에 각각의 CSS가 연결되어 있으므로 가급적 해당 페이지 내에서 수정하시길 권장드리고 
   소스를 다른 페이지로 복사해 가실 경우 해당 CSS가 연결되어 있는지 확인후 CSS를 같이 복사해 가셔야

   오류가 생기지 않습니다.
   
7. 위젯 사이즈(부트스트랩 반응형)
    (각 사이즈별 1~12. #부분에 원하는 사이즈를 입력 후 클래스에 추가합니다.

    보통 이 div 안에 위젯 코드를 삽입합니다. 예) <div class="col-md-3">위젯코드</div>
    (예1 <div class="col-md-3">  3=25%), (예2 <div class="col-md-6">  6=50%),

    (예3 <div class="col-md-12">  12=100%))
    
    xs (폰 768px 미만)                     예) col-xs-#
    sm (태블릿 768px 이상)              예) col-sm-#
    md (데스크탑 PC 992px 이상)       예) col-md-#
    lg (와이드 PC 1200px 이상)          예) col-lg-#
    
※ 중복 기입가능 예) <div class="col-md-3 col-sm-6 col-sx-12"> 데스크탑에서 25%, 태블릿에서 50%

    모바일에서 100% 넓이로 출력됨.
    
    위젯 페이지에서 위젯으로 페이지를 구성하는 경우 위젯 페이지 복사가 불가능하고

    일일이 설정해야 하는 번거로움이 있습니다.
    또한 모바일 425px(425px 이하에서도 위젯박스 넓이가 고정) 넓이에서도 처음에 지정한 사이즈 그대로 유지되어

    한줄에 여러개의 위젯이 있고 창을 줄일 경우 폭이 좁아지므로 내용을 니다.
    제공되는 외부페이지의 위젯 코드를 활용하고 수정하여 원하는 콘텐츠를 만들고 각 화면 사이즈별

    위젯 사이즈(부트스트랩 클래스)를 지정하여 외부페이지로 연결하면 좀 더 수월하고 효율적인

    반응형 페이지를 만드실 수 있습니다.