HTML로 이미지 삽입하는 법

웹사이트나 SNS 프로필에 이미지를 넣는 것은 인터넷 상에 존재하는 당신만의 공간을 산뜻하게 만들 수 있는 방법이다. 실제로 HTML 코드를 사용해 이미지를 삽입하는 것은 상당히 간단하다. HTML을 배우는 과정에서도 맨 처음 부분에서 다루는 것 중 하나가 바로 이미지 삽입이다.

파트 1

파트 1 의 2:

이미지 삽입하기

PDF 다운로드

1
이미지 업로드하기. 인터넷에는 피카사, 플리커, 포토버켓, 이머저와 같은 여러 다양한 무료 이미지 호스팅 사이트가 존재한다. 이런 서비스를 사용할 때는 사용 조건과 동의서 등을 자세히 살펴보는 것도 잊지 말자. 일부 서비스에서는 이미지의 질을 낮춰서 업로드시키거나 너무 많은 사람들이 접속했을 때 이미지 주소를 차단시킨다(결국 호스팅 사이트의 트래픽을 이용하는 것이므로).
- 일부 블로그 호스팅 사이트에서 블로그 관리 툴을 사용할 때 이미지를 업로드할 수 있게 허용하기도 한다.
- 유료 웹 호스팅 서비스를 사용하고 있다면 FTP를 사용해 자신의 사이트에 이미지를 업로드할 수 있다. 이렇게 업로드를 할 때는 "images" 폴더를 만들어 파일을 정리해두는 것이 좋다.^{[1]X출처 검색하기}
- 다른 웹사이트에서 이미지를 사용하는 것을 원한다면 먼저 이미지 제작자에게 허가를 받아야 한다. 이미지를 다운받아 사용해도 좋다는 허가를 받은 뒤에 다른 이미지 호스팅 사이트에 이미지를 올려 사용하도록 하자.
2
HTML 파일 열기. 웹사이트에서 이미지를 표기할 HTML 문서를 열도록 하자.
- 게시판에 이미지를 올리려고 한다면 직접 게시판 글에 붙여넣어도 된다. 하지만 대부분의 게시판에서는 HTML 대신 직접 만든 시스템을 사용하므로 HTML을 수정하는 방법이 통하지 않는다면 다른 게시판 이용자들에게 도움을 청하도록 한다.
3
img 태그로 시작하기. HTML의 몸통(body) 부분을 찾아 이미지를 넣고 싶은 곳에 커서를 두고 <img> 태그를 써넣도록 하자. 이 태그는 따로 태그를 따로 닫지 않아도 된다. 이미지를 사용하는 모든 태그가 닫는 태그를 필요로 하지 않는다.
- <img>
4
이미지 URL 찾기. 이미지가 호스팅된 웹페이지에 가서 이미지에 오른쪽 마우스 클릭을 한 뒤(맥에서는 컨트롤 클릭) 이미지 복사를 선택하도록 한다. "이미지 보기"를 선택해 이미지만 따로 페이지에 띄워놓고 그 페이지의 주소창의 URL을 복사해 사용해도 된다.
- 당신의 웹사이트의 이미지 경로에 이미지를 업로드해놨다면 "https://ko.wikihow.com/images/파일이름"과 같은 방식으로 이미지 URL을 쓰도록 한다. 이 방법이 통하지 않는다면 이미지가 다른 폴더(경로) 안에 있을 가능성이 높다. 그 이미지를 루트 경로로 옮겨놓도록 하자.
5
src 속성에 URL 적어넣기. 이미 알 수도 있겠지만 HTML 속성은 태그 안에 들어가 태그 내용을 바꾼다. src 속성은 "소스(source)"의 줄임말이며 웹 브라우저에게 이미지를 어디에서 찾을 수 있는지 알려주는 역할을 맡고 있다. src="이미지 URL"과 같이 속성을 쓰도록 하자. 큰따옴표도 잊지 말아야 한다. 아래 예시를 살펴보자.
- <img src="http://www.exampleimagehost.com/my-cute-dog.jpg">
6
alt 속성 더하기. 이제 HTML에 이미지를 표기하기 위한 모든 준비가 끝났다 하지만 여기에 추가로 alt 속성을 더해주는 것이 좋다. 이 alt 속성에 넣어놓은 문자는 브라우저에서 이미지의 로딩이 실패했을 때 대신 표시되게 된다. 게다가 이 alt 속성이 있어야 브라우저가 시각 장애인이 방문했을 때 이미지를 설명해줄 수 있다.^{[2]X출처 검색하기} 아래 예시를 참고해 큰따옴표 사이의 내용을 바꿔보도록 하자.
- <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="How.com.vn 한국어: my dog eating a tangerine(영어로 쓰는 것이 좋다)">
- 웹페이지의 내용에 이미지가 크게 중요하지 않다면 alt 속성에 아무것도 넣지 않으면 된다(alt="How.com.vn 한국어: ").^{[3]X출처 검색하기}
HTML 파일을 웹사이트에 저장하도록 한다. 그리고 수정한 페이지를 방문해보자. 이미 페이지를 열어놨다면 새로고침을 해보자. 이제 이미지가 보일 것이다. 만약 이미지의 사이즈가 잘못되었거나 무언가 마음에 들지 않아 미세한 조정을 하고 싶다면 아래를 읽어보도록 한다.
광고

