[SIST] Web_HTML_days03_<img>태그

<img> 태그

1. 닫기 태그가 필요 없음

2. alt와 src 속성이 필수

- alt 속성 : 경로가 잘못되거나 이미지가 없으면 대체할 문자열

- src 속성 : 이미지 경로

3. 이미지는 인라인모드이다.

4. width, height 속성

- width : 이미지 너비

- height : 이미지 높이

- 하나만 설정할 시 그 비율을 유지하기 위해 자동으로 너비 또는 높이가 설정되어진다.

- 속성 값은 %와 px로 지정, 기본값은 px

- html에서 단위 생략 : px

5. 이미지 로딩되는 동안 웹페이지가 깜박일 수 있다. 반드시 이미지의 너비, 높이는 지정을 하자.

why? 웹페이지에서 이미지 로딩할 때 속도 저하 발생, 이미지 너비, 높이를 지정하여 속도를 높이거나 작은 크기의 이미지로 설정한 뒤 로딩이 다 되면 다시 바꾸는 기술 적용

 

6. html 파일을 서버에서 가져와서 각 태그를 알맞게 파싱을 하고..
img 태그는 이미지 주소(src)를 가지고 서버에 가서 이미지 데이터를 가져옴(서버에 다시 요청이 일어남)
이미지를 다운로드 받는 것이 아니다. 서버에서 가지고 오는 것이다.(메모리에 로딩시켜서 가지고 오는 것)

 

7. 모든 브라우저에서 지원하는 일반적인 이미지 파일 형식
  1. gif
  2. png
  3. ico, cur
  4. apng
  5. jpeg, jpg, pjp 등등
  6. svg

---

<코드>

---