사진에 링크를 추가하는 방법

PDF 다운로드
공동 작성자 위키하우 직원

PDF 다운로드

HTML 코드 한줄을 추가하면 클릭했을 때 거의 대부분의 웹사이트로 이동할 수 있는 이미지를 만들 수 있다. 이미지 링크를 추가하려면 이미지의 URL과, 웹사이트의 URL, 이 2가지가 필요하다.

방법 1
방법 1 의 2:

HTML 코드 작성하기

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/da\/769114-1.jpg\/v4-460px-769114-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/da\/769114-1.jpg\/v4-728px-769114-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    텍스트 편집기를 열고, 새로운 파일을 생성한다. index.html로 파일을 저장해보자.
      • 윈도우즈의 메모장이나, Mac OS X의 텍스트에디트처럼 시스템 텍스트 편집기를 포함한 원하는 텍스트 편집기를 사용해도 좋다.
      • HTML 사용에 적합한 텍스트 편집기를 사용하고 싶다면, 여기를 클릭 해서 윈도우즈, 맥 OS X, 리눅스 운영 체제에서 사용할 수 있는 텍스트 편집기인 Atom을 다운로드해보자.
      • HTML파일을 작성하기 전에 텍스트에디트를 사용할 경우, 포맷 메뉴를 클릭하고 일반 텍스트 만들기를 클릭해보자. 이렇게 설정하면 웹 브라우저에서 HTML 파일이 제대로 로딩된다.
      • 마이크로소프트 워드 등의 워드 프로세서는 HTML 파일을 분해할 수 있지만 보이지 않는 글자와 포맷을 추가하기 때문에, 웹 브라우저에서 HTML 파일이 제대로 보이지 않을 수 있으므로 HTML 편집 용도로 적합하지 않다.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/769114-2.jpg\/v4-460px-769114-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/769114-2.jpg\/v4-728px-769114-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    아래에 있는 HTML 코드를 선택하고 복사한 후, 열려 있는 index.html 파일에 붙여넣는다.
     < 
 a 
 href 
 = 
 "DESTINATION URL" 
 >< 
 img 
 src 
 = 
 "IMAGE URL" 
 /></ 
 a 
 >
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/aa\/769114-3.jpg\/v4-460px-769114-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/aa\/769114-3.jpg\/v4-728px-769114-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    인터넷에서 찾은 이미지에 오른쪽 클릭을 한 후, 브라우저에 따라 이미지 URL 복사, 이미지 주소 복사, 혹은 이미지 위치 복사를 클릭한다.
      • 파이어폭스와 인터넷 익스플로러일 경우, 이미지 위치 복사 옵션을 사용하고, 크롬을 사용할 경우, 이미지 URL 복사를 선택한다. 사파리에서는 이미지 주소 복사를 사용하면 된다.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2b\/769114-4.jpg\/v4-460px-769114-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2b\/769114-4.jpg\/v4-728px-769114-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    index.html 파일에서 마우스로 IMAGE URL를 클릭하고 드래그해서 선택한 후, CTRL + V 를 눌러서 이미지 URL을 붙여넣는다.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4e\/769114-5.jpg\/v4-460px-769114-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4e\/769114-5.jpg\/v4-728px-769114-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    파일에서 DESTINATION URL를 삭제하고, https://www.google.com 를 입력한다.
      • 원하는 URL을 사용한다
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/39\/769114-6.jpg\/v4-460px-769114-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/39\/769114-6.jpg\/v4-728px-769114-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cc\/769114-7.jpg\/v4-460px-769114-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cc\/769114-7.jpg\/v4-728px-769114-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    index.html 파일에 오른쪽 클릭을 한 후, 원하는 웹 브라우저로 열어보자.
      • 브라우저가 열렸을 때 이미지가 보이지 않으면, 파일 이름이 index.html 텍스트 편집기 창에 제대로 기입되어 있는지 확인한다.
      • 브라우저가 열렸을 때 배경 이미지 대신 HTML 코드가 보인다면, index.html 파일이 리치 텍스트 문서로 저장되었음을 의미한다. 이런 경우 HTML 파일을 다른 텍스트 편집기로 편집해보자.
    광고
방법 2
방법 2 의 2:

HTML 코드를 이해하기

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f7\/769114-8.jpg\/v4-460px-769114-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f7\/769114-8.jpg\/v4-728px-769114-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML 코드는 열림 태그와 닫힘 태그로 구성된다. <a href=""> 태그는 열림 태그이며, </a>는 닫힘 태그이다. 이런 형식을 앵커 태그라고 하며, 웹 페이지에 링크를 추가할 때 사용된다. [1]
    • <a 는 브라우저가 링크를 처리하도록 도와둔다. href 는 HTML 참조의 단축형이며, = 는 브라우저가 " " 사이의 모든 항목들을 링크로 만들도록 만든다. 두 따옴표 기호 사이에 어떤 URL을 입력해도 무방하다.
    • </a> 는 브라우저에게 앵커 태그가 닫혔음을 알려준다.
    • <a href=""> 와 </a> 사이에 텍스트를 추가하면, 웹 페이지에서 이 텍스트를 클릭할 수 있다. 예를 들어, <a href="https://www.google.com">Google</a> 를 입력하면 구글 링크를 생성할 수 있다.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2f\/769114-9.jpg\/v4-460px-769114-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2f\/769114-9.jpg\/v4-728px-769114-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    <img> 태그는 스스로 닫힘 역할을 하는 태그이다. <img src="" /> 혹은 <img src=""></img>로 태그를 닫을 수 있다. [2]
    • The <img 태그는 브라우저가 이미지를 처리하도록 명령한다. src 는 소스의 단축형이며, = 을 사용하면 브라우저가 " " 사이의 모든 항목을 읽고, 해당 위치에서 이미지를 가지고 오도록 명령한다.
    • The /> 는 브라우저가 이미지 태그를 닫도록 명령한다.
    • 예를 들어, {{samp[|<img src="https://www.google.com/images/srpr/logo11w.png" />}}를 입력하면, URL의 이미지를 웹 브라우저에 불러올 수 있다.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/47\/769114-10.jpg\/v4-460px-769114-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/47\/769114-10.jpg\/v4-728px-769114-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    이제 코드를 이해했으니, <a href="DESTINATION URL"><img src="IMAGE URL" /></a> 를 사용해서 HTML 코드를 처리하는 웹페이지에 클릭할 수 있는 이미지를 추가해보자.
    광고

관련 위키하우

일러스트레이터에서 이미지 자르는 법
윈도우즈에서 명령 프롬프트를 여는 방법
와이파이 라우터에서 인터넷 사용 기록 확인하기
폴더에서 사진을 볼 수 있도록 이미지 미리 보기 기능을 활성화하는 방법(윈도우즈 10)
마이크로 SD 카드를 포맷하는 방법
무료로 이메일 주소를 만드는 방법
네트워크 드라이브를 설정하는 방법
엑셀에서 꺾은선 그래프 만드는 법
윈도우즈 작업 관리자에서 작업 우선순위를 변경하는 방법
USB 드라이브에서 컴퓨터로 데이터를 옮기는 방법
어도비 일러스트레이터 사용하는 법
baby G 시계에 시간 설정하는 방법
광고

출처

  1. ↑ http://www.w3schools.com/html/html_links.asp
  2. ↑ http://www.w3schools.com/html/html_images.asp

이 위키하우에 대하여

다른 언어
이 문서는 15,585 번 조회 되었습니다.

이 글이 도움이 되었나요?

광고