파트 2

파트 2 의 2:

추가적인 수정하기

PDF 다운로드

1
이미지 크기 조정하기. 무료 편집 소프트웨어를 사용해 이미지 크기를 조정하면 쉽겠지만 HTML로 width와 height 값을 바꾸면 브라우저에게 이미지의 크기를 늘리거나 줄이도록 명령을 내릴 수 있다. 다만 (드물게) 브라우저 호환이 안 돼 에러가 발생할 수 있다.^{[4]X출처 검색하기} 만약 빠르게 이미지 크기를 조정하고 싶다면 아래의 포맷을 참고하도록 한다:
- <img src="http://example.com/example.png" alt="How.com.vn 한국어: display this" width=200 height=200> (픽셀 수, 또는 HTML5에서 사용하는 모바일 친화적인 "CSS 픽셀"을 의미한다)^{[5]X출처 검색하기}^{[6]X출처 검색하기}
- 아니면 <img src="http://example.com/example.png" width=100% height=10%> (웹페이지 크기의 퍼센트 또는 이미지를 포함하고 있는 HTML 엘리먼트 크기의 퍼센트를 의미한다)
- 속성을 하나만 입력하면(width 또는 height), 브라우저가 알아서 가로 세로 비율을 조정한다.
2
툴팁 넣기. title 속성을 더하면 이미지에 대한 추가적인 정보를 넣을 수 있다. 예를 들어 아티스트 정보를 넣어볼 수 있다. 대부분의 경우 이미지에 마우스 커서를 올렸을 때 이 정보가 툴팁으로 커서 위에 뜨게 된다.
- <img src="http://example.com/example.png" title="Photograph by J. Godfrey">
3
링크로 만들기. 이미지이면서 동시에 링크가 되게 할 수도 있다. 이렇게 하려면 이미지를 <a></a>, 즉, 하이퍼링크 태그 안에 넣어야 한다. 아래 예시를 살펴보자.
- <a href="http://www.urloflink.com"><img src="http://urlofimage.com/image.gif"></a>
광고

팁

만약을 대비해 이미지의 백업을 컴퓨터에 저장해놓자.
로고나 만화에는 GIF 이미지가 좋다. JEPG 이미지는 사진과 같은 복잡한 고화질 이미지에 효과적으로 사용할 수 있다.
URL에 파일 확장자(.jpg, .gif 등)를 포함시키도록 하자.
대부분의 경우에는 이미지의 확장자를 그대로 유지하는 것이 좋다(.gif, .jpeg, .jpg, .png).^{[7]X출처 검색하기} 위의 확장자가 아닌 경우 모든 브라우저에서 제대로 이미지가 나타나지 않을 수도 있다.

경고

다른 사람의 웹사이트의 URL을 직접 삽입하지 않도록 하라. 이는 다른 사람의 트래픽을 무단으로 방문자를 제공하지도 않고 사용하는 것이기 때문에 매너가 아니다. 게다가 링크된 사이트가 다운되거나 문을 닫으면 자동으로 이미지도 사라진다. 특히 웹사이트 주인이 당신이 트래픽을 무단으로 이용한다는 사실을 확인하게 되면 사이트에 뜨는 이미지를 다른 것으로 바꿀 수도 있다.^{[8]X출처 검색하기}