FrontEnd/Html
2.Image Tag
jmaster
2021. 12. 18. 17:01
Image Tag(이미지 태그)
- img 태그 : 이미지 출력
- => 이미지 파일 : GIF 파일, PNG 파일, JPEG 파일(JPG) 등
- alt 속성 : 출력 이미지에 대한 설명을 속성값으로 설정 - 음성 지원
- src 속성 : 인터넷에 존재하는 이미지 파일에 대한 URL 주소를 속성값으로 설정
- => URL 주소에 해당 이미지 파일이 없는 경우 404 상태코드(Not Found) 발생
- DOCTYPE : 문서 형식(필수) - HTML5를 사용하여 문서 표현
<img alt="다음로그" src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png">
- 출력 이미지의 폭을 변경하면 높이는 자동 변경
<img alt="코알라" src="http://localhost:8000/web/html/images/Koala.jpg" width="200">
- 리소스 파일이 HTML 문서와 같은 서버에 존재하면 프로토콜,서버명,포트를 생략하여 표현
- 절대경로 표현방법 : 서버의 최상위 디렉토리(Root Directory : /)를 기준으로 리소스 경로를 표현하는 방법
<img alt="코알라" src="/web/html/images/Koala.jpg" width="200">
- 상대경로 표현방법 : 현재 요청문서의 위치를 기준으로 리소스 경로를 표현하는 방법
<img alt="코알라" src="./images/Koala.jpg" width="200">
<img alt="코알라" src="images/Koala.jpg" width="200">
- 전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>img 태그</h1>
<hr>
<!-- img 태그 : 이미지 출력 -->
<!-- => 이미지 파일 : GIF 파일, PNG 파일, JPEG 파일(JPG) 등 -->
<!-- alt 속성 : 출력 이미지에 대한 설명을 속성값으로 설정 - 음성 지원 -->
<!-- src 속성 : 인터넷에 존재하는 이미지 파일에 대한 URL 주소를 속성값으로 설정 -->
<!-- => URL 주소에 해당 이미지 파일이 없는 경우 404 상태코드(Not Found) 발생 -->
<img alt="다음로그" src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png">
<hr>
<!-- 출력 이미지의 폭을 변경하면 높이는 자동 변경 -->
<img alt="코알라" src="http://localhost:8000/web/html/images/Koala.jpg" width="200">
<!-- 리소스 파일이 HTML 문서와 같은 서버에 존재하면 프로토콜,서버명,포트를 생략하여 표현 -->
<!-- 절대경로 표현방법 : 서버의 최상위 디렉토리(Root Directory : /)를 기준으로 리소스 경로를 표현하는 방법 -->
<img alt="코알라" src="/web/html/images/Koala.jpg" width="200">
<!-- 상대경로 표현방법 : 현재 요청문서의 위치를 기준으로 리소스 경로를 표현하는 방법 -->
<!-- <img alt="코알라" src="./images/Koala.jpg" width="200"> -->
<img alt="코알라" src="images/Koala.jpg" width="200">
<hr>
<img alt="펭귄" src="/web/html/Penguins.jpg" width="200">
<img alt="펭귄" src="Penguins.jpg" width="200">
<hr>
<img alt="튤립" src="/web/Tulips.jpg" width="200">
<img alt="튤립" src="../Tulips.jpg" width="200">
</body>
</html>
- 출력
