03-1. HTML 이미지 삽입

01. 이미지 삽입

<img> 태그

- 종료태그 없이 사용

 

속성

- src=“이미지파일” → 문서에 표시할 이미지 파일을 지정

- width=“숫자” → 이미지의 폭 지정 (픽셀, %)

- height=“숫자” → 이미지의 높이 지정 (픽셀, %)

- alt=“내용” → 이미지가 표시되지 않을 때 대체될 텍스트 지정

- usemap=“#맵이름” → 클라이언트 측의 이미지맵 지정

 

 

<img> src 속성

HTML 문서에 표시할 이미지 파일의 파일의 이름/경로 지정

- 필수 속성

 

일반적인 이미지 파일 형식

GIF : Graphics Interchange Format

- 256색상 지원

- 투명 배경 처리

- 용량이 작음

- 로고나 클립아트 형태의 이미지에 적합

 

JPG : Joint Photographic coding Experts Groups

- 트루컬러 지원

- 좋은 압축률 → 용량이 작음

- 사진 이미지에 적합

 

PNG : Portable Network Graphics

- 트루 컬러 지원

- 투명 배경 처리

- 웹 전용 이미지 파일 (빠른 화면 표시 속도)

- 클립아트와 같이 적은 색상을 가진 이미지에 적합

 

 

width, height → 이미지의 크기(폭,높이) 지정

- 기본 출력 크기 → 이미지의 원본 크기

- 속성값 →픽셀, % (브라우저 화면 크기에 대한 상대적 크기)

- 폭과 높이 중에서 하나의 크기만 지정되면 → 나머지 하나의 값은 원본 크기에 비례해서 자동으로 지정

 

alt → 이미지에 대한 대체 텍스트를 지정

- 이미지가 화면에 표시되지 않거나 이미지가 깨지는 경우를 위해 사용

 

각 줄 화살표에 결과 표시