편집 창 상세 기능 설명

폴더 추가/화면 추가

원하는 경로에 폴더, 화면을 생성할 수 있어요.
예를 들어 새로운 기능을 적용하기 위해 안내되는 내용이 있을 때 폴더 추가/화면 추가 기능을 이용할 수 있어요.

새 이름 저장

선택한 파일을 지정한 이름의 새 파일로 저장할 수 있어요.

최신 소스

현재 수정 중인 화면의 최신 버전을 볼 수 있어요.
수정 후에는 저장을 눌러 주세요.
소스가 반영되어요.

소스 일괄 변경

수정 중인 파일에서 특정 소스를 찾아 한 번에 수정할 수 있어요.
분할 보기, HTML 보기 모드에서만 가능해요.
해당 기능을 사용한 뒤 다시 변경 전으로 되돌리고 싶을 때는 히스토리 기능을 이용하면 되어요.

수정 화면 모드: 화면 보기

수정하는 화면을 미리 보기 형태로 볼 수 있어요.
수정 즉시 수정 내용이 반영되어요.
단, 저장된 게 아니기 때문에 저장하고 싶다면 저장을 눌러 주세요.
마우스 움직임에 따라 모듈 단위로 영역이 표시되어요.
원하는 영역의 편집 버튼을 눌러 수정할 수 있어요.
모듈 추가 기능은 지원되지 않아 모듈을 선택할 수 없는 상태로 표시되어요.

수정 화면 모드: 분할 보기

수정하는 화면을 화면 보기 영역과 HTML 영역으로 나누어 두 가지 상태를 동시에 볼 수 있어요.
화면 보기 영역에서 모듈 단위를 선택하면 선택한 모듈의 소스 위치가 HTML 영역에 표시어요.
HTML 영역에서 소스를 수정한 뒤 미리 보기 버튼을 누르거나 저장하면 화면 보기 영역에 수정된 내용이 반영되어요.
모듈 추가 기능이 지원되기 때문에 원하는 위치에 마우스 커서를 올려놓고 모듈 추가를 누르면 원하는 모듈을 추가할 수 있어요.

수정 화면 모드: HTML 보기

수정하는 화면의 HTML 소스만 볼 수 있어요. 
모듈 추가 기능이 지원되기 때문에 원하는 위치에 마우스 커서를 올려놓고 모듈 추가를 누르면 원하는 모듈을 추가할 수 있어요.

모듈

모듈이란 프로그램을 이루는 최소 단위로 1개 또는 그 이상의 콘텐츠와 기능을 하나로 모은 묶음이에요.
각 모듈은 HTML과 변수가 한 덩어리로 모여 동작해요.
모듈은 하나의 독립된 완전한 프로그램으로 사용자가 입력한 module="모듈 아이디(모듈명)"에 따라 판단되고 동작해요.
카페24에서는 다양한 모듈을 제공하고 있어요.
모듈 코드를 HTML  소스 중 원하는 위치에 삽입하여 사용할 수 있어요.

모듈 추가/교체하기

모듈을 추가하거나 교체하는 방법은 두 가지예요.

1. 모듈 편집 창 이용

스마트디자인 편집 창에서 모듈의 편집 버튼을 눌러 주세요.
모듈 편집 창에서 추가할 모듈을 선택하고, 선택한 모듈이 추가될 위치를 선택한 뒤 적용해 주세요.

2. 모듈 추가 버튼 이용

스마트디자인 편집 창에서 분할 보기 또는 HTML 보기 상태로 모듈을 추가할 위치를 HTML 영역에서 선택해 주세요.
모듈 추가 버튼으로 모듈 편집 창을 열어 원하는 모듈을 선택하고 적용해 주세요.

디자인 구조

온라인 쇼핑몰을 비롯해 모든 웹 사이트는 전체적으로 공통된 구조가 있어요.
레이아웃은 전체 구조 중 공통으로 사용되는 영역을 가리키고, 크게 네 부분으로 나뉘어요.

1. 머리글(Header)

온라인 쇼핑몰의 모든 페이지 맨 위에 표시되는 영역이에요.
보통 로고, 로그인 정보, 검색 창, 바로 가기 등이 노출되어요.

2. 탐색(Side)

고객이 쇼핑몰을 둘러보는 데 도움이 될 만한 메뉴가 표시되는 영역이에요.
로그인, 마이 쇼핑, 사이드바형 검색 창, 상품 분류 메뉴, 기획전, 고객 상담 안내, 게시판 목록, 인기 상품 등이 노출되어요.

3. 본문 (Body)

머리글과 바닥글 사이 영역이에요.
머리글, 바닥글과 달리 고정되지 않고, 페이지마다 다른 디자인으로 노출될 수 있어요.

4. 바닥글(Footer)

온라인 쇼핑몰의 모든 페이지 맨 아래에 표시되는 영역이에요.
회사 정보, 이용 안내, 고객센터 안내 등이 노출되어요.

반응형 설정하기

스마트디자인 반응형 스킨은 크게 두 가지로 나뉘어요.

1. PC 디자인만 제공하는 반응형 스킨

• 구매할 경우, 상품 구분에 PC 디자인만 표시되어 있어요.
  
  
• 대표 디자인으로 설정하는 경우, [관리자] 디자인 > 디자인 보관함 으로 이동해 주세요.
  그다음 '모바일 탭'에서 모바일 전용 디자인 사용 설정을 '사용 안함'으로 선택해 주세요.

2. PC와 모바일 디자인 각각 제공하는 반응형 스킨

• 구매할 경우, 상품 구분에 PC, 모바일 디자인으로 표시되어 있어요.
  
  
• 대표 디자인으로 설정하는 경우, [관리자] 디자인 > 디자인 보관함 으로 이동해 주세요.
  그다음 '모바일 탭'에서 모바일 전용 디자인 사용 설정을 '사용함'으로 선택해 주세요.

연관 콘텐츠