티스토리 뷰
이미지를 삽입하는 <img> 태그
▷ 종료태그 없이 사용
▷ 속성
＊src="이미지파일" → 문서에 표시할 이미지 파일을 지정
＊width="숫자" → 이미지의 폭 지정(픽셀, %)
＊height="숫자" → 이미지의 높이 지정(픽셀, %)
＊alt="내용" → 이미지가 표시되지 않을 때 대체될 텍스트 지정
＊usemap="#맵이름" → 클라이언트 측의 이미지맵을 지정
<img> src 속성
▷ HTML 문서에 표시할 이미지 파일의 이름/경로를 지정
＊필수 속성
▷ 일반적인 이미지 파일 형식
GIF Graphics Interchange Format | JPG Joint Photographic coding Experts Groups | PNG Portable Network Graphics |
256색상 지원 투명 배경 처리 용량이 작음 로고나 클립아트 형태의 이미지에 적합 | 트루컬러 지원 좋은 압축률 → 용량이 작음 사진 이미지에 적합 | 트루컬러 지원 투명 배경 처리 웹 전용 이미지 파일 (빠른 화면 표시 속도) 클립아트와 같이 적은 색상을 가진 이미지에 적합 |
<img> width, height, alt 속성
▷ width/height → 이미지의 크기(폭, 높이)를 지정
＊ 기본 출력 크기 = 이미지의 원래 크기
＊ 속성값 → 픽셀, % (브라우저 화면 크기에 대한 상대적인 크기)
＊ 폭/높이 중에서 하나의 크기만 지정되면 나머지 하나는 원본 크기에 비례해서 자동으로 지정
▷ alt → 이미지에 대한 대체 텍스트를 지정
＊ 이미지가 화면에 표시되지 않거나 이미지가 깨지는 경우를 위해 사용
