전체상품목록 바로가기

본문 바로가기

Manual

이미지 변경하기

1
스크린샷  
변경을 원하는 이미지에 마우스를 대고 우클릭을 하면 위 화면처럼 제일 아래에 보이는 '속성' 항목을 클릭합니다.

시키는 대로 했는데 안돼요!

  • 관리자 페이지에서 우클릭을 막아놓았는지 확인해보세요.
    우클릭이 막혀있는 경우 관리자페이지 - 디자인관리 - 쇼핑몰환경설정에서 '마우스오른쪽클릭'을 해제할 수 있습니다.
    또는 크롬/파이어폭스 등의 브라우저 사용시 관리자 페이지에 들어가지 않더라도 일시적으로 우클릭을 해제할 수 있습니다.
    크롬의 경우 브라우저 우측 상단 메뉴 버튼(크롬 맞춤설정 및 제어) - 설정 - 고급 설정 표시 - 콘텐츠 설정 - 자바스크립트에서
    모든 사이트에서 자바스크립트 실행 허용안함 체크
  • 엣지 브라우저를 사용하시는 경우 F12 누른 후 마우스 우클릭 - 요소 검사를 클릭한 후 DOM 검사기에서 확인하실 수 있습니다.
  • 인터넷 익스플로러, 엣지 외의 크롬, 파이어폭스, 오페라 등 다른 브라우저들은 위의 2가지 방법 다 사용가능합니다.
2
스크린샷  
위 이미지에서 보이는 것처럼 변경하실 이미지의 이름을 똑같이 visual2.jpg 라고 저장하신 후에 해당 경로를 찾아가서 덮어쓰기 하면 됩니다.

시키는 대로 했는데 안돼요!

  • 이미지의 경우 덮어쓰기가 되었을 경우라도 캐시때문에 바로 안 바뀌는 경우가 있습니다.
    이럴 경우 시간이 좀 지난 후에 다시 새로고침 하든지 캐시 비우기 혹은 강력 새로고침을 하시면 새 이미지가 보이게 됩니다.
  • 이미지 업로드 할 위치를 찾을 때 스킨보관함에 스킨이 여러 개가 있는 경우 "base" 대신 "스킨 번호" 경로로 찾아가셔야 합니다.
    예) sde_design - skin1 - images - main
    스킨 번호는 디자인 보관함에서 해당 스킨의 번호를 확인 하실 수 있습니다.


아이콘 변경하기

1
스크린샷  
스킨 내에 아이콘은 2가지 종류가 있습니다.
첫 번째, 이미지로 된 아이콘은 gif/png/jpg 등의 확장자로 이미지로 제작하셔서 이미지 변경하기의 방법으로 변경해주세요.
위 그림은 이미지로 만든 아이콘이 아닌 폰트 아이콘입니다.
빨간 동그라미 안에 있는 그림 아이콘이 바로 폰트 아이콘이예요.
해당 메뉴명이 변경될 경우 혹은 아이콘이 마음에 안 드는 경우 이걸 변경해보도록 하겠습니다.
2
스크린샷  
위 이미지에서 1번 <i class="xi-lock"></i> 태그가 바로 폰트 아이콘입니다.
폰트 아이콘 라이브러리를 방문하셔서 마음에 드는 아이콘을 골라주세요.
참고로, 2번 3번은 영역마다 다른데 텍스트가 실제로 보이는 경우도 있고 안 보이는 경우도 있습니다. 텍스트가 실제로 안 보이는 경우라도 텍스트를 넣어주세요.
스크린샷  
아이콘 아래 빨간 박스 안의 이름이 "클래스명" 입니다.
원래 있던 <i class="xi-lock"></i> 의 클래스를 아래 코드처럼<i class="xi-bookmark-o"></i> 이렇게 변경해주시면 끝!!
                    <i class="xi-lock"></i> 
                    <i class="xi-bookmark-o"></i> 
                

메인페이지 비주얼 이미지 개수 추가하기

  • index.html 또는
  • layout > basic > visual.html
