반응형
⚫img 태그 : 웹서버에 저장된 이미지 파일을 제공받아 출력하기 위한 태그
=> 웹(Web)에서 사용하는 이미지 파일 : GIF 파일, PNG 파일, JPEG 파일 등
alt 속성 : 출력 이미지에 대한 설명을 속성값으로 설정
src 속성 : 출력될 이미지 파일의 경로(URL 주소)를 속성값으로 설정
=> src 속성값으로 제공된 이미지 파일이 없는 경우 404 상태코드 전달
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>img 태그</h1>
<hr>
<!-- img 태그의 폭을 변경하여 출력될 이미지 크기 변경 가능 -->
<!-- => img 태그의 폭을 변경하면 높이도 자동 변경 -->
<img alt="코알라" src="http://localhost:8000/web/html/Koala.jpg" width="200">
<!-- HTML 문서와 동일한 서버에 존재하는 웹자원(WebContext)은 URL 주소에서 서버 접속 관련
정보를 생략하여 표현 가능 - 프로토콜, 서버명, 포트번호 생략 -->
<!-- 절대경로 표현 방법 : 웹자원의 경로를 서버의 최상위 디렉토리를 기준으로 표현 -->
<img alt="코알라" src="/web/html/Koala.jpg" width="200">
<!-- 상대경로 : 웹자원의 경로를 현재 실행중인 HTML 문서의 경로를 기준으로 표현 -->
<!-- <img alt="코알라" src="./Koala.jpg" width="200"> -->
<!-- => ./ 는 생략 가능 -->
<img alt="코알라" src="Koala.jpg" width="200">
<img alt="펭귄" src="/web/html/images/Penguins.jpg" width="200">
<img alt="펭귄" src="images/Penguins.jpg" width="200">
<img alt="튤립" src="/web/Tulips.jpg" width="200">
<img alt="튤립" src="../Tulips.jpg" width="200">
</body>
</html>
실행결과⬇️
반응형
'Frontend > HTML' 카테고리의 다른 글
| [HTML]06_tbody 태그 & style 태그 & caption 태그 (0) | 2023.12.25 |
|---|---|
| [HTML]05_table 태그 (0) | 2023.12.25 |
| [HTML]04_dl 태그 (0) | 2023.12.24 |
| [HTML]03_ul태그 & ol 태그 & li 태그 (0) | 2023.12.24 |
| [HTML]01_HTML 기초-h1, hr, p, br, pre, div, span, style 태그 & 회피문자 (0) | 2023.12.21 |
