티스토리 뷰
진행하기에 앞서 필자는 리터칭 디자이너(포토 에디터)이고 실무를 하며 본업이 아닌 분야에 독학을 하고 있기 때문에 완벽하지 않고 모르는 것도 많은, 아마도 이 글을 검색해서 읽고 있는 여러분보다 모르거나 혹은 비슷한 수준일 것입니다. 부족할 순 있으나 여러분께 조금이라도 도움이 되었으면 하는 마음으로 작성합니다. 혹시나 잘못된 부분은 상냥하게 댓글로 알려주세요. 또 궁금하신 점도 댓글을 남겨주세요. 가능한 부분은 함께 고민해드리겠습니다.
카페24 무료 디자인을 살펴보던 중 꽤 괜찮은 반응형 무료 디자인을 발견했습니다. (22년 01월 기준) 카페24가 PC버전, 모바일 버전, 반응형, 에디봇 모드, 스마트 디자인 등 원래 다양한 무료 디자인을 공개했었으나 이번 무료 디자인은 정말 쇼핑몰에서 보편적으로 사용하는 웬만한 기능과 디자인들이 다 있어 조금만 html 및 css를 손볼 수 있다면, 얼마든지 비싼 쇼핑몰처럼 꾸밀 수 있다고 생각했습니다.
보시는 바와 같이 디자인이 상당히 심플 모던하고 탑의 홍보문구 배너와 로그인바, 로고, 메뉴바, 사이드 네비게이션 메뉴, 슬라이드 디자인, 이미지 배너, 상품 전시와 배너를 함께 활용한 디자인까지 원래 기능이 많았지만 비전문가는 구현하기 힘든 디자인 레이아웃을 선뜻 무료로 줘버린 느낌을 받았습니다.
카페24 무료 반응형 테마
카페24에서 제공하는 쇼핑몰 테마입니다. 의류, 가방 및 패션 악세서리를 판매하는 온라인 쇼핑몰을 위한 속도가 최적화된 무료 반응형 테마입니다.
ecudemo199138.cafe24.com
둘러보다 가장 먼저 거슬리는 점을 발견했는데요, 여러분은 상관 없다면 이 편은 한번 쓱 읽어봐 주시고 다음 편으로 넘어가시면 될 것 같습니다. 좌측 상단의 사이드 메뉴 버튼을 클릭했을 때 당연히 사이드 메뉴가 좌측에서 우측으로 나왔는데, 문제는 사이트가 함께 좌측에서 우측으로 밀려나간다는 것이었습니다.
사이드 메뉴가 나왔는데 사이트가 덩달아 밀려났습니다. 블랙 알파 레이어까지 씌워졌고요. 효과적으로 재미있어 보이지만 왜 보는 저는 불편할까요.
디자인적인 측면에서 보자면 사이드 메뉴 레이어가 한단계 위에 있는 게 아니고 같은 레이어에서 나와 사이트를 밀어버린 느낌이라 뭔가 더 무거워 보이면서 힘든 느낌이라고 할까요. ※개인적으로 받은 느낌입니다. 그래서 이 효과를 가장 먼저 없애고자 합니다. (이미 저의 머릿속에서는 디자인이 상당히 바뀌어있습니다. 하지만 이 디자인 자체로도 상당히 괜찮습니다.)
사이드 메뉴를 열어놓은 상태에서 f12를 눌러 개발자 도구를 열어봅니다. 요소 선택 버튼을 클릭하여 사이트의 밀린 부분을 클릭합니다. (사이드 메뉴란을 제외한 사이트 아무곳이나 클릭하면 됩니다.) 확인된 요소를 보면 위의 이미지와 같이 body .expand #layoutDimmed .dimmed 이런 요소, class, ID가 보입니다. body 요소에 expand(확장) class로 좌측에서 우측으로 이동하는 속성을 넣고, layoutDimmed ID에 display로 박스형태를 갖춰주고 dimmed(흐림) class에 background-color rgba로 검은색 반투명 레이어가 씌워져 있습니다. 이것의 체크를 다 풀어 속성을 없애면 검은 알파 레이어가 사라지는 것을 보실 수 있습니다. 스마트 디자인에서 수정해야 할 부분이니 body .expand #layoutDimmed .dimmed를 기억해 둡니다.
계속해서 body요소를 클릭합니다. 스타일을 확인해보면 body의 expand class에 left: 458px이 보입니다. 바디 전체가 왼쪽 458px에 위치한다니 느낌이 오지요. 체크를 풀면 바로 위치가 원상 복구되는 것을 확인할 수 있습니다. 덩달아 body의 속성에 left:0 및 트랜지션이 보입니다. 사이드 메뉴의 X 버튼을 누르면 사이트가 왼쪽으로 다시 서서히 이동해야 하기 때문에 있는 속성이므로 이것도 찾아 지워보겠습니다.
스마트 디자인 편집창을 열면 가장 먼저 메인화면이 보입니다. html 첫줄에 모든 페이지에 공통으로 사용되는 디자인인 레이아웃이 임포트 되어있습니다. 주석 끝의 빈 곳에 마우스를 올리면 [파일 열기] 버튼이 보입니다. 클릭해서 메인 레이아웃 html을 열어줍니다.
main.html(레이아웃)을 열어 디자인과 html을 함께 보며 구조를 파악합니다. 텍스트 배너, 로그인 관련, 로고, 네비게이션, 사이드바 메뉴가 있습니다. 이미지와 하기 코드 주석을 함께 확인해주시고 파일을 하나씩 열어 확인해보시는 것도 사이트 구조 파악에 도움이 많이 됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- PG크로스브라우징필수내용 -->
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Pragma" content="no-cache" />
<!-- // PG크로스브라우징필수내용 -->
<title>기본 레이아웃</title>
<link rel="preconnect" href="https://img.echosting.cafe24.com">
<!-- 해당 CSS는 쇼핑몰 전체 페이지에 영향을 줍니다. 삭제와 수정에 주의해주세요. -->
<!--@css(/layout/basic/css/common.css)--><!--전체 페이지에 영향을 주는 공통 css-->
<!--@css(/layout/basic/css/layout.css)--><!--기본 레이아웃 관련 css-->
<!--@css(/layout/basic/css/ec-base-ui.css)--><!--기본 ui 관련 공통 css-->
<!--@css(/layout/basic/css/ec-base-button.css)--><!--기본 버튼 관련 공통 css-->
<!--@css(/layout/basic/css/ec-base-tooltip.css)-->
<!--@css(/layout/basic/css/ec-base-product.css)--><!--기본 상품 리스트 관련 공통 css-->
<!--@css(/layout/basic/css/main.css)--><!--메인 화면 관련 css-->
<!--@js(/js/swiper-bundle.js)--><!--스와이퍼 js-->
<!--@js(/layout/basic/js/main.js)-->
<!--@js(/layout/basic/js/layout.js)-->
</head>
<body id="main">
<div id="skipNavigation">
<p><a href="#category">전체상품목록 바로가기</a></p>
<p><a href="#contents">본문 바로가기</a></p>
</div>
<div id="wrap">
<!--@import(/layout/basic/topbanner.html)--><!--텍스트 띠 배너-->
<header id="header">
<div class="inner">
<div class="topArea">
<h1 module="Layout_LogoTop" class="topArea__logo">
<!--@css(/css/module/layout/logotop.css)--><!--로고-->
<a href="/index.html"><img src="{$logo}" alt="{$mall_name}" /></a>
</h1>
<!--@import(/layout/basic/state_login.html)--><!--로그인 메뉴-->
</div>
<!--@import(/layout/basic/navigation.html)--><!--네비게이션 메뉴-->
</div>
</header><hr class="layout" />
<!--@import(/layout/basic/sidebar.html)--><!--사이드바 메뉴-->
<div id="container">
<main id="contents" role="main">
<!--@contents-->
</main><hr class="layout" />
</div><hr class="layout" />
<!--@import(/layout/basic/quick.html)--><!--퀵-->
<!--@import(/layout/basic/footer.html)--><!--푸터 사이트 하단 정보-->
</body>
</html>저희는 사이드바 메뉴의 움직임과 관련이 있기 때문에 sidebar.html [파일열기]로 파일을 열어 확인합니다.
두 번째 줄의 slideMenu.css 누가 봐도 슬라이드 메뉴 관련 스타일 시트가 보입니다. [파일 열기]로 파일을 열어 확인합시다.
아까의 샘플 사이트에서 확인했던 익숙한 class가 많이 보입니다. body .expand #layoutDimmed 다 여기 있네요. 반응형이기 때문에 미디어 쿼리까지 전부 꼼꼼히 확인하며 관련된 내용을 모두 수정합니다.
body { position:relative; /*left:0; transition:left 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);*/ }/*body를 왼쪽으로 n px expand 한다는 내용은 모두 지우겠습니다.*/
body.expand { overflow-x:hidden; }
body.expand #aside { visibility:visible; overflow-x:hidden; }
body.expand #layoutDimmed { /*display:block;*/ }/*사이드 메뉴 활성화 시 사이트 화면을 흐리게 변경하는 효과를 지우겠습니다. dimmed(흐리게)*/
body.expand #aside { left:0; }
#aside { z-index:1001; visibility:hidden; position:fixed; top:0px; bottom:0; overflow:auto; overflow-x:hidden; min-width:225px; width:458px; background-color:#fff; transition:500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}
#aside .btnClose { position:absolute; font-size:1px; line-height:1px; color:transparent; text-indent:150%; white-space:nowrap; }
.navigation-menu__member { border-bottom:1px solid #000; }
.navigation-menu__member a { display:inline-block; font-weight:bold; text-transform: uppercase; text-decoration:none; }
.navigation-menu__category .categoryList ul { display:none; }
.navigation-menu__category .categoryList li { position:relative; }
.navigation-menu__category .categoryList li.selected > ul { display:block; }
.navigation-menu__category .categoryList > li.selected .slideSubMenu { padding:0 0 0 10px; }
.navigation-menu__category .categoryList > li.selected .slideSubMenu a.view { color: #595959; }
.navigation-menu__category .categoryList > li.selected .slideSubMenu ul { padding:0 0 0 20px; }
.navigation-menu__category .categoryList > li.selected .slideSubMenu ul a.view { color: #929292; }
.navigation-menu__category .categoryList a.cate,
.navigation-menu__project .icoCategory { position:absolute; right:0; top:0; word-wrap:break-word;overflow:hidden; width:48px; height:48px; font-size:1px; line-height:1px; color:transparent; text-indent:150%; white-space:nowrap; }
.navigation-menu__category .categoryList a.cate:before,
.navigation-menu__project .icoCategory:before { content:""; display:block; width:10px; height:10px; margin:18px auto 0; border-left:1px solid #929292; border-bottom:1px solid #929292; -webkit-transition:.3s ease-out; transition:.3s ease-out;-webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
.navigation-menu__category .categoryList li.selected > a.cate:before,
.navigation-menu__project .selected .icoCategory:before { margin-top:22px; -webkit-transform:rotate(135deg); transform:rotate(135deg); }
.navigation-menu__category .categoryList li.noChild > a.cate { display:none; }
.navigation-menu__category .icoBookmark { display:none; }
.navigation-menu__project { border-top:1px solid #ebebeb; }
.navigation-menu__project .title { position:relative; display:block; padding:15px 0; font-size:18px; }
.navigation-menu__board { border-top:1px solid #ebebeb; }
/********************* Mobile *********************/
@media all and (max-width:767px) {
body.expand { /*left:292px;*/ position:fixed; }
#aside { left:-292px; width:292px; }
#aside .btnClose { top:25px; right:17px; width:18px; height:18px; }
#aside .btnClose .icon { width:23px; height:23px; margin: -2px 0 0 -2px; }
#aside .btnClose .icon:before { right:11px; height:23px; }
#aside .btnClose .icon:after {top:11px; width:23px; }
.navigation-menu__member { padding:79px 0 30px 16px; }
.navigation-menu__member a { margin:0 10px 0 0; font-size:14px; }
.navigation-menu__board,
.navigation-menu__category,
.navigation-menu__project { padding:13px 0 30px 16px; }
.navigation-menu__board .menu a { display:block; padding:15px 0; font-size:16px; text-decoration:none; }
.navigation-menu__category .view,
.navigation-menu__project .view { display:block; padding:15px 0; font-size:16px; text-decoration:none; }
.navigation-menu .menu { margin:2px 0; }
}
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
.navigation-menu__member .count { display:inline-block; min-width:24px; padding:3px 4px 3px; font-size:13px; text-align:center; border:1px solid #000; border-radius:20px; box-sizing:border-box; }
}
/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
#aside { left:-458px; width:458px; }
}
/********************* Tablet / PC *********************/
@media all and (min-width:768px) {
#aside .btnClose { top:40px; right:50px; width:25px; height:25px; }
#aside .btnClose .icon { width:30px; height:30px; margin: -2px 0 0 -2px;}
#aside .btnClose .icon:before { right:15px; height:30px; }
#aside .btnClose .icon:after {top:15px; width:30px; }
.navigation-menu__member { padding:95px 0 39px 50px; }
.navigation-menu__member a { margin:0 18px 0 0; font-size:18px; }
.navigation-menu .menu { margin:2px 0; }
.navigation-menu__category,
.navigation-menu__project { padding:23px 38px 25px 50px; }
.navigation-menu__category .view,
.navigation-menu__project .view { display:block; padding:15px 0; font-size:18px; text-decoration:none; }
.navigation-menu__board { padding:23px 50px 25px; }
.navigation-menu__board .menu a { display:block; padding:15px 0; font-size:18px; text-decoration:none; }
}
/********************* PC *********************/
@media all and (min-width:1025px) {
body.expand { /*left:458px;*/ }
#aside { left:-458px; width:458px; }
}기본적인 속성에서 제일 먼저 삭제를 하고, 미디어 쿼리를 천천히 보면서 모바일 max-width:767px및 PC min-width:1025px에도 body.expand가 있습니다. 모두 지워주고 저장합니다. (저는 주석처리했습니다.) 그런데 여기(slideMenu.css)에서는 .dimmed class가 보이지 않습니다. 도대체 어디에서 수정할 수 있을까요? 이렇게 되면 메인 레이아웃 html에서 common.css, layout.css ...ect 순으로 무작정 뒤져봅니다. (...)
common.css부터 봅니다.
다행히 바로 찾을 수 있었는데요. 왜 여기에 있는지 정확히는 모르겠으나, 사이트 전체에 영향을 미친다는 의미로 여기에 있는것 같습니다. 사실 이것을 지우지 않아도 이미 #layoutDimmed ID의 display:block을 삭제한 시점에서 검은 알파 레이어는 나타나지 않습니다. 가급적 지우지 않는것이 좋겠다는 판단입니다.
이제 디자인 보관함에서 디자인 미리보기로 확인합니다. PC버전에서 정상적으로 사이트가 밀리지 않고 고정되어 있습니다. 블랙 알파 레이어도 없어졌네요.
창의 사이즈를 줄여 반응형에서도 사이트가 밀리지 않고 검은 알파 레이어가 씌이진 않는지 확인합니다. 여기까지 저는 원하는 대로 수정되었습니다. 다음에는 사이드 메뉴 버튼이 좌측 상단에 있는데, 우측 상단으로 이동하고, 슬라이드 메뉴도 우측에서 좌측으로 나오게 변경하겠습니다. 문제점이나 궁금한 부분은 댓글에 남겨주세요.
'사각사각 > 카페24' 카테고리의 다른 글
| [카페24] 반응형 무료 디자인 수정하기 03 - 탑 로고 변경하기 및 위치 수정 ect (10) | 2022.03.08 |
|---|---|
| [카페24] 반응형 무료 디자인 수정하기 02 - 탑 메뉴 아이콘 위치 변경하기 (14) | 2022.03.06 |
| [카페24] 모바일 팝업창 배경 투명하게 만들기 (2) | 2021.08.03 |
| [카페24] 모바일 팝업 PC에서 확인하기 (0) | 2021.08.02 |
| [카페24] PC버전 팝업 창 닫기 버튼 투명하게 변경 하기. (& 위치변경) (0) | 2021.07.26 |