메인 비주얼 이미지는 제한 없이 개수를 추가할 수 있습니다.
처음 스킨바로 하위에 있는 index.html 파일을 열어서 컨트롤 + f 를 친 다음, visual 을 검색합니다.
해당 키워드가 없으면 레이아웃 - 베이직 폴더 안에 있는 visual.html 파일을 열어서 같은 방법으로 검색합니다.
                    <div class="visual">
                        <img src="/images/main/visual1.jpg" alt="메인비주얼 1">
                        <img src="/images/main/visual2.jpg" alt="메인비주얼 2">
                        <img src="/images/main/visual3.jpg" alt="메인비주얼 3">
                    </div>
                
위 코드를 보면 이미지가 지금 3개가 돌아가고 있습니다.
하나를 더 추가하려면 위 경로대로 이미지를 업로드 하고 똑같이 한 줄 더 넣어서 이미지 파일명만 변경해주시면 됩니다.
                    <div class="visual">
                        <img src="/images/main/visual1.jpg" alt="메인비주얼 1">
                        <img src="/images/main/visual2.jpg" alt="메인비주얼 2">
                        <img src="/images/main/visual3.jpg" alt="메인비주얼 3"> 
                        <img src="/images/main/visual4.jpg" alt="메인비주얼 4">
                    </div>
                

상단/왼쪽 메인 메뉴(Global Navigation) 변경하기

  • 미니멀 스토어 : /layout/basic/left_menu.html 을 열고 컨트롤 + f 로 left-menu 를 찾아주세요.
  • 뚜띠, 뚜띠 픽스 : /layout/basic/header.html 을 열고 컨트롤 + f 로 top-menu 를 찾아주세요.
  • 피꼴로는 관리자 페이지에서 추가하는 메뉴가 상단에 노출되게 되어 있으므로 여기에서 확인해주세요.
스크린샷  

미니멀 스토어

                    <div id="left-menu">
                        <ul>
                            <li><a href="#" class="hover-line-wrap"><span class="hover-line">who we are</span></a></li>
                            <li><a href="#" class="hover-line-wrap"><span class="hover-line">online store</span></a></li>
                            <li><a href="#" class="hover-line-wrap"><span class="hover-line">lookbook</span></a></li>
                    
                        </ul>
                    </div>
                

뚜띠 / 뚜띠 픽스

                    <div id="top-menu">
                        <ul>
                            <li><a href="#">brand</a></li>
                            <li class="depth-parent"><a href="#">SHOP</a></li>
                            <li><a href="#">lookbook</a></li>
                    
                        </ul>
                    </div>
                

피꼴로

피꼴로는 관리자 페이지에서 추가하는 메뉴가 상단에 노출되게 되어 있으므로 여기에서 확인해주세요.

전체 메뉴(All Menu) 변경하기

파일 위치 : /layout/basic/header.html
1
스크린샷  
위 이미지에서 1번 Shop 항목은 관리자 페이지에서 등록한 상품 분류가 뿌려지는 곳입니다.
2

2번 Members 메뉴 추가/변경하기

여기 멤버스 메뉴는 아이콘과 함께 작동됩니다.
아이콘 변경은 여기 아이콘 변경하기 를 참고해주세요.
                    <li>
                        <a href="/myshop/likeit/product.html">
                            <i class="xi-heart"></i> 
                            <span class="title">Like it</span> 
                            <span class="title-ko">좋아요</span> 
                        </a>
                    </li>
                
위 코드를 모두 복사해서 원하는 위치에 넣어주시고 링크와 아이콘, 메뉴명을 변경해주시면 끝!
로그인과 연동되는 메뉴는 로그인전/후 두 번 넣으셔야 합니다.
3

3번 라인의 메뉴 추가/변경하기

3번 라인도 2번 라인과 똑같은데 아이콘만 없습니다.
                    <div class="menu-company">
                        <h3>Company</h3>
                        <ul>
                            <li><a href="/shopinfo/company.html">About us</a></li>
                            <li><a href="http://wemakemonday.com" target="_blank">Official</a></li>
                    
                        </ul>
                    </div>
                

