이미지를 나타내주는 태그 단독 태그 글자와 같이 나열되는 성격, 이미지 단락을 구분을 지을 때
<img src="이미지 파일의 경로 또는 url" alt="대체문자">
alt : 주석문, 이미지가 안보일 때를 대비한 대체문자, html5 기본 규칙!
이미지의 확장자(대표)
gif > 투명한 배경이 가능한 색상이 256개의 표현만 가능 화질이 떨어져 보임 / 움짤, 움;직이는 이미지
jpg > 가장 대표적인 이미지 표현방식, 이미지의 색상을 가장 잘 표현할 수 있는 확장자
png > 이미지의 색상을 유지하며 투명한 배경을 나타낼 수 있는 확장자
경로 > 폴더 안 > *작성하는 문서의 기점으로부터
. -> 현재 폴더
.. -> 상위폴더
/ -> 폴더의 구분
상대경로 : 현재파일 기준 : '.' , '..' , 파일명 으로 시작
절대경로 : 서버기준 : '/' 로 시작
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 태그</title>
</head>
<body>
<!-- 경로에 맞게 불러온 이미지 -->
<img src="./camera01.png" alt="카메라1"><br>
<img src="camera01.png" alt="카메라1"><br> <!-- ./ 는 생략 가능 -->
<!-- 경로에 맞지 않게 불러온 이미지 -->
<img src="/section_04/img/camera02.png" alt="카메라2"><br>
<!-- 넓이 옵션을 적용한 이미지 -->
<img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/02/[9200000002407]_20210225095106743.jpg" alt="카메라3" width="600"><br>
<figure>
<img src="img/camera01.png" alt="카메라1">
<!-- figure요소에 캡션을 넣을 때 사용하는 태그로 figure안에서 사용, 제일 처음이나 마지막에 배치 -->
<figcaption>카메라를 올바르게 촬영하는 방법</figcaption>
</figure>
</body>
</html>