[기초강좌] HTML Images - w3schools 번역

[기초강좌] HTML Images - w3schools 번역

w3school 의 강좌 내용을 번역한 글입니다.

원문 : http://www.w3schools.com/html/html_images.asp

HTML Images - The <img> Tag and the Src Attribute

HTML 에서 이미지들은 <img> tag 를 이용해서 정의된다.

<img> tag 는 empty tag 이다. 다시 말해 속성들을 가지고 있고, closing tag 가 없다.

이미지를 표시하기 위해서는 src 속성이 필요하다. src 는 "source" 를 의미한다. src 속성에는 표시하고 싶은 image 의 url 을 명시해 준다.

syntax 는 아래와 같다.

<img src="url" alt="some_text">

URL 은 이미지가 저장된 장소를 의미한다. 이름이 "boat.gif" 이면서 "www.w3schools.com" 의 "images" 폴더에 저장된 이미지를 연결하려면 다음 URL 을 연결해주어야 한다. "http://www.w3schools.com/images/boat.gif".

브라우저는 <img> 태그가 있는 곳에 이미지를 표시한다. 만약 2개의 문단 사이에 image tag 를 넣으면 브라우저는 첫번째 문단을 먼저 보여주고 그 다음에 이미지, 그 다음에 두번째 문단을 표시한다.

HTML Images - Set Height and Width of an Image

height 와 width 속성은 이미지의 높이와 너비를 정의할 때 사용된다.

pixel 로 속성값들을 지정한 예는 다음과 같다.

<img src="smiley.gif" alt="Smiley face" width="42" height="42">

Tip : 이미지의 height 와 width 속성을 둘 다 명시해주는 것은 좋은 습관이다. 만약 이 속성들이 정의되면 페이지가 로딩되는 동안 이 이미지를 위한 공간이 미리 예약이 된다. 하지만 만약 이 속성들이 정의되지 않으면 브라우저는 이미지 사이즈를 미리 알기 어렵다. 그래서 나중에 페이지의 레이아웃이 로딩 중간에 변형된다는 단점이 생긴다.

Basic Notes - Userful Tips

주의 : HTML 파일이 10개의 이미지를 가지고 있다면, 페이지를 정상적으로 보여주기 위해서는 11개의 파일이 필요하다. 이미지 로딩에는 시간이 걸리기 때문에 이미지는 신중하게 사용하는 것이 좋다.

주의 : 웹 페이지가 로딩될 때 웹 브라우저가 웹 서버에 해당 이미지를 요청하고 그 이미지를 페이지 중간중간에 삽입한다. 따라서 이미지 링크가 정상적으로 연결되어 있지 않다면 방문자는 "이미지 연결이 불가능하다는 아이콘"( 원문 : broken link icon ) 을 보게 될 것이다. 

HTML Image Tags

Tag	Description
<img>	Defines an image
<map>	Defines an image-map
<area>	Defines a clickable area inside an image-map

다음 강좌 보기 >>

ALT, Area, attribute, broken link icon, closing tag, empty tag, height, HTML Images - Set Height and Width of an Image, HTML Images - The <img> Tag and the Src Attribute, IMAGE, img, map, source, src, syntax, tutorial, url, width, [기초강좌] HTML Images - w3schools 번역, 기초 강좌, 너비, 높이, 로딩, 서버, 속성