초보운영 가이드

Local Navigation Bar

Local Search Bar

디자인 스킨 레이아웃 설정

  • 페이지 도움말

주요 사용하는 위젯입니다.

    $widget_data) { echo '
  • '.$widget_data['cda_krStr'].'
    • '; } ?>
$data) { $widget_data = $data['manual']?>

  • 위젯 도움말
  • CSS 도움말
  • HTML 도움말

설명

해당 위젯의 HTML 매뉴얼이 등록되지 않았습니다.

Tip 모두펼침

제공되는 팁이 없습니다.

설명

해당 위젯의 CSS 매뉴얼이 등록되지 않았습니다.

Tip 모두펼침

제공되는 팁이 없습니다.

설명

해당 위젯의 매뉴얼이 등록되지 않았습니다.

Tip 모두펼침

제공되는 팁이 없습니다.

설명

 

Tip 모두펼침

제공되는 팁이 없습니다.

설명

■ 디자인 스킨 레이아웃 설정 

       - 고도몰의 스킨 레이아웃은 크게 상단영역 / 하단영역 / 측면영역 / 본문영역 그리고 좌우 스크롤영역으로 구성되어 있습니다.

       - 본문 영역은 각 페이지별  html 본문영역을 의미합니다.

       - 상단, 하단, 측면, 스크롤 영역은 쇼핑몰 내 전체 혹은 일부 페이지에 공통으로 적용할 수 있는 영역입니다.

       - 측면영역의 위치와 전체 쇼핑몰 화면의 배경색상/배경이미지도 공통으로 설정할 수 있습니다.

 

     ▶ 기본 레이아웃 설정
            - 디자인 스킨 레이아웃의 각 영역별 디자인 파일을 수정하여 쇼핑몰 기본 레이아웃을 변경할 수 있습니다.
            - 레이아웃 디자인 파일을 수정 및 삭제하게 되면 해당 레이아웃이 적용된 모든 페이지에 작업 내용이 동일하게 적용됩니다.
            - 각 영역에 있는 [편집하기]를 클릭하면 해당 영역의 "디자인 페이지 수정" 화면으로 이동합니다.

            · outline/_header.html
              : 쇼핑몰 html 본문(body)의 상위 요소인 head 요소를 확인 및 수정할 수 있습니다.
                - head 요소 : html 문서 속성을 정의하는 "메타데이터"와 쇼핑몰에 적용할 스타일시트(CSS), 자바스크립트 등을 연결하거나 직접 입력할 수 있습니다. 

            · 상단영역 "파일명" 
              : "전체 레이아웃 > 상단 디자인" 폴더 내 생성된 디자인 파일을 선택하여 편집할 수 있습니다.
                - "전체 레이아웃 > 상단 디자인" 폴더에 [새로운 페이지 추가]를 클릭하여 새 페이지를 추가하거나,
                  등록되어 있던 상단영역 디자인 파일의 수정페이지에서 [새이름으로 저장]을 클릭하여 기존 디자인 파일을 복사 할 수 있습니다.

            · 측면영역 "파일명"  
              : "전체 레이아웃 > 측면 디자인" 폴더 내 생성된 디자인 파일을 선택하여 편집할 수 있습니다.
                - "전체 레이아웃 > 측면 디자인" 폴더에 [새로운 페이지 추가]를 클릭하여 새 페이지를 추가하거나,
                   등록되어 있던 측면영역 디자인 파일의 수정페이지에서 [새이름으로 저장]을 클릭하여 기존 디자인 파일을 복사 할 수 있습니다.

            ·  본문영역
              : 메인, 서브페이지 폴더 안에 수정할 페이지의  html 선택 시 본문영역을 수정할 수 있습니다.
                - 본문영역 우측 [편집하기] 클릭 시 메인페이지 본문 영역의 디자인 파일 수정페이지로 이동합니다.

            · 하단영역 "파일명"
              : "전체 레이아웃 > 하단 디자인" 폴더 내 생성된 디자인 파일을 선택하여 편집할 수 있습니다.
                - "전체 레이아웃 > 하단 디자인" 폴더에 [새로운 페이지 추가] 를 클릭하여 새 페이지를 추가하거나
                   등록되어 있던 하단영역 디자인 파일의 수정페이지에서 [새이름으로 저장]을 클릭하여 기존 디자인 파일을 복사 할 수 있습니다.

            · outline/_footer.html
              : "하단 레이아웃 _footer.html" 파일을 수정할 수 있습니다.

     ▶ 디자인 페이지 설정
            - 전체 쇼핑몰의 레이아웃의 측면위치와 배경 색상, 이미지를 지정할 수 있습니다. 
                
            · 측면디자인 영역 위치
               : "측면영역"의 위치를 "본문영역" 왼쪽 또는 오른쪽으로 설정할 수 있습니다.
 
            · 배경 색상
               : 쇼핑몰 페이지의 배경을 설정할 수 있습니다.
                - "전체 배경색상"에 색상 입력 시 쇼핑몰 전체 배경에 해당 색상으로 적용됩니다.
                - "전체 배경이미지"에 이미지 삽입 시 쇼핑몰 전체 배경에 해당 이미지가 적용됩니다.
               
               ① [모든 페이지 일괄 적용] : 디자인 스킨 레이아웃에서 설정된 "기본 레이아웃 설정" 및 "디자인 페이지 설정"을 모든 메인, 서브페이지에 적용시킬 수 있습니다. 
                   - [모든 페이지 일괄 적용] 클릭 시, 적용 항목을 설정할 수 있는 팝업이 출력됩니다. (이미지 (1-1) 참고)
                    └ 모든페이지 일괄 적용 : 배경 색상 및 이미지 외에 "기본 레이아웃 설정" 및 "측면디자인 영역 위치"가 전체 페이지에 적용됩니다. 
                    └ 모든페이지 일괄 적용(배경초기화) : 배경 색상 및 이미지를 포함하여 "기본 레이아웃 설정" 및 "디자인 페이지 설정"이 전체 페이지에 적용됩니다.
                    - "기본 레이아웃 설정" 및 "디자인 페이지 설정"을 변경하셨을 경우에는 반드시 [기본 레이아웃 저장]을 클릭하여 설정 내용을 먼저 저장한 뒤에 일괄 적용하셔야 합니다.
                    - 해당 버튼 클릭 시 쇼핑몰 내 모든 페이지에 설정 내용이 일괄 적용이 진행되며, 적용 후에는 복구가 되지 않으므로 유의하시기 바랍니다.      
               
               ②  [기본 레이아웃 저장] : 쇼핑몰 디자인 페이지의 레이아웃 및 디자인 기본값을 설정하실 수 있습니다. 
                   - 기본 레이아웃 설정 시 각 영역별(상단영역, 측면영역, 하단영역) 기본 디자인 파일을 설정할 수 있습니다.
                    └ 각 영역별 디자인 파일은 메인, 서브페이지별로 다르게 선택하여 저장할 수 있습니다. 
                   - 각 페이지에 설정된 레이아웃 및 디자인 설정이 기본값과 동일할 경우, 기본 레이아웃 변경 시에 해당 페이지에도 변경내용이 반영됩니다.
                   - 각 페이지별로 레이아웃 및 디자인 설정을 변경하신 경우(기본 레이아웃 설정값과 다른 경우), 기본 레이아웃 저장을 하였어도 해당 페이지에 변경내용이 반영되지 않습니다.
               ③ 현재 작업 중인 스킨에 대하여 표시합니다. 
                   - 기준몰의 작업 스킨을 변경하시거나, 해외상점의 작업 스킨을 수정하고자 하실 경우, 
                     [작업스킨 변경] 버튼을 클릭하여 "디자인 > 디자인 관리 > 디자인 스킨 리스트"에서 작업스킨을 변경하실 수 있습니다.             
               ④ 쇼핑몰 페이지의 기본 레이아웃을 수정할 수 있습니다.
                  - 상단, 하단, 측면 영역 기본 디자인 파일을 선택 후 [기본 레이아웃 저장]을 클릭하여 영역별 기본 디자인 파일을 변경할 수 있습니다.
                    └ 각 메인, 서브페이지의 디자인 수정 시 영역별 기본 디자인 파일 우측에는 ⓑ 표시가 추가됩니다. (이미지 (4-1) 참고)
                  - 각 영역 내 [편집하기] 버튼을 클릭하여 영역별 기본 디자인 파일을 수정할 수 있습니다. (영역은 이미지 (4-2) 참고)
                    └ 본문영역의 [편집하기] 버튼 클릭 시 메인 페이지 수정화면으로 이동합니다.              
               
               
               ⑤ 측면디자인 영역 위치 : 쇼핑몰 측면영역의 기본 위치를 변경할 수 있습니다.
                  - 측면영역의 위치를 "왼쪽 / 오른쪽" 중에 선택할 수 있습니다.
                  - 변경 후 [기본 레이아웃 저장]을 클릭하게 되면 작업중인 스킨의 측면영역 위치가 변경됩니다.
                  - 각 메인, 서브페이지의 디자인 수정 시 영역별 측면영역 위치 기본값에는 ⓑ 표시가 추가됩니다.  (이미지 (5-1) 참고)
                  - 측면영역 위치 설정과는 별개로 측면영역 "측면감춤"으로 설정된 페이지는 측면영역이 노출되지 않습니다. (이미지 (5-2) 참고)
               
              ⑥ 배경 색상 : 쇼핑몰 화면의 배경 색상 및 이미지를 설정할 수 있습니다.
                   - 색상을 선택하여 쇼핑몰 배경화면에 적용할 수 있습니다.
                   - 원하는 이미지를 업로드하여 쇼핑몰 배경화면에 적용할 수 있습니다. (이미지 (6-1) 참고)
                   - 기존에 등록한 배경 이미지가 있는 경우, [VIEW] 버튼을 클릭하여 등록한 이미지를 확인할 수 있습니다. (이미지 (6-2) 참고)
                   - [VIEW] 버튼 클릭 시 출력되는 이미지 미리 보기 팝업입니다. (이미지 (6-3) 참고)