8) HTML 이미지

이미지(Image)

이미지란 2차원 평면 위에 그려진 시각적 요소를 의미한다.

일반적으로 HTM에서 사용되는 이미지 파일 형식으로는 GIF, JPG, PNG의 세 가지가 있다. 

 

GIF	JPG	PNG
- Graphics Interchange Format - 256개의 색상만 지원 - 투명배경 처리 지원 - 용량이 작음 - 애니메이션 지원 - 로고, 클립아트 형태의 이미지에 적합	- Joint Photographic coding Experts Groups - 트루컬러 지원 - 압축률이 좋아 용량이 작음 - 사진과 같은 이미지에 적합	- Portable Network Graphics - 트루컬러 지원 - 웹 전용 이미지 파일(JPEG 보다 화면상에 표시되는 속다가 빠름) - 클립아트와 같은 적은 색상을 가진 이미지에 적함

---

이미지 삽입

웹 문서에 이미지를 삽입하기 위해서는 태그를 하용하며, 종료태그 없이 시작태그만 사용한다.

<img src="flower.jpg">
<img src="./img/rose.jpg">

이미지를 삽입할 때는 반드시 src 속성을 사용해야 한다. 

src 속성은 HTML 문서에 표시할 이미지 파일의 경로를 명시한다. 

표시할 이미지 파일이 HTML 파일과 동일한 경로에 존재하면 파일 이름만 명시하면 되며, 다른 경로에 있을 경우 상대경로 또는 절대경로를 명시해야 한다.

---

이미지 크기(width, height) 설정

이미지를 불러오면 기본적으로 원본 크기로 화면에 출력된다. 하지만 width와 height 속성을 사용하면 화면에 표시되는 이미지의 가로와 세로 크기를 조절할 수 있다. 

크기는 기본적으로 픽셀 단위와 브라우저 화면의 크기에 대한 상대적인 크기로 나타내는 %단위를 사용할 수 있다. 

 

<img src="flower.jpg" width="100" height="100">
<img src="flower.jpg" width="20%" height="30%">

---

이미지의 대체 텍스트 지정(alt)

alt 속성은 이미지가 화면에 표시되지 않거나 이미지가 깨지는 경우 이미지 대신 텍스트를 출력한다. 

마우스를 이미지 파일 위에 올려놓으면 이미지에 대한 간단한 설명을 볼 수 있다. 

일반적으로 alt 속성을 지정하면 한 줄로 표현되지만, 엔터키에 해당하는 특수 문자 
을 사용하면 여러 줄의 대체 텍스트를 지정할 수 있다.

<img src="flower.jpg" alt="이 사진은 꽃입니다.">