원하는 요소의 html/css/js 파일 찾기

어떤 요소를 수정하려면 먼저 해당 요소가 어느 파일에 있는지 알아야 합니다.
하지만 요소마다 파일이 분리되어 import 되는 경우도 있고 모든 파일을 찾는 방법이 똑같지는 않습니다.
일반적으로는 다 비슷하지만 예외의 경우도 있는데 이 예외의 경우를 모두 알려드리기는 어렵습니다.
모든 요소를 자유자재로 변경하기 위해서는 기본 마크업은 물론이고 카페24의 로직을 아셔야 하지만 일반적으로 많이 쓰이는 방법 하나만 알아보도록 하겠습니다.
여기서는 장바구니를 예를 들어보겠습니다.
1

먼저 HTML 파일 찾기

웹브라우저에서 내가 수정하고자 하는 요소가 있는 페이지를 들어갑니다.

스크린캡처  
위 이미지는 뚜띠 장바구니 스크린 캡처 화면입니다.
위 이미지를 설명하자면,
1 : 브라우저 상단 url이 현재 내가 위치하고 있는 페이지 주소를 알려줍니다.
2 : 특정 페이지를 제외한 대부분의 파일에 공통적으로 들어가는 부분
3 : 내가 수정할 요소
지금 우리는 1번을 봐야합니다.
현재 이미지 1번에서 skin ~ cafe24.com/ 여기까지는 내 쇼핑몰 도메인이 나타납니다. 그 바로 오른쪽부터 경로가 되는데 현재 이미지에서 장바구니 파일의 경로는
/ order / basket.html
이제 내 스킨의 바로 하위에 있는 (skin + 번호 폴더 바로 하위에 있는) order 폴더를 더블클릭하여 basket.html 파일을 열어주세요.
2

CSS 파일 찾기

basket.html 파일을 열어서 컨트롤 + f 를 눌러 @css 를 검색하면 해당 파일에 불러와지는 css를 볼 수 있습니다. 현재 이 페이지에서는 총 4개의 css 파일을 불러오네요.
                    <!--@css(/layout/basic/css/ec-base-layer.css)--> 레이어팝업에 대한 스타일 정의
                    <!--@css(/css/module/order/basketPackage.css)--> 장바구니에 대한 스타일 정의
                    <!--@css(/css/module/order/dcInfo.css)--> 안내 문구에 대한 스타일 정의
                    <!--@css(/css/module/myshop/wishlist.css)--> 관심상품에 대한 스타일 정의
                
이제 내가 수정할 요소를 찾겠습니다. 컨트롤 + f 를 눌러 전체상품주문 을 찾아주세요.
아래 코드는 너무 길어서 다 생략했는데 전체상품주문 이 써 있는 요소의 class 만 보시면 됩니다.
                    <a href="#" class="button-mc">전체상품주문</a>
                
전체상품주문 버튼의 클래스명은 button-mc 입니다.

위메이크먼데이 스킨의 모든 클래스명은 누구나 알아보기 쉽게 직관적으로 작성되어 있습니다. button-mc 는 버튼인데 mc(Main color)라는 뜻입니다.
줄임말도 잘 안 쓰지만 버튼은 종류가 많고 main color는 길이도 길고 약어로 mc 라고 많이 쓰기 때문에 이 경우에만 이렇게 되어 있습니다.

어쨌든 우리가 조금 전 찾았던 css 파일들을 모두 열어서 컨트롤 + f 로 button-mc 를 찾아보세요.
대부분 해당 페이지의 스타일은 모두 해당 css 파일에 정의되어 있습니다.
예를 들어 이 basket.html 페이지의 파일명은 basket 이니까 대부분의 스타일은 basketPackage.css 파일에 정의되어 있습니다.
찾으시는 요소가 해당 css 파일에 있으면 그 파일에서 수정을 해주세요.

