- 저작권 침해가 우려되는 컨텐츠가 포함되어 있어
글보내기 기능을 제한합니다.
네이버는 블로그를 통해 저작물이 무단으로 공유되는 것을 막기 위해, 저작권을 침해하는 컨텐츠가 포함되어 있는 게시물의 경우 글보내기 기능을 제한하고 있습니다.
상세한 안내를 받고 싶으신 경우 네이버 고객센터로 문의주시면 도움드리도록 하겠습니다. 건강한 인터넷 환경을 만들어 나갈 수 있도록 고객님의 많은 관심과 협조를 부탁드립니다.
#카페24쇼핑몰 스킨 매뉴얼 하바나스 스킨 매뉴얼
매뉴얼 목차 섹션을 수정하실때 항상 아래의 순서대로 진행하세요
대부분의 메인 화면 섹션관리가 동일합니다. 수정이 어렵지 않게 설계하였으니 잘 따라해보세요. 대부분의 섹션 수정순서는 아래와 같습니다. 1. 소스코드블럭 찾기 메인화면 index.html파일에서 수정을 원하는 섹션 소스코드블럭 찾아내서 [파일열기]를 통해 해당 페이지 접속하기 2. 해당소스코드html페이지 접속하기 해당 소스코드 html페이지에서 안내문을 참고하여 수정할 요소 찾기 3. 샘플텍스트와 샘플이미지 안내문을 바탕으로 수정요소찾아내기 수정할 요소는 샘플이미지, 샘플텍스트, 샘플이동링크..등을 찾아 원하는 요소로 변경하기 4. 변경확인하기 수정하신 페이지를 [저장]버튼을 클릭하여 저장 후 잘 변경되었는지 확인하기 1. 소스코드 블럭 위치찾기 관리자화면 > 스마트 편집창에서 index.html(쇼핑몰메인페이지)을 열어서 아래의 소스코드 블럭을 찾습니다. [ 아직도 스마트편집창에서 메인화면을 찾지 못하신다면 여기를 클릭하여 처음부터 다시 시작해보세요] 메인화면 index.html에 접속하셔서 원하시는 섹션의 소스코드 블럭을 찾아 [파일열기]를 클릭하여 빠르게 접속하시는 것을 익히셔야 합니다. 사용자 화면에서 이미지로 확인되는 메인화면 섹션의 정렬순서와 동일한 순서로 세로로 나열 되어있습니다. 이것을 빨리 찾아보시는것이 익혀야할 첫번째 과제입니다. 이번에 우리가 찾아볼 소스코드블럭은 아래와 같습니다. <!-- ■ Product : 브랜드 콘셉트 (이곳에 알아보기 쉽게 메모를 해두세요) =============================================== --> <!--@import(/habanas/brand_concept.html)--> [파일열기] 위의 소스코드 블럭은 HBK-ori 스킨을 바탕으로 안내해드리고 있습니다. 아래의 이미지와 소스코드블럭의 위치가 다를수 있으며, 해당 섹션이 없는 스킨도 있으니 참고만 하세요. 단순 참고하여 위의 소스코드를 찾으셨다면.... 해당 소스코드에 마우스를 오버하면 나오게되는 [파일열기]버튼을 클릭하시면 해당 소스코드 페이지로 접속이 됩니다. [TIP] 스마트편집창 왼쪽하단에 HTML보기 버튼을 클릭하시고 수정하세요! 스킨을 수정하실 때에는 위의 이미지와 같이 편집창 왼쪽하단에 HTML보기 버튼을 클릭하시고 관리하시기 바랍니다. 화면보기나 분할보기 아이콘을 클릭하여 수정하실 경우에는 수정이 안되고 에러가 발생합니다. 화면보기나 분할보기 아이콘은 카페24에서 기본적을 제공하는 무료스킨을 위한 기능으로, 카페24에서 제공하는 모듈형 섹션이 아닌, html형으로 구성된 유료 디자인 스킨에서는 해당보기화면으로는 수정이 제대로 적용되지 않습니다. 스마트디자인 편집창에서 index.html 메인화면에 접속하는 방법은 아래 매뉴얼을 참고하시면 더욱 도움이 됩니다. 2. 해당 HTML파일로 접속하기 [파일열기]를 클릭하시면 아래와 같이 해당 html파일로 빠르게 바로접속이 가능합니다. html을 잘 아신다면 직접 수정도 가능하시겠지만.. 잘 모르시더라도, 소스코드내에 작성 되어있는 주석 안내문<!-- 안내글 -->을 차분하게 체크해보시면 어렵지 않게 변경이 가능합니다. 변경 과정 업무수준은 글자 찾기라고 보시면 됩니다. 결국, 샘플 텍스트와 샘플 이미지, 그리고 샘플로 작성된 이동링크만 찾아서 목적에 맞는 내용으로 변경하시면 됩니다.
샘플쇼핑몰과 비교하여 보시면 샘플 텍스트를 찾기 어렵지 않습니다. 2. 각종 링크 변경하기 클릭시 이동될 링크를 찾아 변경합니다. 위의 소스코드에서는 해쉬태그를 클릭시 이동될 페이지를 연결하는 텍스트가 있으니, 이부분을 목적에 맞게 변경하세요. href="" 따옴표사이에 클릭시 이동될 페이지 url주소를 변경하시면 됩니다. 아래의 예제와 같이 도메인 부분을 제외한 나머지를 붙여넣기 하세요. 링크주소가 아래와 같다면... https:// ecudemo317734.cafe24.com/product/list.html?cate_no=24 도메인은 https://도메인.com까지 이며 도메인을 제외한 나머지 /product/list.html?cate_no=24 부분이 수정하실 링크영역이라고 생각하시면 됩니다. (* 대표도메인이 변경되거나, 무료도메인 주소로 작성하시면 링크가 해당 도메인으로 이동되기 때문에 도메인은 제외하시고 사용하세요.) <li><a href="/product/list.html?cate_no=25"><button type="button" class="round_category_tag"><span>#</span>이건 꼭사자!</button></a></li>
<li><a href="/product/list.html?cate_no=25"><button type="button" class="round_category_tag"><span>#</span>주간베스트</button></a></li>
[TIP] 이동할 페이지의 링크주소를 모르실 경우에는 사용자쇼핑몰 화면에서 해당 페이지로 이동하시면 브라우져 상단 주소창에서 확인이 가능합니다. 3. 샘플이미지 변경하기 이미지가 포함된 코드를 안내문을 통해서 확인하여 이미지 코드를 찾아수정하시면 됩니다. 보통 이미지는 <img ~~~~~> 태그로 되어있으니 이를 참고하시면 더욱 찾기 편리합니다. [TIP] HTML보기 버튼을 클릭하세요! 스킨을 수정하실 때에는 위의 이미지와 같이 HTML보기 버튼을 클릭하시고 관리하시기 바랍니다. 화면보기나 분할보기 아이콘을 클릭하여 수정하실 경우에는 에러가 발생할 수 있습니다. 화면보기나 분할보기 아이콘은 카페24에서 기본적을 제공하는 무료스킨을 위한 기능으로, 카페24에서 제공하는 모듈형섹션이 아닌, html형으로 구성된 유료 디자인 스킨에서는 적용되지 않습니다. 이미지를 업로드 하는 방법은 아래를 참고하세요. 4. 저장 후 확인하기 모든 변경작업이 완료되었으면 저장 버튼을 클릭하셔서 작업변경내용을 저장하시고 사용자 화면에서 정상적으로 변경이 되었는지 수정을 하시다가 html코드를 같이 삭제하여 레이아웃이 틀어지지는 않았는지 꼼꼼히 확인합니다. 이때, 수정전으로 돌아가시려면 [히스토리]버튼을 클릭하시면 수정전 파일로 되돌아 갑니다. 또한, 일정 부분 수정이 완료되시면 스킨을 통채로 백업을 받아두시는것을 추천드립니다. 어렵지 않게 수정을 완료하셨을 것으로 생각됩니다만, 매뉴얼을 봐도 모르시는 부분이 있다면 이메일로 접수해주시면 접수된 순차적으로 답변드리고 있으니 참고부탁드립니다. 문의 이메일 : cafe24skin@naver.com *카페24쇼핑몰 스킨서비스는 스킨에 설치된 디자인 원형 그대로를 사용하시는것을 원칙으로 하는 경제적인 서비스입니다. 스킨의 이미지와 텍스트 수정, 상품진열 등의 필수적인 요소를 변경/수정하는데 궁금하신 점은 언제든지 문의하실 수 있습니다. 하지만, 고객임의로 스킨의 레이아웃과 기능을 변경하고자 하실 경우에는 직접 DIY하셔야 합니다. DIY하는 경우의 문의에 대해서는 별도의 도움을 드릴 수 없으며, 작업대행을 의뢰하시면 가능여부를 파악 후 견적을 제공해드리고 있으니 스킨 구매전 참고부탁드립니다. 문의: cafe24skin@naver.com 전화: 070-8098-5890 |
작성하신 에 이용자들의 신고가 많은 표현이 포함되어 있습니다.
다른 표현을 사용해주시기 바랍니다.
건전한 인터넷 문화 조성을 위해 회원님의 적극적인 협조를 부탁드립니다.
더 궁금하신 사항은 고객센터로 문의하시면 자세히 알려드리겠습니다.