현재 위치
  1. 게시판
  2. 유용한 웹 팁

유용한 웹 팁

쇼핑몰 운영에 도움이 되는 정보들입니다.

게시판 상세
제목 쇼핑몰 이미지 수정 방법 & 링크 수정 방법
작성자 별모아디자인 (ip:)
  • 평점 0점  
  • 작성일 2019-07-21
  • 추천 추천하기
  • 조회수 322


< FTP로 이미지 업로드 하는 방법 >





아래 내용은 FTP를 이용하여 이미지를 업로드 하고,  html 소스에서 이미지 링크를 수정하는 방법입니다.

쇼핑몰에 배너 이미지를 더 추가하실 때도 이미지를 FTP로 업로드 하신 다음, 

HTML 소스에서 이미지 태그를 삽입하여 추가하는 방식의 설명입니다.






< 쇼핑몰 이미지 수정 및 삭제, 추가 방법 >



★ 이미지 수정 방법 : 쇼핑몰 기존 이미지와 동일한 이미지 파일명크기확장자로 포토샵에서 이미지 작업해주세요.

( 수정하려는 이미지에 마우스 대고 오른쪽 버튼 클릭해서 이미지를 다른 이름으로 저장 하여 

컴퓨터에 저장 하신 후 해당 이미지의 파일명, 크기, 확장자를 확인 가능합니다. )

옵션2나 3으로 구매하신 분들은 별모아에서 제공해드린 psd 파일 열어서 수정해주시면 됩니다.

쇼핑몰 좌측 영역의 배너 이미지들은 세로길이는 원하시는대로 해주셔도 되며이미지 태그를 삽입하여 배너를 더 추가해주셔도 됩니다.

   

 



 FTP 이미지 업로드 방법 :  

카페24의 FTP 접속 및 사용은 Windows, 익스플로러 환경에서만 가능합니다. 그 외 환경(크롬, 파이어폭스 등)에서는 정상적으로 사용하실 수 없으니 참고 바랍니다.  

관리자 페이지 최상단 오른쪽의 FTP 클릭 FTP접속 버튼 클릭 FTP접속 버튼 클릭 대표 관리자 아이디와 비번으로 FTP 연결 >  FTP 이미지 경로 /web/upload/byulmoa숫자/images/ 로 클릭하여 들어가서 덮어쓰기로 이미지 업로드 하기  

 (모바일 디자인의 FTP 경로는 /web/upload/b_mobile숫자/images/ 입니다.)

                       

 위의 FTP 경로 설명에서 숫자는 별모아에서 구매하신 디자인 넘버를 말합니다.

예를들어 별모아 53번을 구매하셨으면 FTP 경로는 web 폴더 > upload 폴더 > byulmoa53 폴더 > images 폴더 가 됩니다고객님께서 구매하신 디자인 넘버에 맞는 폴더를 찾으셔서 클릭해 들어가시면 됩니다.

디자인 넘버가 기억이 안나시면 디자인관리 > 디자인 보관함에서 구매하신 디자인명을 확인해주시면 됩니다.

 



   



★ 이미지 링크 수정 방법 : 디자인관리 디자인관리 디자인 보관함 에서 수정 버튼을 클릭하여 스마트디자인 편집창에서 이미지 링크 수정해주세요편집창에서 링크 수정을 원하는 이미지의 소스를 찾는 간편한 방법이 있습니다.

모바일 디자인은 모바일쇼핑몰 > 디자인관리 > 디자인 보관함에서 수정 버튼 클릭해주세요.    

 



스마트디자인 편집창이 열리면 제일 처음에 메인화면이 기본적으로 보여집니다상단에 쇼핑몰 메인 (index.html)이라는 이름의 파일이 바로 쇼핑몰 메인화면입니다편집창 하단에 3개의 아이콘이 있는데 아이콘에 마우스를 올리면 화면보기분할보기, HTML보기 이렇게 나옵니다중간에 있는 아이콘인 분할보기 아이콘을 클릭하시면 소스창이 가로로 2분할로 보여집니다

 2분할 화면에서 윗 부분은 쇼핑몰 화면이 보여지고 아래 부분은 소스 영역이 보여집니다윗부분의 쇼핑몰 화면에서 이미지를 선택을 하면 아래 소스창에 해당 이미지의 소스가 선택이 됩니다이렇게 하면 링크 수정을 원하시는 이미지의 소스를 빨리 쉽게 찾으실 수 있습니다

 유의하실 점은 반드시 편집창 상단에 쇼핑몰 메인 (index.html)이라는 이름의 파일이 선택된 상태에서 이미지를 선택하셔야 소스 선택이 됩니다편집창 상단에 쇼핑몰 메인(index.html) 페이지가 선택된 상태인지 확인하시면서 이미지 선택해주세요편집창 왼쪽의 메인화면이라는 글자를 클릭하셔도 됩니다이미지가 선택이 잘 안될 경우는 이미지가 포함된 영역을 선택하시면 해당 영역의 소스 중에서 이미지 소스를 금방 찾으실 수 있습니다.

   



아래와 같이 <a href= 로 시작하는 소스가 링크 소스입니다

아래 빨간색인 주소 부분과 파란색인 타겟 부분을 수정해주시면 링크가 수정이 됩니다.

   



현재창으로 링크 걸려면 아래 파란부분처럼 _self 로 수정해주세요.

<a href="주소" target="_self"><img src=“이미지 주소” border=“0” alt=“” /></a>

                   

새창으로 랑크걸려면 아래 파란부분처럼 _blank 로 수정해주세요.

<a href="주소" target="_blank"><img src=“이미지 주소” border=“0” alt=“” /></a>

   



   



만약 위의 방법으로 이미지 링크 소스를 찾는 것이 잘 안되실 경우에는 직접 소스를 찾아보시기 바랍니다편집창 하단의 아이콘 3개 중에서 세 번째 아이콘인 HTML보기 아이콘을 선택하신 후스마트디자인 편집창 왼쪽 하단의 화면명 검색창에서 layout.html 을 검색한 후 /layout/basic/layout.html 에 체크한 후 선택파일열기 를 클릭하면 공통 레이아웃 페이지 HTML 소스가 나타납니다각 영역의 링크주소 옆에 마우스를 대면 '파일열기글자가 나타납니다'파일열기'를 클릭하시면 해당 영역의 페이지로 이동합니다해당 영역의 페이지에서 원하시는 이미지의 소스를 찾아서 링크 수정해주세요메인화면의 이미지 링크 소스는 편집창 하단 왼쪽의 화면명 검색에서 index.html 를 검색하여 쇼핑몰 메인화면 페이지에서 소스 찾아서 수정해주세요



















    

첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
댓글 수정

비밀번호 :

/ byte

비밀번호 : 확인 취소

댓글 입력
댓글달기 이름 : 비밀번호 : 관리자답변보기

영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자

/ byte

왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)

관리자에게만 댓글 작성 권한이 있습니다.