당신은 주제를 찾고 있습니까 “카페 24 로고 – 카페24 쇼핑몰 디자인-카페24 로고 변경하기, 박길현 [카페24 쇼핑몰제작/동영상 강의 #36]“? 다음 카테고리의 웹사이트 https://you.charoenmotorcycles.com 에서 귀하의 모든 질문에 답변해 드립니다: https://you.charoenmotorcycles.com/blog/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 길자쌤의 쇼핑몰스쿨 이(가) 작성한 기사에는 조회수 26,675회 및 좋아요 89개 개의 좋아요가 있습니다.

카페 24 로고 주제에 대한 동영상 보기

여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!

d여기에서 카페24 쇼핑몰 디자인-카페24 로고 변경하기, 박길현 [카페24 쇼핑몰제작/동영상 강의 #36] – 카페 24 로고 주제에 대한 세부정보를 참조하세요

#카페24쇼핑몰디자인#카페24로고바꾸기#박길현
카페24 쇼핑몰에서 이미지를 쉽게 변경하는 방법을 알아 보았어요~ 이렇게 이미지를 변경하는 것을 보통 템플릿모드라고 하는데요~ 카페24 디자인 에디터 창은 이렇게 템플릿 변경과 코드 수정으로 디자인을 변경할 수 있습니다^^
우리 ♡책으로 만나요
-카페24쇼핑몰 9일만에 정복하기: http://bitly.kr/QAXm
-된다!포토샵\u0026일러스트레이터: http://www.yes24.com/24/goods/67292951
♡오프라인 강의로 만나요
-카페24 오프라인 강의: https://edu.cafe24.com/
-쇼핑몰 포토샵 오프라인 강의: https://blog.naver.com/PostList.nhn?blogId=rlfcjstm\u0026from=postList\u0026categoryNo=110
♡다른 채널로 만나요
-블로그: https://blog.naver.com/rlfcjstm
-Instagram: https://www.instagram.com/im_gilhyun/
-페이스북: 박길현
-강의/광고문의: [email protected]

카페 24 로고 주제에 대한 자세한 내용은 여기를 참조하세요.

[ 디자인관리] 쇼핑몰 로고 이미지는 어떻게 변경하나요?

카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다. 더 좋은 서비스가 되기 위해 노력하겠습니다.

+ 여기에 더 보기

Source: ecsupport.cafe24.com

Date Published: 5/2/2021

View: 7036

카페24 쇼핑몰구축 : 카테고리별 화면에서 로고 바꿔주기

큰 힘이 되는 공감과 댓글~~^^. 개별 카테고리 화면. 카페24의 무료디자인을 사용중이에요~. 메인에서 로고이미지를 바꿨지만.

+ 여기를 클릭

Source: itdesign.tistory.com

Date Published: 5/27/2022

View: 4899

로고 변경하기 – 카페24쇼핑몰 가이드 – 천사웹

카페24 쇼핑몰 – 로고 변경하기 · 1. 디자인편집하기. 로고 이미지 변경은 스마트디자인 편집창을 통해 변경하겠습니다. <디자인관리>–<쇼핑몰 디자인 편집> …

+ 여기를 클릭

Source: 1004web.kr

Date Published: 10/9/2022

View: 2959

파일:Cafe24 logo.png – 위키백과, 우리 모두의 백과사전

파일:Cafe24 logo.png. 최대 해상도입니다. … English: cafe24 logo. 날짜, 2020년 11월 11일 … 다음 문서 1개가 이 파일을 사용하고 있습니다: 카페24 …

+ 자세한 내용은 여기를 클릭하십시오

Source: ko.wikipedia.org

Date Published: 7/2/2021

View: 3912

주제와 관련된 이미지 카페 24 로고

주제와 관련된 더 많은 사진을 참조하십시오 카페24 쇼핑몰 디자인-카페24 로고 변경하기, 박길현 [카페24 쇼핑몰제작/동영상 강의 #36]. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.

---

주제에 대한 기사 평가 카페 24 로고

• Author: 길자쌤의 쇼핑몰스쿨
• Views: 조회수 26,675회
• Likes: 좋아요 89개
• Date Published: 2018. 12. 19.
• Video Url link: https://www.youtube.com/watch?v=e8QoKG8V0Q8

[🎬디자인관리] 쇼핑몰 로고 이미지는 어떻게 변경하나요?

스마트디자인 편집창 에서 수정할 수 있습니다.

스마트디자인 편집창에서 로고 영역에 마우스를 가져가서 이미지를 교체하거나, HTML로 직접 소스 수정을 할 수 있습니다.

아래의 동영상을 확인하여 쇼핑몰 로고 이미지를 변경해보세요~!

동영상으로 배우는 쇼핑몰 로고 이미지 변경 방법

카페24 ) 일러에서 png 로고 만들고 쇼핑몰에 적용하는 방법

일러스트레이터에서 로고를 만들고 배경이 투명한 png 파일로 저장한 다음 카페24 쇼핑몰에 적용하는 방법을 알아보겠습니다.

#1 일러스트레이터에서 로고 만들기

먼저 일러스트레이터 프로그램에서 로고를 만들어보겠습니다.

저는 가로 500px X 세로 100px 의 도큐먼트를 열어 작성해보겠습니다.

도큐먼트 사이즈는 나중에 조절가능하므로 크게 신경 쓰지 않아도 괜찮습니다.

원하는 폰트로 로고를 적었다면 도큐먼트의 사이즈를 다시 한번 조절해주겠습니다.

* 혹시나 ai 로고 파일을 디자인 업체나 다른 사람에게 전달한다면?

저장에 앞서 글자를 깨주는 단계가 필요합니다. 이를 윤곽선 만들기 또는 Create Outlines 이라고도 하는데, 작성된 텍스트를 ‘도형’으로 만들어주는 단계입니다.

이 과정을 거치지 않고 그대로 ai 파일을 전송할 경우 만약 상대방에게 로고 작성시 사용한 폰트가 없다면 기본 폰트인 굴림체로 노출됩니다.

따라서 텍스트가 들어간 ai 파일을 저장할 때에는 텍스트를 수정할 수 있는 원본 파일과 깬 파일을 각각 저장하고, 타인에게 전달 시에는 깬 파일을 전달해주면 됩니다.

작성한 텍스트를 선택한 후 Type > Create Outlines 를 클릭하거나 텍스트를 선택한 후 Ctrl+Shift를 누른채로 O를 누르면 텍스트가 깨집니다.

#2 png 파일로 저장하기

이제 png 파일로 저장해보겠습니다.

File > Save for web & devices를 클릭 또는 단축키 Alt+Shift+Ctrl+S 를 눌러주세요.

우측 설정옵션의 위에서부터 차례대로 저장 방식을 png로 선택한 다음, Image Size 탭 클릭 후 저장 원하는 사이즈를 입력하고 적용(Apply) 버튼을 누른 다음 저장(Save)해줍니다.

* 모바일에서는 실제로 노출되는 사이즈보다 2배 이상 큰 이미지를 등록해주어야 선명하게 노출되기 때문에 PC용 사이즈, 모바일용사이즈를 각각 저장해주었습니다.

# PC 쇼핑몰에 적용하기

FTP에 이미지를 업로드한 후 불러올 수도 있지만 저는 카페24에서 제공하는 모듈과 변수를 이용해서 FTP에 업로드하지 않고 로고 이미지를 적용해 보겠습니다.

카페24 기본 스마트 디자인 스킨에서 수정을 진행하였습니다.

우선 로고에 해당되는 소스코드를 찾아줍니다. (보통은 header 내에 있습니다) 여기에서 {$mall_name} 이라는 변수는 ‘쇼핑몰명’과 연동되는 변수입니다. (쇼핑몰명 : 상점관리 > 기본정보관리 > 내 쇼핑몰 정보 > 쇼핑몰명) 이 변수 대신 {$logo} 라는 변수를 이용해보겠습니다.

{$logo} 변수은 이미지 경로를 뜻하기 때문에 아래와 같이 이미지 태그를 작성한 후 src 속성에 넣어주어야 합니다. 또한 특정 변수는 특정 모듈 내에서만 정상적으로 연동되기 때문에 Layout_LogoTop 이라는 모듈 내에 해당 변수가 있어야 합니다.

소스코드를 수정한 후 저장을 해주면 아래와 같이 로고가 샘플 이미지로 변경되어 있습니다.

이제 코드 입력창이 아닌 위쪽의 쇼핑몰 상태 창에서 로고 이미지에 마우스를 갖다 대면 편집 버튼이 뜨게 됩니다. 이 버튼을 클릭해주세요

여기에서 속성 탭을 클릭하면 파일을 불러올 수 있습니다. 앞서 일러에서 저장했던 파일을 불러온 후 적용 버튼을 클릭해주세요

PC 쇼핑몰을 확인해보면 로고 이미지가 적상적으로 적용되었습니다.

# 모바일 쇼핑몰에 적용하기

모바일에도 로고 이미지를 적용해보겠습니다. 앞에서 언급한 것처럼 모바일에서는 실제로 노출되는 사이즈보다 2배 이상 큰 이미지를 등록해주어야 선명하게 노출됩니다.

모바일 로고 적용 방법은 PC 보다는 조금 더 간단합니다. 모바일 스마트 디자인 편집창에서 모바일 로고에 마우스를 갖다대면 편집 버튼이 노출됩니다. 이번에는 다른 소스 수정 없이 편집 버튼을 바로 클릭합니다.

이후에는 PC와 동일합니다. 속성 탭을 클릭한 후 이미지를 선택, 등록하여 적용 버튼을 눌러줍니다.

만약 위와 같이 설정창이 노출되지 않는다면 모바일 로고 소스가 아래와 같이 적용되어 있는지 확인해주세요. 역시나 Layout_LogoTop 이라는 모듈 내에 {$mobile_title} 이라는 변수가 작성되어 있어야 합니다.

{$mobile_title}

모바일 쇼핑몰에서도 로고가 정상적으로 적용되었습니다.

이번 포스팅에서는 일러스트레이터에서 로고를 제작한 후 png로 저장, 카페24 쇼핑몰에 적용하는 방법을 알아보았습니다.

[카페24] 반응형 무료 디자인 수정하기 03

저번 시간에 이어서 상점 탑 로고를 수정하겠습니다. 탑 내비게이션을 최종적으로는 위 이미지처럼 수정하기로 했었습니다. 로고도 변경해야 할 테고, 로고의 위치도 수정해야 할 건데 반응형이기 때문에 저번 시간과 같이 미세하게 다르지만 똑같은 작업을 세 번씩 해야 하기 때문에 끝까지 읽어주시면 좋을 것 같습니다.

스마트 디자인 편집창을 열어 첫 화면을 보면 로고가 보일 것입니다. 마우스 커서를 근처에 가져가면 편집 버튼이 생깁니다. 클릭을 해봅니다.

더보기 로고를 index.html(첫 화면)에서 클릭으로 편하게 오픈 했지만, 사실은 index.html을 감싼 main.html 안에 있습니다. 바꿔 말하면 메인 레이아웃(main.html)이 index.html 의 내용을 감싸고 있습니다. 쉽게 1행의 부분을 삭제 후 저장해서 확인해보시면 어떤 이야기인지 훨씬 쉽게 이해하실 수 있을 겁니다. 그리고 저번 시간에도 언급했던 메인 레이아웃, 공통 레이아웃, 디테일 레이아웃 각각 따로인 이 레이아웃들에 똑같은 경로의 똑같은 스타일시트 (/css/module/layout/logotop.css)를 쓰고 있기 때문에 이 css를 수정했을 때 세개의 레이아웃에 똑같이 적용된다는 이야기입니다. index.html

창이 하나 열리는데 속성 탭을 클릭합니다. 이미지 변경이 가능한 페이지가 보입니다. 파일 선택을 눌러 로고를 선택하고 적용 버튼을 클릭합니다. 적용하면 아주 쉽게 변하죠?

더보기 41번 행을 살펴보면, 조금이라도 html을 알고 계신 분이라면 img src 다음에 분명 이미지 주소(이미지 경로)가 있어야 이미지가 보일 텐데 주소는 없고 {$logo}가 있는데 로고 이미지가 보이고 있는 이 상황. 카페24는 모듈이라는 것들이 존재해서 이 것들에 대해서 알고 있으면 이 모듈을 활용하기도 하고, 편의에 따라 모듈을 삭제하기도 합니다. 예를 들어 이미지 호스팅이 있어 로고 이미지를 직접 경로로 사용할 생각이 있는 경우 {$logo}를 삭제하고 이미지 경로를 주면 됩니다. (이것도 마찬가지로 모든 레이아웃에 직접 경로를 적용해줘야 합니다. 그리고 이 모듈이 사용되는 곳에도 직접 경로를 적용하거나, 따로 모듈 창을 열어 로고 이미지를 다시 등록해줘야 합니다. 로고는 홈페이지 내에 많은 곳에 들어가니 가급적이면 모듈을 통해 한번만 등록해서 여기저기 보이는 게 작업 시간이 훨씬 줄고 편하겠죠.) 이 카페 24에서 모듈이라는 것은 웹 프로그램에 준하는 것들입니다. 제가 주로 많이 사용 했던 부분은 상품 리스트의 상품명, 상품가, 상품가격, 썸네일이 중이 보일지 소가 보일지 등등 생각보다 많은 부분에서 모듈명을 알아야 할 필요가 있었기 때문에 언급합니다. 하기 링크는 카페24 모듈 리스트입니다. 생각보다 이 페이지를 찾는 게 쉽지 않아 공유합니다. https://sdsupport.cafe24.com/product/list.html?cate_no=61

로고 이미지를 쉽게 변경했지만, 위치를 변경하고 사이즈를 변경하는 것은 아주 어렵지는 않지만 이미지를 변경하는 것만큼 간단하진 않습니다. 사이트 미리보기로 돌아와 살펴보고 스마트 디자인 편집기에서 수정하고 이 작업을 반복하겠습니다. 개발자 도구를 열어 요소 선택 툴로 로고 주변을 살펴봅니다. 이 로고 이미지를 감싸고 있는 div(.topArea)의 position이 relative로 되어있습니다. 작성된 순서에 따라 배치되고 있기 때문에 이를 무시하기 위해 absolute로 수정을 할 것입니다.

더보기 실제로 제가 작업을 할 때에는 개발자 도구로 로고 이미지부터 그 주변까지 어떤 속성이 있는지 다 살펴봅니다. 이번에는 딱 원하는 위치에 로고를 놓을 것이기 때문에 position을 찾다 보니 로고 이미지를 감싸고 있는 div나 태그를 찾았습니다. 요소 선택 툴로 요소를 선택 후 스타일만 볼 것이 아니라 위의 요소란의 태그들도 확인해가면서 보면 훨씬 도움이 됩니다. 예를 들어 이미지를 클릭 후 태그를 살펴보면 구조가 img메인 레이아웃>레이아웃.css를 엽니다. 5행 #header .topArea를 찾아 확인하니 확실히 relative로 되어있습니다.

더보기 창을 여는 방법은 세 가지가 있습니다. 보이는 페이지의 경로를 따라 파일 열기로 계속 계속 오픈하는 방법. 예를 들어 편집창 첫 페이지는 무조건 index.html인데 1행에 보면 이 것이 메인 레이아웃 html입니다. 이것을 파일열기로 클릭하여 메인 레이아웃에 들어가면, 18행에 가 있습니다. 제가 작업할 때는 주로 이렇게 작업하지만, ftp나 폴더 탐색처럼 경로를 볼 수 있도록 편집창 좌측에 전체 화면 보기 탭이 있습니다. 이것을 클릭하셔서, 레이아웃(layout)>기본레이아웃(basic)>css>layout.css이렇게 찾는 방법도 있습니다. 하지만 사이트의 구조 파악이 되어있지 않다면 찾기 쉽지 않겠지요. (경로가 다르고 파일명이 같은 경우도 많습니다.) 마지막 방법은 마찬가지로 편집창 좌측에 있는 화면명 검색으로 찾는 방법이 있습니다. layout.css를 검색하면 이미지처럼 검색되어 보입니다. 이것도 검색할 파일의 명과 위치를 어느 정도 파악하고 있다는 전제하에 사용할 수 있습니다.

5행의 #header .topArea에 position을 absolute로 변경 후 저장(Ctrl+s)합니다. 그리고 다시 사이트 미리보기로 와서 F5로 새로고침 후 확인을 합니다.

확인하니 작성된 순서가 풀려 딱히 설정이 없는 .topArea div는 h1의 속성대로 보이고 있습니다.

개발자 도구로 요소 선택을 해서 구조를 확인합니다. h1의 상위 div인 .topArea에 딱히 설정이 없으니 h1의 @media (min-width: 1025px) .xans-layout-logotop class가 그대로 반영된 상태입니다. 가로 800px 위 간격 53px 아래 간격 31px 이미지 사이즈 높이 40px 높이 도합 124px에 text-aling은 center 한마디로 가로 800px 세로 124px 가로 중앙 정렬인 h1이 .topArea의 absolute포지션에 위치 설정이 없으니 무조건 좌측 상단에 붙어있는 모습인 거죠. 다시 편집창으로 돌아갑니다.

쇼핑몰 메인>메인 레이아웃>logotop.css

메인 레이아웃 페이지의 40행 를 파일 열기로 열어봅니다. 모바일/태블릿 버전 밑에 PC버전이 있네요.

다시 미리 보기 사이트로 건너와 h1의 위치를 수정해봅니다. width는 h1의 내용물에 딱 맞아지도록 100%로 수정하고 padding을 이용해 위치를 조절합니다. padding은 top 15px 정도면 알맞아 보이네요.

10행 .xans-layout-logotop에 width는 100%로, padding은 15px 0px 0px로 수정합니다.

그리고 로고 이미지 사이즈가 너무 작아 보여서 조금 키워주고 싶으니 이번에야 말로 img 태그를 클릭하여 스타일을 확인합니다. 로고 이미지의 최대 높이가 27px로 되어 있어 이미지가 작네요. 가로 최대 사이즈는 딱히 신경 쓰지 않아도 될 것 같습니다.

이미지 최대 높이를 54px로 수정해보겠습니다. 저는 이 정도 사이즈가 마음에 드네요. 다시 편집창으로 돌아갑니다.

아까 보던 화면 그대로 12행에 .xans-layout-logotop img 로고 이미지 관련 스타일이 있네요.

max-height를 54px로 수정 후 저장합니다.

수정을 하고 보니 로고 사이즈에 비해서 내비게이션의 높이가 조금 적은 게 아닌가 싶어 사이즈를 늘립니다. (탑 내비게이션 높이를 조절하는 방법)

개발자 도구 요소 선택 툴로 내비게이션을 선택합니다. #header .navigation의 속성을 보면 높이가 64px로 다소 좁은데 80px로 늘려보고 괜찮아 보이니 바로 수정하도록 하겠습니다.

편집 창의 layout.css로 돌아와 PC버전을 살펴봅니다. 92행에 #header .navigation이 있네요.

min-height 80px로 수정하고 저장하겠습니다. 저장 후 미리 보기 사이트에서 확인하신 후 스크롤을 한번 해주시기 바라겠습니다.

스크롤을 내리니 로고는 사라지고, 내비게이션 바의 높이가 60px로 돌아왔습니다. 스크롤 시 position의 fixed속성으로 내비게이션 바를 고정해놨습니다. 그런데 그저 고정하는 것이 아니라 속성이 또 적혀 있어서 이 fixed class 에서도 높이를 수정해줘야 합니다. 내비게이션 바가 스크롤시 고정되는 스타일은 최근 쇼핑몰에서 많이 사용하는 스타일입니다. 그런 이유로 수정을 하고 있었는데, 살펴보니 태블릿과 모바일 버전에서는 스크롤을 해도 고정 되질 않던데 이 부분도 나중에 수정하겠습니다. 우선은 PC 버전을 수정하겠습니다.

우선 높이부터 수정하겠습니다. 요소 선택 툴로 이미지의 2번 위치를 클릭합니다. 그러면 #header.fixed의 스타일을 확인할 수 있는데, 우선 높이를 80px로 스크롤 전과 동일하게 맞추겠습니다. (로고 이미지의 사이즈를 고려해서)

편집 창의 layout.css로 돌아와 PC버전 90행에 높이를 60px에서 80px로 수정 후 저장합니다.

이제 스크롤을 다시 위로 올려 내비게이션 바를 확인하면 로고 때문에 바의 높이를 수정했더니 메뉴나 아이콘의 위치가 중앙이 아니라서 영 불편합니다. 높이를 대략적으로 중앙 정렬하겠습니다.

개발자 도구에서 보니 .navigation__category li라는 class를 찾아서 padding값을 수정해야겠네요. 지금은 위에서 23px이라 내비게이션 바의 높이가 80px인 것을 감안하면 확실히 높은 위치에 있긴 하네요.

개발자 도구에서 여러분이 직접 원하는 수치를 조절해 보시는 것을 추천해드립니다. 스타일의 수치에 더블 클릭을 하면 직접 수정해 보실 수 있습니다. (실제 사이트의 서버에 적용되어 저장되는 것이 아닙니다. 그렇기 때문에 편집 툴에서 수정 후 반드시 저장해주세요.) 저는 padding-top이 32px이면 알맞아 보이네요.

메인 레이아웃에서 45행 을 열어 확인합니다. 2행에 .navigation__category li가 확인되네요.

padding에 80px 0px 0px 수정 후 저장합니다.

이제 아이콘들도 위치를 수정해보겠습니다. 아이콘들의 class들은 전편에서 많이 다뤘기 때문에 익숙하실 겁니다.

#header .navigation__util 기억나실까요? top 20px인 부분을 30px로 수정해보니 괜찮은 것 같습니다.

편집 창의 layout.css에 미디어 쿼리로 작성되어있습니다. 저희는 우선 pc버전을 확인합니다.

#header .navigation__util 아이콘들에 높이 20px을 30px로 수정하고 저장합니다.

이제 사이드 메뉴 버튼의 위치를 수정합니다. #header .navigation .btnNav 익숙한 class네요. 마찬가지로 top 20px을 30px로 수정하겠습니다.

이미지와 같이 수정을 완료하셨다면 저장해주세요. 이제 다시 스크롤을 내려보겠습니다. 지금 상태에서는 스크롤을 내렸을 때 로고가 나오지 않습니다.

원인을 살펴보니 #header.fixed .navigation에 background가 있어서 로고 이미지가 가려지고 있는 것 같습니다. 실제로 속성을 없애니 잘 보입니다.

그것도 아니면 z-index 속성을 활용하는 방법도 있습니다. 어차피 내비게이션 fixed의 background는 삭제할 거니 삭제하는 방향으로 수정하겠습니다.

#header.fixed .navigation 은 편집 창의 layout.css에 있었지요. 저는 이미지에 보시면 설명을 위해 주석처리를 했지만, 여러분은 삭제해주시고 저장해주세요. 여기까지 하면 PC버전은 원하던 디자인으로 수정이 완료되었습니다. 태블릿도 모바일도 이런 방식으로 수정을 해주시면 됩니다.

이제 모바일 버전, 태블릿 버전의 로고 이미지 위치 및 사이즈를 조절하고 내비게이션 바를 고정하는 작업까지 하면 완료되겠습니다. 빠른 설명으로 진행하겠습니다.

header 고정 방법

layout.css에서 위 이미지에 표시된 두 줄을 복사합니다. 위 두 줄은 PC버전의 header고정 내용입니다. 이미지의 100행 끝에 background-color:rgba(255,255,255,0.8)을 추가했습니다. 스크롤 시 고정된 header 배경의 색상이 화이트에 0.8의 알파 값을 갖는 수치입니다.

#header.fixed { overflow:hidden; position:fixed; top:0; width:100%; height:80px; z-index:1000; transition:.5s; background-color: rgba(255,255,255,0.8); } #header.fixed .navigation { position:absolute; top:0; left:0px; right:0px; /*background:#fff; 배경 컬러 삭제*/ }

복사한 두 줄을 메모장이나 다른 곳으로 옮겨서 #header.fixed .navigation의 left 및 right를 0px로 수정하여 다시 복사합니다. 이렇게 복사된 내용을 layout.css에 보이는 PC 버전과 최상단 제외 모든 버전의 안에 붙여 넣기 합니다.

/********************* Mobile *********************/ @media all and (max-width:767px) { /* responsive class */ .RTI, .RTB, .RTIB { display:none !important; } .RMB { display:block !important; } .RMI { display:inline !important; } .RMIB { display:inline-block !important; } #header.fixed { overflow:hidden; position:fixed; top:0; width:100%; height:60px; z-index:1000; transition:.5s; rgba(255,255,255,0.8);} #header.fixed .navigation { position:absolute; top:0; left:0px; right:0px; /*background:#fff;*/ } #header .navigation .btnNav { right:16px; } #header .navigation__util { right:60px;} }

/********************* Mobile / Tablet *********************/ @media all and (max-width:1024px) { /* responsive class */ .RWI, .RW, .RWB, .RWIB { display:none !important; } .RTMB { display:block !important; } .RTMI { display:inline-block !important; } #capp-shop-new-product-optionselect-layer { position:fixed !important; top:0 !important; right:0 !important; left:auto !important; width:100% !important; height:100% !important; margin:0 !important; } #header { position:relative; height:60px; padding:20px 0 0; box-sizing:border-box; } #header.fixed { overflow:hidden; position:fixed; top:0; width:100%; height:60px; z-index:1000; transition:.5s; rgba(255,255,255,0.8);} #header.fixed .navigation { position:absolute; top:0; left:0px; right:0px; /*background:#fff;*/ } #header .navigation .btnNav {position:absolute; top:18px; } #header .navigation__util { position:absolute; top:18px; } .bottom-nav { z-index:901; position:fixed; bottom:0; width:100%; height:52px; -webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);-webkit-transition: -webkit-transform .3s linear,padding-bottom .3s linear;transition: transform .3s linear,padding-bottom .3s linear; } .bottom-nav–hide { -webkit-transform: translate3d(0,60px,0); transform: translate3d(0,60px,0); } .bottom-nav__tabBar { display:flex;justify-content: space-between; height:52px; padding:14px 26px 0; box-sizing:border-box; background:#fff; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition: -webkit-transform .3s linear,padding-bottom .3s linear; transition: transform .3s linear,padding-bottom .3s linear; } .bottom-nav__tabBar li a, .bottom-nav__tabBar li button { position:relative; display:block; white-space:nowrap; width:24px; height:24px; font-size:1px; line-height:1px; color:transparent; text-indent:150%; vertical-align:top; background:none; } .bottom-nav__tabBar li button:focus { outline:0; } .bottom-nav__tabBar .count { display:block; position:absolute; top:12px; right:-5px; width:16px; height:16px; font-size:11px; color:#fff; text-align:center; text-indent:0; line-height:15px; border-radius:50%; background:#000; } .bottom-nav__top { opacity:0; visibility:hidden; position:absolute; top: -72px; right:16px; width:54px; height:54px; padding:15px 0 0; font-size:14px; border:1px solid #e3e3e3; box-sizing:border-box; text-align:center; text-transform: uppercase; background:rgba(256,256,256,0.9); transition:.5s; } .bottom-nav__top a { display:block; } .bottom-nav__top .icon.icoArrowTop { display:block; margin:0 auto; } .bottom-nav__top–show { opacity:1; visibility:visible; } .bottom-nav__top span { display:block; margin:4px 0 0; } #detail .bottom-nav { z-index:401; } #detail .bottom-nav–hide .bottom-nav__top { opacity:0; } .button–fixed .bottom-nav__tabBar { display:none; } .button–fixed #header.fixed { overflow:hidden; position:fixed; top:0; width:100%; height:60px; z-index:1000; transition:.5s; } .button–fixed #header.fixed .navigation { position:absolute; top:0; left:0; right:0; background:#fff; } #contents { position:relative; padding-bottom:100px; } main#contents { padding-bottom:66px; } #footer { padding:0 0 82px; } #topBanner { height:auto; } #topBanner .desc { overflow:visible; height:auto; line-height:1.67; } #topBanner .btnClose { right:16px; top:12px; } .xans-layout-mobileaction { position:absolute; top:45px; left:16px; } .xans-layout-mobileaction a { overflow:hidden; display:block; text-indent:-150%; color:transparent; font-size:1px; line-height:1px; white-space:nowrap; } #detail .xans-layout-mobileaction { top:16px; } }

/********************* Tablet *********************/ @media all and (min-width:768px) and (max-width:1024px) { /* responsive class */ .RMI, .RMB, .RMIB { display:none !important; } .RTI { display:inline !important; } .RTB { display:block !important; } .RTIB { display:inline-block !important; } #header.fixed { overflow:hidden; position:fixed; top:0; width:100%; height:60px; z-index:1000; transition:.5s; background-color: rgba(255,255,255,0.8); } #header.fixed .navigation { position:absolute; top:0; left:0px; right:0px; /*background:#fff;*/ } #header .navigation .btnNav { right:24px; } #header .navigation__util { right:80px; } }

이렇게 붙여 넣기를 완료하셨다면 저장 후 사이트 미리보기로 확인합니다. 별다른 이상이 없으면 로고로 넘어갑니다.

편집창에서 logotop.css를 열어 모바일 및 태블릿 버전에서 이미지 로고 이미지 사이즈를 수정합니다.

/********************* Mobile / Tablet *********************/ @media all and (max-width:1024px) { .xans-layout-logotop { text-align:center; } .xans-layout-logotop a { font-size:27px; line-height:1; color:#000; font-weight:bold; text-decoration:none; font-style:normal; } .xans-layout-logotop img { max-width:800px; max-height:40px; } }

저는 최대 높이 40px로 수정했습니다. 저장 후 보면 로고 사이즈는 커졌을 겁니다. 하지만 좌측과 높이가 전혀 지정되어있지 않습니다.

다시 layout.css를 열어 모바일 및 태블릿 버전의 ID header에서 padding을 확인합니다. padding-top 20px을 10px로 수정했습니다.

/********************* Mobile / Tablet *********************/ @media all and (max-width:1024px) { /* responsive class */ .RWI, .RW, .RWB, .RWIB { display:none !important; } .RTMB { display:block !important; } .RTMI { display:inline-block !important; } #capp-shop-new-product-optionselect-layer { position:fixed !important; top:0 !important; right:0 !important; left:auto !important; width:100% !important; height:100% !important; margin:0 !important; } #header { position:relative; height:60px; padding:10px 0 0; box-sizing:border-box; } . . .

모바일과 태블릿 모두에 동일하게 padding-top: 10px이 적용됩니다. 높이 설정은 됐으니 좌측 간격으로 넘어갑니다.

layout.css를 보면 딱히 #header .topArea에 관한 미디어 쿼리 내용이 없습니다. 이를 활용해 간격 조정을 하도록 하겠습니다. 개발자 도구에서 테스트 해보니 태블릿은 왼쪽 26px 모바일은 왼쪽 16px이면 알맞아 보였습니다.

#header .topArea { left:26px; } 은 태블릿에 #header .topArea { left:16px; } 은 모바일에 작성합니다.

/********************* Mobile *********************/ @media all and (max-width:767px) { /* responsive class */ .RTI, .RTB, .RTIB { display:none !important; } .RMB { display:block !important; } .RMI { display:inline !important; } .RMIB { display:inline-block !important; } #header .topArea { left:16px; } #header.fixed { overflow:hidden; position:fixed; top:0; width:100%; height:60px; z-index:1000; transition:.5s; } #header.fixed .navigation { position:absolute; top:0; left:0px; right:0px; /*background:#fff;*/ } #header .navigation .btnNav { right:16px; } #header .navigation__util { right:60px;} }

/********************* Tablet *********************/ @media all and (min-width:768px) and (max-width:1024px) { /* responsive class */ .RMI, .RMB, .RMIB { display:none !important; } .RTI { display:inline !important; } .RTB { display:block !important; } .RTIB { display:inline-block !important; } #header .topArea { left:26px; } #header.fixed { overflow:hidden; position:fixed; top:0; width:100%; height:60px; z-index:1000; transition:.5s; background-color: rgba(255,255,255,0.8)} #header.fixed .navigation { position:absolute; top:0; left:0px; right:0px; /*background:#fff;*/ } #header .navigation .btnNav { right:24px; } #header .navigation__util { right:80px; } }

이렇게 입력되었다면 저장 후 확인하시면 되겠습니다! 처음에는 똑같은 작업을 반복하느라 시간도 오래 걸리고 힘들게 느껴질 수 있지만 사이트 구조에 익숙해지면 작업 속도가 점점 빨라집니다. 문제가 있거나, 막히시는 부분, 설명이 개선되었으면 하는 부분이 있으시면 댓글 남겨주세요. 긴 글 읽어주셔서 감사합니다.

카페24 쇼핑몰구축 : 카테고리별 화면에서 로고 바꿔주기

반응형

큰 힘이 되는 공감과 댓글~~^^

개별 카테고리 화면

카페24의 무료디자인을 사용중이에요~

메인에서 로고이미지를 바꿨지만

카테고리를 클릭해서 넘어간 화면에서는

예전 로고 그대로임을 알 수 있습니다.

이 로고를 바꿔줄께요~

디자인 수정으로 들어옵니다.

디자인 수정으로 들어와

왼쪽 주요화면에 있는

상품분류를 선택합니다~

메인화면과 다르게 이름이 layout.html~~

layout.html에서

로고의 위치를 확인합니다~

layout.html으로 들어와

ctrl+f를 눌러 logo라고 검색~

로고 이미지를 바꿔줍니다.

2020.03.29 – [웹아이디어] – 무료 이미지호스팅 사이트 추천/이미지 링크 주소 만드는 간단한 방법

이것만 바꿔주면

다른 카테고리에서도

원하는 로고를 설정할 수 있습니다~~

반응형

카페24쇼핑몰 가이드

카페24 쇼핑몰 – 로고 변경하기

이번 시간에는 쇼핑몰 로고를 간단하게 변경하는 방법에 대해 알아보도록 하겠습니다. 로고 이미지는 페이지 여러곳에서 사용하는 중요한 이미지로 디자인 편집 에디터를 이용하여 간단하게 변경할 수 있습니다.

1. 디자인편집하기

로고 이미지 변경은 스마트디자인 편집창을 통해 변경하겠습니다. <디자인관리>–<쇼핑몰 디자인 편집>을 선택하면 <스마트디자인 편집창>으로 이동합니다.

2. 스마트 디자인 편집창

카페24 쇼핑몰 디자인을 수정할 수 있는 편집툴인 <스마트 디자인 편집창>을 제공하고 있습니다. 편집창을 통해 소스및 이미지를 간단하게 변경이 가능합니다. 우선 좌측 주요화면에서 메인화면을 선택하여 로고이미지를 확인합니다. 기본적으로 쇼핑몰 메인화면으로 이동됩니다.

3. 로고 모듈 선택하기

메인페이지를 선택하면 로고이미지를 확인할 수 있습니다. 마우스를 로고이미지로 이동하면 자동으로 다음과 같은 <편집>버튼이 활성화 됩니다. <편집> 버튼을 클릭하여 모듈 속성 페이지로 이동합니다.

4. 속성변경하기

<편집>버튼을 클릭하면 모듈 속성 페이지로 이동합니다. 왼쪽 속성, HTML, 모듈편집 중에서 속성 버튼을 클릭하면 해당 모듈의 이미지를 변경할 수 있는 항목을 확인할 수 있습니다.

5. 파일 선택하기

<파일 선택> 버튼을 이용하여 이미지를 업로드 후 하단의 <적용>버튼을 클릭하면 로고이미지 변경 작업이 마무리 됩니다. 로고이미지는 큰 이미지로 사용할 경우 이미지가 잘릴 수 있으므로 사이즈 확인 후 업로드 하시길 바랍니다.

파일:Cafe24 logo.png

이 파일이 나타내는 바에 대한 한 줄 설명을 추가합니다

이 그림, 혹은 그림에 묘사된 문구는 매우 단순한 형태를 가지고 있습니다. 이 그림은 저작권 보호에 필요한 창작성을 발견할 수 없다고 판단되며, 따라서 퍼블릭 도메인으로 제공됩니다. 이 그림은 저작권의 제약에서는 자유롭지만, 다른 제한 에 대한 여지가 있을 수 있습니다. 자세한 정보는 WP:PD#Fonts Template talk:PD-textlogo 를 읽어주세요.

날짜/시간 링크를 클릭하면 해당 시간의 파일을 볼 수 있습니다.

다음 위키에서 이 파일을 사용하고 있습니다:

이 파일에는 카메라나 스캐너가 파일을 만들거나 디지털화하는 데 사용하기 위해 기록한 부가 정보가 포함되어 있습니다.

프로그램에서 파일을 편집한 경우, 새로 저장한 파일에 일부 부가 정보가 빠질 수 있습니다.

키워드에 대한 정보 카페 24 로고

다음은 Bing에서 카페 24 로고 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.

이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!

사람들이 주제에 대해 자주 검색하는 키워드 카페24 쇼핑몰 디자인-카페24 로고 변경하기, 박길현 [카페24 쇼핑몰제작/동영상 강의 #36]

• 카페24쇼핑몰
• 카페24쇼핑몰제작
• 카페24쇼핑몰디자인
• 카페24쇼핑몰동영상강의
• 쇼핑몰이미지변경
• 카페24로고변경
• 박길현

카페24 #쇼핑몰 #디자인-카페24 #로고 #변경하기, #박길현 #[카페24 #쇼핑몰제작/동영상 #강의 ##36]

---

YouTube에서 카페 24 로고 주제의 다른 동영상 보기

주제에 대한 기사를 시청해 주셔서 감사합니다 카페24 쇼핑몰 디자인-카페24 로고 변경하기, 박길현 [카페24 쇼핑몰제작/동영상 강의 #36] | 카페 24 로고, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.