HTML에서 이미지 삽입을 위한 태그는 img 태그다.
그런데 이미지 태그는 단독으로 쓰이면 아무 소용이 없기에 부수적으로 따라오는 속성들이 있어야 한다.
어떤 이미지를 삽입할 건지 알려주는 src라는 속성이 당연히 있어야 하겠고 이미지의 사이즈를 조절하기 위한 width, height 속성이 필요할 수도 있다.
또는 이미지 링크가 깨졌을 경우 깨진 이미지 대신 텍스트로 대체하기 위한 alt 속성, 이미지 위에 마우스를 올려 놓았을 때 이미지에 대한 설명을 툴팁(말풍선) 형태로 보여주는 title 속성 등이 있다.
지금부터 하나씩 정리해 보겠다.
- src 속성
src는 source의 축약어로 이미지 파일의 위치를 정하는 속성이다. 위 코드는 로컬(local) 상에서 테스트 하는 코드이므로 html파일과 이미지파일(hope.jpg)이 같은 폴더에 있기 때문에 단순히 이미지 파일명만 넣어 놨지만 일반적으로 웹에서는 위 이미지 파일의 경로가 src = "http://your.server.com/img/hope.jpg" 등과 같은 형태가 될 것이다. 결과는 다음과 같다.
이미지의 크기가 너무 크다. 적절하게 사이즈를 조절하는 방법을 알아보겠다.
- width, height 속성
아무튼 위 이미지의 크기를 적절하게 줄여보도록 하겠다.
결과는 다음과 같다.
이미지의 사이즈가 변경되었다. 하지만 이렇게 width, height 속성으로 이미지의 사이지를 변경한다고 해서 해당 이미지의 파일의 용량이 줄어드는 것은 아니므로 애초에 적절한 크기의 이미지를 사용할 필요가 있다.
참고로 위 코드는 픽셀값으로 이미지의 사이즈로 변경했지만 %(퍼센트)로 브라우저 창에서 이미지가 차지하는 비율로 나타낼 수도 있다.
- alt 속성
이 속성은 대체텍스트라고 생각하면 된다.
인터넷에서 오래된 페이지에서 흔하게 볼 수 있는 화면이다. img 태그의 src의 위치에 이미지가 없어서 나타나는 화면이다. 이렇게 링크가 깨진 경우 이미지에 대한 정보를 알 수가 없다. 이 때 대체텍스트를 사용해서 이미지 대신 이미지를 설명하는 텍스트가 들어가도록 할 수 있다.
물론 src에 지정된 주소가 정확하지 않은 경우에만 대체 텍스트가 표시된다.
- title 속성
툴팁(tooltip), 다시말해 말풍선을 표시해주는 속성이다. title 속성에는 이미지 위에 마우스 포인터를 갖다 대면 표시될 텍스트를 지정할 수 있다.
다음은 위 코드의 결과다.
마우스를 갖다 대면 위와 같이 말풍선이 나타난다.
추가적으로 img 태그는 닫는 태그가 없다는 점도 기억해 두자. div 태그와 a 태그 등은 적용되는 내용이 태그 밖에 위치하기 때문에 닫는 태그가 있지만 img 태그는 태그 안에서 src 속성으로 내용(이미지)이 지정되기 때문이다.
좀더 나아가 이미지 맵을 통해서 링크를 거는 방법도 있는데 이건 다음에 정리해야겠다.