HTML은 사진, 오디오, 비디오 등 다양한 멀티미디어 리소스를 지원합니다

이미지 태그

<img> 태그는 HTML 문서에 이미지를 넣습니다.

<img src="images/apple.jpg" alt="사과">

위의 예제를 통해 <img> 요소의 사용법을 알 수 있습니다.

속성

• src

  필수이며, 이미지로의 경로를 지정합니다.

• alt

  이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 웹 접근성 차원에서 매우 유용합니다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줍니다.

• height

  이미지 높이를 지정하는 속성이며, 값으로 픽셀(px)과 퍼센트(%) 단위로 지정할 수 있으며 픽셀로 설정시에는 숫자만 입력하면 됩니다.

• width

  이미지 너비를 지정하는 속성이며, 값으로 픽셀(px)과 퍼센트(%) 단위로 지정할 수 있으며 픽셀로 설정시에는 숫자만 입력하면 됩니다.

• img 요소 MDN

절대경로 VS 상대경로

절대경로

리소스(이미지)의 절대경로는 말 그대로 절대적인 고유한 경로를 지정하는 것입니다.

• 웹 이미지 절대경로 예) - http://www.naver.com/apple.png http 프로토콜로 시작해서 전체 경로를 입력함
• 웹 이미지 절대경로 예) - /apple.png 루트('/') 디렉토리 부터 시작하는 경우 현재 도메인이 자동으로 앞에 붙음
• PC 컴퓨터 절대경로 예) - C:\user\gymcoding\apple.png

그러나 절대경로를 이용하면 웹 에서 이미지가 사라지거나 내 컴퓨터에서 만든 파일을 다른 곳으로 옮길 때 해당 절대경로를 다시 수정해야 하는 불편함이 있습니다.