TIP
해당 이미지 파일은 책과 함께 제공되는 예제 파일에 들어 있습니다(경로: Exercise/2장/2_img/logo.png). 이미지가 별도의 image 폴더 안에 있다면 src 속성의 속성값을 “image/logo.png”로 변경하면 됩니다. 아직 연습 단계이므로 이번 시간에는 폴더 생성을 생략했습니다. 실제로 웹 사이트를 제작할 때는 굉장히 많은 이미지가 사용되므로 폴더를 따로 만들어 이미지 파일을 관리하는 게 좋습니다.
src 속성은 이미지 파일 위치를 입력할 때 사용합니다. 속성값으로는 이미지의 경로, 파일명, 확장자명을 입력합니다.
width와 height 속성은 이미지의 너비와 높이를 임의로 지정할 때 사용합니다. width와 height 속성을 따로 지정하지 않으면 원본 이미지 크기대로 출력됩니다. 보통은 웹 디자이너가 제작한 이미지 크기에 맞춰서 웹 사이트를 제작하므로 width와 height 속성값을 임의로 변경하는 경우는 흔치 않습니다(웹 디자이너가 만든 이미지 크기를 1픽셀이라도 임의로 조정하면 예상치 못한 상황이 발생할 수 있습니다).
alt 속성은 alternative text의 약자로 브라우저가 이미지를 제대로 표시하지 못한 경우에 이미지 대신 텍스트로 대체해서 표시하기 위해 사용합니다. src 속성값, 즉 logo.png를 삭제하고 브라우저를 새로 고침하면 이미지 대신 alt 속성값인 ‘키즈가오 회사 로고’가 표시되는 것을 확인할 수 있습니다.
그림 2-25 이미지의 대체 텍스트인 alt 속성값이 출력됨
또한 스크린 리더 프로그램에 해당 이미지 정보를 텍스트로 전달할 때도 alt 속성을 사용합니다. 즉, 웹 접근성 측면에서 alt는 빠질 수 없는 속성입니다(스크린 리더 프로그램은 텍스트 정보만 시각장애인에게 전달할 수 있습니다).