쇼핑몰디자인 이미지배너 변경하기 세번째

 

저번 고도몰5 이미지 webftp를 이용하여 쉽게 이미지를 바꾸는 걸 배우셨습니다.
이미지를 바꾸시려면 이미지의 주소, 이름을 알아야 할 텐데,
만약 까먹으셨거나 어디서 봐야 하는지 방법을 모르시는 분들의 위해 준비하였습니다.

요약정리 이미지배너 찾는 방법 3가지
① 마우스 왼쪽 버튼을 누른 후 '다른 이름으로 저장'
② 크롬에서 F12 개발자 화면의 Style에서 링크 주소를 확인
③ 크롬에서 F12 개발자 화면의 Element에서 링크 주소를 확인

 

 

방법 3가지 중 첫번째부터 알려드리겠습니다.

① 마우스 왼쪽 버튼을 누른 후 '다른 이름으로 저장' 

 

원하는 이미지에 마우스로 오른쪽 클릭을 합니다. 
이미지를 다른 이름으로 저장을 마우스 왼쪽 클릭을 합니다. 
그리고 원하는 위치에서 저장 버튼을 누르시면 됩니다. 

 

다른 이름으로 저장


하지만 다른 이름으로 저장이라는 버튼이 없는 경우가 있습니다.
그때 찾는 방법을 안내드리겠습니다.

 

방법 3가지 중 두번째부터 알려드리겠습니다.

② 크롬에서 F12 개발자 화면의 Style에서 링크 주소를 확인 


네이버에서 로고이미지를 다운로드하는 방법을 알려드리겠습니다.
모든 사이트에서 이미지배너를 찾을 수 있는 베스트 방법입니다.

먼저 익스플로러(EXPLORE)와 크롬(CHROME)을 둘 다 사용하고 계시나요?
이 방법에서는 익스플로러보단 크롬에서 하시는 걸 추천드리겠습니다.

크롬을 사용하지 않는다면 무료로 다운로드 하시는 걸 추천드립니다.
https://www.google.com/chrome/


1. 크롬에서 www.naver.com를 열고 키보드의 F12버튼을 누릅니다. 
화면의 좌측, 하단, 우측 중에 개발자 화면이 보입니다.

 

네이버메인에서 F12 누르면 화면


2.

요소선택 버튼을 누릅니다. 
그리고 마우스로 네이버 로고에서 마우스의 왼쪽 버튼을 누릅니다.

 


