HTML 이미지 삽입 방법과 속성 정리(img 태그)

HTML에서 이미지 삽입을 위한 태그는 img 태그다.

그런데 이미지 태그는 단독으로 쓰이면 아무 소용이 없기에 부수적으로 따라오는 속성들이 있어야 한다.

어떤 이미지를 삽입할 건지 알려주는 src라는 속성이 당연히 있어야 하겠고 이미지의 사이즈를 조절하기 위한 width, height 속성이 필요할 수도 있다.

또는 이미지 링크가 깨졌을 경우 깨진 이미지 대신 텍스트로 대체하기 위한 alt 속성, 이미지 위에 마우스를 올려 놓았을 때 이미지에 대한 설명을 툴팁(말풍선) 형태로 보여주는 title 속성 등이 있다.

지금부터 하나씩 정리해 보겠다.

  • src 속성
<img src="hope.jpg">

src는 source의 축약어로 이미지 파일의 위치를 정하는 속성이다. 위 코드는 로컬(local) 상에서 테스트 하는 코드이므로 html파일과 이미지파일(hope.jpg)이 같은 폴더에 있기 때문에 단순히 이미지 파일명만 넣어 놨지만 일반적으로 웹에서는 위 이미지 파일의 경로가 src = "http://your.server.com/img/hope.jpg" 등과 같은 형태가 될 것이다. 결과는 다음과 같다.

이미지의 크기가 너무 크다. 적절하게 사이즈를 조절하는 방법을 알아보겠다.

  • width, height 속성
너비와 높이를 정하는 이 두 속성은 이미 익숙한 속성으로 앞서 배운 display 속성의 값이 block인 태그들이 가질 수 있는 속성이다. 따라서 img 태그는 display 속성이 block이다. img 태그를 사용하는데 display 속성에 대한 내용을 몰라도 상관은 없지만 중요한 내용이므로 앞으로 돌아가서 display에 대한 내용을 참고하도록 하자.

아무튼 위 이미지의 크기를 적절하게 줄여보도록 하겠다.

<img src="hope.jpg" width="350" height="280">

결과는 다음과 같다.

이미지의 사이즈가 변경되었다. 하지만 이렇게  width, height 속성으로 이미지의 사이지를 변경한다고 해서 해당 이미지의 파일의 용량이 줄어드는 것은 아니므로 애초에 적절한 크기의 이미지를 사용할 필요가 있다.

참고로 위 코드는 픽셀값으로 이미지의 사이즈로 변경했지만 %(퍼센트)로 브라우저 창에서 이미지가 차지하는 비율로 나타낼 수도 있다. 

<img src="hope.jpg" width="30%" height="30%">
이 경우 이미지의 크기가 브라우저에 상대적이므로 브라우저 창을 줄이면 이미지가 줄어들고 창을 늘리면 이미지의 크기가 커지게 된다.
  • alt 속성

이 속성은 대체텍스트라고 생각하면 된다.

<img src="hope-1.jpg" width="350" height="280">
위와같이 src 속성값을 변경해서 적절한 이미지를 찾지 못하는 상황을 만들어 보자.

인터넷에서 오래된 페이지에서 흔하게 볼 수 있는 화면이다. img 태그의 src의 위치에 이미지가 없어서 나타나는 화면이다. 이렇게 링크가 깨진 경우 이미지에 대한 정보를 알 수가 없다. 이 때 대체텍스트를 사용해서 이미지 대신 이미지를 설명하는 텍스트가 들어가도록 할 수 있다.

<img src="hope-1.jpg" width="350" height="280" alt="희망표지판">

물론 src에 지정된 주소가 정확하지 않은 경우에만 대체 텍스트가 표시된다.

  • title 속성

툴팁(tooltip), 다시말해 말풍선을 표시해주는 속성이다. title 속성에는 이미지 위에 마우스 포인터를 갖다 대면 표시될 텍스트를 지정할 수 있다.

<img src="hope-1.jpg" width="350" height="280" alt="희망표지판" title="희망!">

다음은 위 코드의 결과다.

마우스를 갖다 대면 위와 같이 말풍선이 나타난다.

추가적으로 img 태그는 닫는 태그가 없다는 점도 기억해 두자. div 태그와 a 태그 등은 적용되는 내용이 태그 밖에 위치하기 때문에 닫는 태그가 있지만 img 태그는 태그 안에서 src 속성으로 내용(이미지)이 지정되기 때문이다.

좀더 나아가 이미지 맵을 통해서 링크를 거는 방법도 있는데 이건 다음에 정리해야겠다.


이 댓글을 비밀 댓글로