👀
내가 보려고 적어두는 카페24 완벽 정복!!
시작은 베이직(기본) 스킨을 바탕으로 디자인을 적용하면서 메모했슴둥
💡카페24 시작하기
🔹 로그인, 작업을 진행할 디자인도 추가를 완료했다면 FTP에 연결할 차례!
🔹 코딩을 배운 사람이니까 FTP 연결해서 하드코딩으로 뿌셔줘야지! 솔루션 상에서 클릭클릭한다는 것은 아주.. 가오 상하는 일이잖아요...?
🩵 FTP 연결하기
🩵 카페24 -> 디자인 -> 디자인 FTP -> 디자인FTP 권한 신청
🔹 만료시간은 최대 7일이므로 연장 필요!
🩵 VSCODE -> 확장기능 -> FTP-SIMPLE 설치 -> F1 -> FTP-SIMPLE : CONFIG ~ 클릭
🔹 계정, FTP주소, SFTP 접속포트를 적어줌 (디자인FTP 권한신청정보는 카페24 -> 디자인FTP에서 확인)
🔹 VSCODE가 너무 최근 버전이면 호환을 못해서 열리지 않아 다운그레이드 해주어야함
{
"name": "localhost", // 사용자 이름
"host": "", // FTP 주소
"port": 21,
"type": "ftp",
"username": "", // FTP ID
"password": "", // FTP PW
"path": "/skin7/", // 나는 스킨 7번이라는 곳에서 작업을 해서 /skin7/를 적었다.
"autosave": true,
"confirm": false
}🩵 VSCODE (F1) -> FTP-SIMPLE : REMOTE ~ 클릭
🔹 접속 할 host, path에서 지정한 디자인경로를 클릭하면 스킨과 관련된 작업 스페이스가 열림
🩵 index.html 이란?
🔹 메인 container에 대한 코드를 작성 (header, footer를 제외한 순수 container)
🔹 <!--@layout(/layout/basic/main.html)--> 해당 코드 이후로 적힌 모든 내용은 불필요하여 지웠다.
🔹 위 경로는 main에서만 사용하는 header, footer 등을 다루는 layout이다. 하지만 메인과 서브의 layout이 동일하다면 layout.html 파일로 통일해도 무방하다.
내가 진행했던 프로젝트는 메인과 서브의 layout이 동일하여 layout.html 파일로 통일시켜 작업했다.
🔹 메인페이지에서만 사용할 css와 js, 라이브러리 cdn 등을 연결해준다.
<!--@css(/layout/basic/css/main.css)-->
<!--@js(/layout/basic/js/main.js)-->
🔹 하나의 html 파일에서 메인페이지의 모든 콘텐츠를 유지관리한다는 것은 매우 비효율적이다. 따라서 각 section 마다 레고처럼 각각의 조각처럼 쪼개어 작성해주는 것이 가장 효율적인 방법! 나는 main이라는 디렉토리를 하나 생성하고 그 안에 section1.html 이라는 규칙을 만들어 영역에 관련된 파일을 생성했다.
🔹 이렇게 만들어진 각각의 html 파일은 어떻게 불러오냐고? 아주 쉽다.(import 방식)
🔸 메인비주얼 : <!--@import(/main/_section1.html)-->
🔸 인기꾸끼아 : <!--@import(/main/_section2.html)-->
🔹 이렇게 불러온 파일은 layout.html에서 include 방식으로 불러오기 때문에 메인페이지에서도 정상적으로 잘 나타나게 되는 것이었다. 그러기 위해서는 index.html 하단에 이와 같은 코드가 있어야 하는 것 같다. <!--@define(cmc_log)-->
🩵 layout.html 이란?
🔹 서브페이지에서 사용되는 header, footer 구조를 다룬다.
🔹 @contents란, include 방식으로 필요한 페이지를 불러오는 개념이다.
🔹 불필요한 sidebar, quick 영역 등을 지워주고 사용할 필수코드만 남겨둔다.
🔽 layout.html을 리셋하여 정리한 코드
<body>
<!-- 본문 영역 --!>
<header id="header">header</header>
<div id="wrap">
<div id="container">
<div id="contents">
<!-- 아래 코드는 본문 내용을 인크루드 하는 코드 (불러오는 개념) --!>
<!--@contents-->
</div>
</div>
</div>
<footer id="footer">footer</footer>
</body>🩵 layout/basic/~.css (공통 css 한 눈에 보기)
🔹 common.css : reset style을 내가 자주 쓰는 코드로 덮어주었고, font style도 해당 파일에서 적용시켰다.
🔹 layout.css : 기본으로 꾸며져있던 코드가 작성되어 있다. 불필요한 태그는 삭제한다.
🩵 파일 업로드하기 (파일 경로 설정)
🔹 font, 이미지 등 파일 경로를 직접 설정해주어야하는 경우가 있다. 이때, 카페24 - 디자인 - 파일업로드를 통해 파일을 업로드 후, 경로(주소)복사하여 html, css 등에서 활용하면 파일이 깨지는 현상없이 정상적으로 잘 노출 될 것이다.
💡카페24 모듈 활용하기
🩵 배너 슬라이드 (앱 배너매니저)
📍 배너매니저 설치매뉴얼 바로가기
🔹 swiper, fade-in/out 등 메인페이지에는 단순하고도 다양한 배너가 노출되고는 한다. 이때 카페24에서 친히 제공하고 있는 '배너 매니저'라는 앱을 사용해보자.
🔹 카페24 - 앱 - 앱스토어 바로가기 - '배너 매니저' 설치
🔹 아래 스크립트 코드를 layout.html 하단에 적어주었다. (전 페이지에 걸쳐서 사용할 수 있어 효율적이다.) 해당 스크립트는 배너매니저 - 프로젝트 코드에서 확인할 수 있다.
<!-- 배너매니저 스크립트 코드 -->
<style>[df-banner-code][hidden] { display:none !important }</style>
<script>
if (!document.getElementById('dfbm-script-46798')){
var dfbm_src = 'https://ecimg.cafe24img.com/pg1484b56993108007/choii9901/web/upload/appfiles/ZaReJam3QiELznoZeGGkMG/b2abba405e67784eb3a6d7ba38c3e391.js';
document.write('<script id="dfbm-script-46798" src="' + dfbm_src + '?v=' + Date.now() + '"><\/script>');
}
</script>🔹 그리고 다시 카페24 - 배너매니저로 돌아와서 배너 그룹을 추가한다.
🔸 그룹 코드는 영문으로 작성하되, 배너 그룹명은 쇼핑몰관리자 등 누구나 알아볼 수 있도록 쉽게 작성해주어야 한다.
🔹 이미지, 링크, target 방법 모두 '배너매니저'를 통해 등록할 수 있고, br태그나 클래스 등을 부여해야할 설명 또한 html 문법으로 작성해주면 된다.
🔹 사용할 배너의 추가가 완료되었다면, 설치매뉴얼에 명시되어있는 대로 클래스와 구조를 맞게 작성해주면 된다. 여기서 그룹코드는 배너 그룹 등록 시, 작성했던 배너 코드명이고 복제될 슬라이드 코드에 df-banner-clone 를 적어주면 된다. 그리고 등록한 정보들은 변수를 통해 불러올 수 있다. (더 많은 변수는 배너매니저 설치매뉴얼 참고)
🔸 df-banner-code="그룹코드"
🔸 {#href} : 배너 클릭 시, 이동 링크
🔸 {#item} : 등록한 배너 이미지
🔸 {#target} : 설정한 target 방법
🔸 {#html} : 등록한 배너 설명
<body>
<div df-banner-code="그룹코드" hidden>
<div df-banner-clone>
<a href="{#href}">{#item}</a>
</div>
</div>
</body>🔹 swiper 구조와 접목 시킨 최종 코드는 아래와 같다.
<body>
<div df-banner-code="kukka-main-vis" hidden>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" df-banner-clone>
<a href="{#href}" target="{#target}">
{#item}
<span class="banner-title">
{#html}
</span>
</a>
</div>
</div>
</div>
</div>
</body>👩🏻💻 : 배너매니저 사용법 숙지 완료!
💡 쇼핑몰 모듈 꿀팁!
📍 카페24 모듈 리스트 바로가기
🩵 카페24 모듈 리스트에서 header(nav), footer, 상품리스트 등 기본 구조와 사용가능한 변수명을 활용하여 구조를 작성할 수 있다.
🩵 상품 리스트 (기초)
🩵 상품 리스트를 가져올 때에도 카페24에서 제공하는 모듈을 활용하여 불러올 수 있다.
모듈 코드를 가져오면, 기본상태의 상품목록이 노출된다.
🩵 이때 쇼핑몰마다 보여주는 상품 정보들이 다르기 때문에 정보 리스트를 세팅해 주어야 한다.
(카페24 -> 쇼핑몰 설정 -> 상품설정 -> 상품정보표시설정)
🩵 상품정보표시설정에서 설정해줄 상세분류 항목을 선택하고 내가 노출시킬 리스트만 체크하여 저장한다.
꾸까 프로젝트에서는 상품명, 판매가, 할인판매가와 추가옵션항목이 노출되는 구조였다.
🩵 기본 css로 굉장히 못생긴 스타일로 노출이 될텐데, 이건 퍼블리싱 고수답게 클래스를 활용해서 스타일을 적용해주면된다. 요소 검사를 해보면 아래 이미지처럼 각 항목마다 클래스가 부여되어있는 것을 볼 수 있다. 이때 font-size, font-weight, color는 기본으로 셋팅되어있기 때문에 적용해도 바뀌지 않을 때가 있다. 그럴 땐 !important 속성을 써서 강제로 우선순위가 되도록 하면 설정한대로 바뀐다.
🩵 할인상품vs정가상품
🩵 할인상품과 정가상품이 있을 때, 노출되는 소비자가의 스타일은 어떻게 다르게 설정할 수 있을까?
🩵 할인상품일 때, 할인판매가를 보여주는 .prd_price_sale이라는 항목이 생성된다. 이 항목과 :has, :not 선택자 속성을 활용해서 스타일의 차별을 설정해주면 된다.
🔹 .prdList:not(.prd_price_sale) : .prdList 자체가 .prd_price_sale 클래스를 가지지 않는 경우를 의미
🔹 .prdList:not(:has(.prd_price_sale)) : .prdList 내부에 .prd_price_sale을 가진 요소가 없는 경우를 의미
따라서 단순히 :not이 아닌 :not(:has(.prd_price_sale)) 이렇게 써주어야 내부 자식 요소의 조건을 확인한 후 스타일을 적용할 수 있어 정확한 스타일 적용이 가능!
<style>
/* 할인 상품일 때 (.prd_price_sale이 있을 때), 소비자가(.product_price) 스타일 */
.prdList:has(.prd_price_sale) .product_price span {
line-height: 16px;
color: #d1d1d1 !important;
font-weight: normal !important;
}
/* 정가 상품일 때 (.prd_price_sale이 없을 때), 소비자가(.product_price) 스타일 */
.prdList:not(:has(.prd_price_sale)) .product_price span {
font-size: 16px !important;
line-height: 24px;
color: rgb(0, 0, 0) !important;
font-weight: 600;
}
</style>🩵 상품 추가옵션 설정하기
🩵 간혹 상품마다 재입고, 신상품 등 처럼 노출되는 추가옵션이 있다. 이런 추가옵션은 어떻게 설정할 수 있을까?
🩵 카페24 -> 쇼핑몰 설정 -> 상품설정 -> 상품정보표시설정에서 '항목추가'를 누르면 어떤 항목을 추가할 것인지 리스트 양식이 나온다. 항목을 구분할 수 있도록 이름을 설정하고, 추가옵션을 등록할 상품 등록페이지로 가면 아래 이미지처럼 추가한 항목이 노출된다.
🩵 이렇게 옵션을 저장하면 정상적으로 옵션 항목 리스트가 노출된다. style을 설정하고 싶다면 역시 항목 리스트에 붙은 클래스명(.custom_option1)을 활용하여 설정하면된다.
꾸까 프로젝트의 경우 이미지 안에 position으로 위치시켜야 하기 때문에 따로 span 태그를 활용하여 마크업을 해주었다.
<body>
<span class="opt">{$custom_option2}</span>
</body>
🩵 아래 이미지처럼 옵션이 잘 뜨는 것을 확인할 수 있다. 그런데 옵션이 없는 상품에서는 노출이 되면 안된다.텍스트 따라서 스크립트를 작성해주었다.
🔹 :not(:has(요소)) 선택자를 통해서 display:none;처리를 하는 방법도 있겠지만, 효율적인 관리를 위해 스크립트로 작성했다.
🔹 .text().trim() === '' : .text() 메서드를 활용하여 옵션의 텍스트를 가져오고, .trim() 메서드를 통해 텍스트의 앞뒤 공백을 제거한다. 공백까지 제거했을 때의 요소의 텍스트가 완전히 비어있을 때 해당 요소(옵션)을 .hide() 처리한다.
<script>
// 공통) 상품 옵션(캡션) 없을 때, hide 처리
$('.prdList .opt').each(function () {
if ($(this).text().trim() === '') {
$(this).hide();
}
});
</script>
