[HTML5] 이미지 삽입 태그 (img)

웹 페이지에 이미지를 넣는 태그입니다. img 라는 모양의 태그지요.

img 태그는 여는태그와 닫는 태그가 하나로 사용할 수 있기 때문에.

<img /> 이런 형식으로 사용됩니다.

어떤 이미지를 사용 할 것인지, 이미지가 없을 때는 어떤 것을 표시할 것인지 등은 태그의 속성을 통해서 설정합니다.

기본 이미지 삽입

<img src="이미지 주소" />

그냥 기본적으로 이미지를 삽입하는 태그 입니다.
웹 페이지에 있는 사진 링크를 사용하여도 되고, 컴퓨터에 있는 이미지 주소를 적으셔도 됩니다.

다만 컴퓨터에 있는 것을 삽입 하실 때에는 절대 주소보다는 상대 주소로 입력하시는 편이 관리하기도 편하겠지요?

이미지 크기 조절

이미지의 크기를 조절하는 것은 img태그의 속성으로 하는 것보다 스타일을 통해서 하는 것을 권장하고 있습니다.

하지만 속성을 통해서 이미지 크기를 조절하는 것이 사라지지는 않았으니 그냥 임시 방편으로 사용해보도록 하겠습니다. 

height는 높이 관련 속성입니다.
width는 너비 관련 속성입니다.

단위는 여러가지가 있으며, px, em, % 등이 있습니다.
px는 절대적인 픽셀 값을 수치로 주는 것입니다. ex) 100px
em은 이미지 크기의 배수대로 설정합니다.
%는 이미지에서 역시 %크기로 설정합니다.

<img src="이미지 주소" height="100px" width="100px">
이런식으로 설정하면 이미지의 크기를 강제로 100px X 100px 사이즈로 고정해버립니다.

반면 크기를 넣는 곳에 1em이나 100% 이런식으로 기입하게되면 이미지를 기준으로 상대적으로 크기가 변형됩니다.

또한, height만 크기를 설정하게 되면 width는 원본의 비율에 맞게 조정이 됩니다.

기타 속성

alt

<img src="이미지 주소" alt="죄송합니다. 이미지를 불러오지 못하였습니다." />

위와 같은 활용법으로 사용할 수 있다.

이미지 파일을 삭제, 이동 하여서 이미지를 불러올 수 없을 때 대체 텍스트를 지정하는 속성이다..

title

<img src="이미지 주소" title="그냥 이미지다. 더 이상 뭘 바라나?" />

title속성을 사용하게 되면 이미지 위에 마우스 커서를 올리면 툴팁으로 설명해준다.

더 다양한 속성이 있지만, 주로 사용하는 것을 위주로 담아 보았다.

자세한 내용은 W3C School에 가서 배우자! 는 영어

http://www.w3schools.com/tags/tag_img.asp