본문 바로가기
Publishing/HTML

HTML 이미지

by 오다다의 이상한 코드 odada 2020. 2. 10.

<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

HTML File Paths PathDescription picture.jpg is located in the same folder as the current page picture.jpg is located in the images folder in the current folder picture.jpg is located in the images folder at the root of the current web picture.jpg is locate

www.w3schools.com

 

다른 서버의 이미지

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

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

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

'Publishing > HTML' 카테고리의 다른 글

HTML 테이블  (0) 2020.02.10
HTML 목록  (0) 2020.02.10
HTML 이미지  (0) 2020.02.10
HTML 링크  (0) 2020.02.07
HTML 텍스트 관련 요소  (0) 2020.02.07
HTML 제목  (0) 2020.02.07

댓글0