이번에는 파일질라를 이용해 홈페이지에 이미지를 등록하는 방법에 대해서 설명을 하겠습니다.
먼저 파일질라에 접속해주세요.
먼저 아래의 사진을 보시면 www폴더(카페24 웹 호스팅 ID기준. 타 사이트에서 웹호스팅 ID를 발급 받으신분은 html
폴더나 상위 기존에 만들어진 폴더안에 넣어주시면 되요) 안에 제가 따로 img 라는 폴더를 만들었어요. www폴더안에 이미지를 넣어도 상관은 없지만 나중에 관리하게 쉽게끔 이미지 전용 폴더를 만들어 주세요. 사진이 수백장 넘어가면 각 이미지를 분류해서 여러개 폴더를 만들어 주시는게 나중에 수정할때 찾기가 수월해요!!
※ 꼭 www 폴더 안에 img(사용하실 폴더명) 폴더를 만들어 주셔야되요~!!
저는 www/img/person이라는 경로에 사진을 저장해뒀습니다.
오른쪽 폴더에서 자신이 올리고 싶은 이미지를 오른쪽 마우스 클릭하면 위 사진처럼 클립보드로 URL 복사라는 글이 보이게 될거에요. 클립보드로 URL 복사를 누르시면 /www/img/person/aelliseuapenjelleo.jpg
(웹호스팅 아이디@도메인 주소/폴더경로/사진명.파일 형식) 위에도 말했듯이 저는 카페24 사이트 에서 발급받은 웹호스팅 ID라서 /www/ 이런형식이 되는거구요 여러분은 각자 웹 호스팅 받은 사이트에서 정해주는 상위폴더 /html/ 이런 형식의 폴더명으로도 될수가 있어요. 이 말을 강조해드리는 이유가 다른사이트에서 웹호스팅 ID를 받으시면 상위 폴더가 /기존 상위 폴더명/으로 폴더명이 바뀔텐데 이거를 굳이 /www/ 이걸로 바꿔주실 필요없어요.(제가 이걸로 고생해봐서 알거든요..ㅎㅎ;)이런식으로 폴더안에 주소 경로 형식으로 복사가 됩니다. 이제 이 경로를 현재 작업하시는 소스에다가 같다 붙여넣어주실건데요 저는 Visual Studio Code 라는 프로그램으로 홈페이지를 만들고 있어서 여기 태그안에 저 소스를 넣었습니다.
적용 후 모습
위 사진과 같이 //www.ddanglittle.info/1-1.html 라는 도메인에 이미지가 다 잘들어가있는걸 볼수가 있습니다.
※여기서 주의 해야할 점
폴더명과 이미지 이름은 한글로 되면 등록이 안되요 제 홈페이지에는 이미지가 총 300개 이상이 들어갔는데 영어로 바꿔줘야 된다는 것도 모르고 다 한글로 작업을 마쳤습니다. 그런데 유튜브에서 계속 사용법을 보고 따라하는데도 적용이 안되길래 영문으로 바꿔보니 적용이 되서 300개 이상을 다 수작업으로 영문이름으로 바꿔줬어요...
여러분은 헛고생하지 마시구 꼭 처음부터 이미지 폴더랑 이미지명을 넣고 싶으시면 다 영어로 바꿔주시고 작업하시는걸 추천드릴게요
이미지 호스팅을 활용해서, 오픈마켓 공지사항, 배송안내, 상세내용에 이미지를 등록하거나 홈페이지 메인 이미지를 FTP 로 업로드 해서 url을 가져와서 변경하고 싶은데 방법을 잘 모르시는분들이 많은거 같아 설명해 드리려 합니다.
우선, 호스팅 공간에 FTP에 이미지를 등록하시고 URL을 알아내야 합니다.
카페24 자체 FTP 프로그램 사용할때
카페24 호스팅을 이용하시는 분들은 별도의 FTP 프로그램을 PC에 설치하시고 활용하기 매우 번거롭습니다.
카페24는 자체적으로 WEB FTP 를 제공하고 있습니다.
WEB FTP에 접속해서 이미지를 등록하시고, 이미지 파일에 마우스 -> 오른쪽 클릭 하시고 "URL 복사" 관련 메뉴를 선택하시면 됩니다.
파일질러 FTP 프로그램 으로 사용할때
이미지를 업로드 하시고 마우스 오른쪽 버튼을 클릭하시면, "클립보드로 URL 복사" 메뉴가
나옵니다.
선택하신 뒤, 메모장 등에 Ctrl + V 하셔서 붙여넣기 하시면 아래와 같은 글자들이 붙여넣어집니다.
이제부터가 중요합니다.
위에서 업로드한 이미지 링크를 복사했을때 아래와같은 url로 나올거에요
ftp://계정이름@도메인:포트/경로1/경로2/경로3/image/업로드한이미지이름.gif
이대로 사용하면 업로드한 이미지를 절대 화면에 띄울수가 없습니다.
그래서 몇글자를 변환시켜줘야합니다.
//호스팅사제공도메인/image/경로1/경로2/경로3/업로드한이미지이름.gif
이렇게 변경해서 사용해줘야 합니다.
//도메인/ 까지는 고정이고,
업로드 경로/ 이미지이름 주소만 뒤에 붙여주면 됩니다.
예제에서는 image/업로드이미지.gif 가 되겠습니다.
기타방법
기타 호스팅 방법도 FTP 접속 정보를 알고 있거나, WEB FTP 기능을 제공한다면 위 방법들과 다르지 않습니다.
참조 - //ntos.co.kr/bbs/board.php?bo_table=bak_faq&wr_id=13