3. 네이버 로고가 선택이 되었습니다. 
Styles에서 background-img : url(https://www.naver.com/이미지로고) 가로안에 이미지의 주소가 있습니다.

 

노란색부분 끝의.png까지 복사해주셔야 합니다.


4. 링크주소를 복사 후 크롬 검색창에 붙여 넣고 이동합니다. 그리고 이미지 위에서 마우스 오른쪽 클릭 후
다른 이름으로 저장을 눌러주시면 됩니다. 

 

크롬 주소창에 주소를 붙여넣기하고 엔터누릅니다.

 

방법 3가지 중 3번째부터 알려드리겠습니다.

③ 크롬에서 F12 개발자 화면의 Element에서 링크 주소를 확인 

 

img src의 링크가 이미지 주소입니다.


보통은 2번째 화살표 버튼을 누르면 Elements에서 img src="https://www.naver.com/이미지로고" 가 보입니다.
그러면 이 링크에 이미지가 있다고 확인을 하지만 네이버의 경우에는 지금의 방법으로 찾아봐야합니다.

이상, 쇼핑몰디자인 이미지배너 변경하기 세번째를 알려드렸습니다.

공감과 댓글은 블로거에게 큰 힘이 됩니다. 감사합니다.

반응형

고도몰관리자에서 HTML 보는 방법

 

HTML(Hypertext Markup Language)란?

웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류이다. 
하이퍼텍스트를 작성하기 위해 개발되었다.

고도몰에서는 관리자화면에서 간단하게 HTML소스를 수정할 수 있습니다.
아는만큼 보인다는 말과 같이 이미지, ULR링크와 같은 간단한 소스가 어디에 있는지,
어떻게하면 바꿀 수 있는지를 설명드리겠습니다.

고도몰관리자 페이지를 엽니다.
순서 : 디자인 > 디자인 관리 > 메인 > 쇼핑몰 메인본문 (main/index.html)

 

관리자>디자인>디자인페이지설정>main/index.html


쇼핑몰의 PC의 메인화면, 첫화면입니다.

중간을 내리면서 보면 

<p><img><a><div><li>와 같은 글자들이 보입니다.

그리고 이걸 태그라고 부릅니다.

 

각 태그마다 뜻하는 의미와 기능이 있습니다.
그리고 각 태그는 </ > 마무리가 됩니다. 

 

태그 의미 마무리
<p> 단락 </p>
<img> 이미지 없음
<a> 링크 </a>
<div> 태그의 묶음 </div>
<li> 리스트 </li>

밑에 태그의 의미를 풀어보겠습니다.

<p class="store_title"><img class="store_img1" src="../img/mimg/store_icon_main.jpg"><a href="www.dptl.co.kr/store">매장안내 </a></p>

 

우선 한글이 있네요! 매장안내

아마 이건 매장안내를 설명하는 글로 보여집니다.
모르는 것들은 빼고 아는 것부터 보면됩니다.

 

<p><img><a>매장안내</a></p>

 

1. <p class="store_title>

<p> 태그로 단락이 시작되고,

 

2. <img class="store_img1" src="../img/mimg/store_icon_main.jpg">

중간에 <img>태그로 이미지가 있습니다.

 

3. <a href="www.dptl.co.kr/store">

그 다음에 <a> 태그로 링크가 있습니다.

 

4. 매장안내

5. </a></p> 이미지 빼고는 <a><p>태그가 마무리가 되었습니다.

 

여기서 알아야 할점은!
매장안내 단락이구나, 여기엔 이미지와 링크를 썼구나,
만약에 내가 이미지와 링크를 변경하고 싶다면 여기서 고치는 거겠구나?

간단하게 링크는 <a href="www.dptl.co.kr/store"> 이 중에서

www.dptl.co.kr/store -> 원하는 링크 주소를 적고 오른쪽 상단의 '디자인 페이지 저장' 빨간 버튼을 누르면 완료입니다.
매장안내 글씨를 마우스로 눌렀을 때 그 링크고 이동되게 됩니다.

그러면 이미지는 어떻게 바꾸면 되는 건지 궁금하실 겁니다.
방법은 저번 글에서 소개했던 이미지 등록방법 3가지 중 2번째로!
이미지를 바꾸는 방법은 이번 글의 내용을 이해하신 후에 진행하시면 됩니다.

다음 글에서 이미지를 변경하는 방법 2번째 html 수정하기를 설명드리겠습니다.

 

공감과 댓글은 블로거에게 큰 힘이 됩니다. 감사합니다.

반응형

고도몰에서 html 수정 없이 간단하게 이미지 변경하기

 

이미지 등록 방법 3가지 중 제일 간단한 방법 첫 번째! 이미지 배너
이미지 배너는 주로 메인화면의 상단, 중간 슬라이드 이미지에서 많이 사용합니다.

메인화면 상단 슬라이드 이미지를 수정하는 방법을 설명하겠습니다.

관리자페이지 - 움직이는 배너관리


고도몰 관리자 페이지를 엽니다.
순서 : 디자인 > 디자인 설정 > 움직이는 배너 관리 > '수정'버튼

 

움직이는 배너 수정



'찾아보기'버튼 : 준비된 이미지를 선택하면 변경됩니다. 
링크 주소 : 이미지 클릭 후 이동되는 url 주소를 적기
이미지 설명 : 이미지의 네임텍으로 정상적인 이미지라면 실제로 보이진 않습니다.

마지막으로 우측 상단의 '움직이는 배너 등록' 빨간 버튼을 눌러주시면 됩니다.

배너 이미지 사이즈를 까먹으셨다면 배너 사이즈에 나와있습니다.

이번에 새로 업데이트된 기능으로 노출 기간을 설정할 수 있습니다.
이벤트 종료 후 날짜에 맞춰 수동으로 배너를 삭제하였다면,
자동으로 이벤트 기간에 맞춰 슬라이드 배너를 노출되도록 할 수 있습니다.
요즘 제일 만족하는 기능이기도 합니다.

참고로 카테고리 페이지에서도 이미지 배너를 사용합니다.
거긴 슬라이드 배너를 추가해도 단일 이미지만 보이고, 슬라이드가 적용이 안됩니다.

고도몰에 문의해보니 카테고리 페이지 슬라이드배너를 지원하지 않다는 답변을 받았습니다.

 

공감과 댓글은 블로거에게 큰 힘이 됩니다. 감사합니다.

반응형

+ Recent posts