HTML 이미지

<img src="pic_trulli.jpg" alt="Italian Trulli">

 

HTML 이미지 구문

HTML에서 이미지는 <img>태그 로 정의됩니다 .

<img>태그는 속성 만 포함하고, 닫는 태그가없는, 비어 있습니다.

이 src속성은 이미지의 URL (웹 주소)을 지정합니다.

<img src="url">

 

대체 속성

이 alt속성은 사용자가 어떤 이유로 든 이미지를 볼 수없는 경우 (연결 속도 저하, src 속성 오류 또는 사용자가 화면 판독기를 사용하는 경우) 이미지의 대체 텍스트를 제공합니다.

alt속성 값은 이미지를 설명해야합니다.

브라우저가 이미지를 찾을 수 없으면 alt 속성 값이 표시됩니다 .

<img src="img_chania.jpg" alt="Flowers in Chania">

참고 :alt 속성이 필요합니다. 웹 페이지가 없으면 웹 페이지의 유효성이 올바르게 검사되지 않습니다.

 

다른 폴더의 이미지

지정하지 않으면 브라우저는 웹 페이지와 동일한 폴더에서 이미지를 찾을 것으로 예상합니다.

그러나 하위 폴더에 이미지를 저장하는 것이 일반적입니다. 그런 다음 src속성에 폴더 이름을 포함시켜야 합니다.

<img src="picture.jpg" alt="HTML5 Icon">

picture.jpg는 현재 페이지와 동일한 폴더에 있습니다.

<img src="/images/picture.jpg" alt="HTML5 Icon">
<img src="./images/picture.jpg" alt="HTML5 Icon">

picture.jpg는 현재 폴더의 images 폴더에 있습니다.

 

<img src="../images/picture.jpg" alt="HTML5 Icon">

picture.jpg는 현재 폴더에서 한 단계 위의 폴더에 있습니다.

 

<img src="../../images/picture.jpg" alt="HTML5 Icon"">

picture.jpg는 현재 폴더에서 두 단계 위의 폴더에 있습니다.

<img src="/images/picture.jpg" alt="HTML5 Icon"">

 

picture.jpg는 현재 웹 루트의 이미지 폴더에 있습니다.

 

<img src = "picture.jpg">	picture.jpg는 현재 페이지와 동일한 폴더에 있습니다
<img src = "images / picture.jpg">	picture.jpg는 현재 폴더의 이미지 폴더에 있습니다.
<img src = "/ images / picture.jpg">	picture.jpg는 현재 웹 루트의 이미지 폴더에 있습니다.
<img src = "../ picture.jpg">	picture.jpg는 현재 폴더에서 한 단계 위의 폴더에 있습니다.

 

HTML File Paths

https://www.w3schools.com/html/html_filepaths.asp

HTML File Paths

 

다른 서버의 이미지

일부 웹 사이트는 이미지 서버에 이미지를 저장합니다.

실제로 전 세계의 모든 웹 주소에서 이미지에 액세스 할 수 있습니다.

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">