수정을 했는데 바뀌지 않는다면 수정이 안 된 것입니다.
다른 파일에 또 스타일이 정의된 곳이 없는지 찾아야 합니다.
또 지금처럼 button-mc가 basketPackage.css 파일에 정의되어 있지 않은 경우에도 다른 파일을 찾아야 합니다.

자, 버튼은 장바구니에만 들어가는게 아니라 많은 페이지에 공통적으로 들어가는 요소입니다.
그래서 장바구니에만 불러오는 css 파일을 쓰는게 아니라 모든 페이지에서 공통적으로 부르는 css 파일에 정의되어 있을 확률이 큽니다.
그럼 모든 페이지에서 공통적으로 부르는 css 파일을 알아보겠습니다.
장바구니 페이지의 제일 상단 첫 줄에 보면 아래처럼 layout.html 파일을 불러오죠? 그럼, 이 파일을 열어주세요.
                    <!--@layout(/layout/basic/layout.html)-->
                
layout.html 파일을 열어 상단 쪽에 <meta> 태그와 <title> 태그 아래에 보면 이렇게나 많은 css를 불러오는 걸 볼 수 있습니다.
스크린캡처  
  • common.css : Reset css
  • layout.css : 전체 레이아웃 스타일 정의
  • ec-base-help.css : 도움말 요소들의 스타일 정의
  • ec-base-product.css : 상품 관련 요소들의 스타일 정의 (주로 상품 목록)
  • ec-base-paginate.css : 페이지네이트(페이징) 요소의 스타일 정의 (목록 화면에서 하단에 1 2 3 다음 페이지, 이전 페이지 내비게이션)
  • ec-base-tab.css : 탭 요소의 스타일 정의 (현재 장바구니에서 국내배송상품/해외배송상품 써 있는 탭)
  • ec-base-button.css : 버튼 요소들의 스타일 정의 (현재 우리가 찾는 파일)
  • ec-base-table.css : 테이블(게시판을 포함한 표) 요소들의 스타일 정의
  • ec-base-ui.css : ui 요소들의 스타일 정의
우리가 수정할 버튼은 왠지 ec-base-button.css 에 스타일이 작성되어 있을 것 같습니다. 그럼 이 파일을 열어볼까요?
스크린캡처  
조금이라도 감이라도 잡을 수 있게 최대한 자세히 보여드리고 싶지만 css가 절대적인 값으로 설명되는 것이 아니기 때문에 더 이상의 설명은 생략하도록 하겠습니다.
어쨌든 여기에서 원하시는 속성을 수정하시면 되겠습니다.
수정을 원하시는 키워드를 잘 생각하셔서 google 검색을 하시면 모든 내용이 다 나와 있습니다.
3

JS 파일 찾기

js 파일도 css 파일을 찾는 법과 동일합니다.
그러나 매우 매우 조심해야 하는 파일입니다.
html 파일의 경우 초보자 분들이 본인도 모르게 태그를 잘못 작성하는 실수를 합니다.
하지만 요즘 브라우저들이 많이 좋아져서 가끔씩은 브라우저가 커버를 해줍니다.
예를 들어 닫는 태그를 모르고 빠뜨렸는데 이것을 어떤 브라우저에서는 자동으로 생성해주기도 합니다. (물론, 이것은 경우에 따라 다르므로 무조건 조심하셔야 합니다.)
또한, css 를 잘못 작성하게 되면 대부분의 경우 디자인적으로 모양이 이상해질 뿐이지 특별히 기능상에 문제는 잘 발생하지 않습니다. (물론 이것도 경우에 따라 다르므로 무조건 조심하셔야 합니다.)
그런데 js 파일에 작성되는 스크립트의 경우에는 쉼표 하나 만으로도 사이트 전체가 돌아가지 않을 가능성이 매우 큽니다.
그래서 스크립트를 수정하는 것은 권유해 드리지 않습니다.


Customer happiness

010.9274.1790

KAKAO : wemakemonday

E-mail : wemakemonday@gmail.com

Bank

  • 국민131537-04-002168
  • 예금주 : 최귀염(클래식니트)
TOP