05. 이미지 관련 태그

✔ 웹 문서에 사진, 그림 같은 이미지를 삽입하는 용도의 태그
✔ img 태그는 inline 형식

[속성]
1) src : 삽입할 이미지의 경로를 지정하는 속성(파일경로, 웹주소)
2) width / height : 이미지의 크기를 지정하는 속성
3) alt : 이미지를 설명하는 속성 -> 이미지가 출력되지 않는 경우 화면에 직접 표시(웹접근성)

1) src 속성 확인

<!-- 
상대경로 : 현재 위치를 기준으로 경로 지정
  .. : 상위 폴더
  / : 아래, 안쪽, 안에
  ./ : 지금 내가 있는 바로 위
-->

<!-- 상대 경로는 내 컴퓨터 또는 하드웨어에 저장된 곳의 주소이므로
파일 이동시 주소값이 바뀌어 이미지 출력 X -->
<img src="./image/sample.jpg">

<!-- 웹 이미지 경로(웹상 절대 경로)를 이용해서 이미지 출력 -->
<img src="https://www.smlounge.co.kr/upload/NPFILE/202112/474021.jpg">

이미지 파일은 현재 내 로칼 피씨에 있는 경로로 저장되기 때문에, 
사용자가 본인의 피씨로 이미지 파일을 선택하면 본인의 피씨에는 해당하는 경로에 파일이 없기 때문에 볼 수가 없다. 
그래서 강제로 url을 만들어 주어 접근이 용이하게 만들어준다
강제 url 생성
window.URL.createObjectURL(변수)

2) width, height 속성을 이용한 크기 조절(고정/가변 크기)

✔ 고정 크기 단위(px) : 화면의 크기와 상관없이 지정된 값의 크기를 갖는 단위
<img src="./image/s1.jpg" width="300px" height="240">
<img src="./image/s2.jpg" width="300px" height="240">

✔ 가변 크기 단위(%) : 화면이나 영역 기준 사이트 크기에 따라 크기가 변경되는 단위
<img src="./image/s3.jpg" width="15%">
<img src="./image/s4.jpg" width="15%">

3) alt 속성 확인

이미지 파일을 출력할 수 없을 때 이미지를 유추할 수 있도록 써놓는 설명
<img src="./image/sample.jpg" alt="영화 마녀 포스터">