HTML 이미지 태그 <img> 사용 방법
1. HTML 태그와 필수 속성, src, alt
이미지 태그는 HTML 문서의 외관을 꾸미는 용도로 사용하는 태그이다.
<img> 태그는 웹 페이지에 이미지를 삽입하기 위해 사용된다.
그러나 이미는 웹 페이지에 삽입되지 않는다. 이미지는 웹 페이지에 링크될 뿐이다. 링크는 반드시 경로를 수반한다. 그리고 img태그에는 경로(src), 즉 속성 src는 필수 속성이다.
통사론 < img src =" url " alt =" alternatetext " >
위 태그에서 속성 src는 소스(source)의 약자이며 이미지의 위치(경로)를 지정한다.
다시 말하면 이미지의 위치(경로)를 링크하는 것이다.
2. img 태그는 빈 태그이다.
<img> 태그는 속성만 포함한다.
속성만 포함한다는 말은 닫는 태그가 없다는 말이다. 즉 img 태그는 빈 태그(empty element)이다.
<img> 태그에는 또 하나의 필수 속성이 있다. (img 태그는 2개의 필수 속성을 가진다)
3. alt 속성
또 하나의 필수 속성은 alt 속성이다.
이 alt 속성은 대체 텍스트를 지정한다.
3-1) alt의 뜻
alt는 alternative(뜻=대체 가능한, 대안이 되는)의 약자이다.
alternative의 뜻 그대로 '대체 텍스트'로 번역된다.
그 의미는 두 가지다
하나는 전 세계의 시각 장애인을 위해 제시되는 대체 텍스트이고
둘째는 이미지가 손상되거나, 경로 이탈하거나, 유실되었을 경우 텍스트로 설명해주는 역할을 한다. 그러므로 대체 텍스트 속성은 이미지를 안 보고도 그것을 이해할 수 있을 만큼 정확하게 적여야 한다.
3-2) alt 속성을 표시하는 방법
alt 속성을 표시하는 방법은 다음과 같다.
< img src ="img_1.jpg" alt ="Flower in Korea" >
4. 이미지의 크기를 지정하는 2가지 방법
1. style 속성 사용 방법
style 속성을 사용하여 이미지의 크기(너비와 높이)를 지정하는 방법이 있다
< img src ="img_1.jpg" alt ="dog of korea" style ="width:600px;height:400px;" >
2. width 및 height 속성 사용
< img src ="img_1.jpg" alt ="dog of korea" width ="600" height ="400" >
width 및 height 속성에서 단위가 없으면 언제나 픽셀이다.
너비와 높이를 지정하지 않으면 이미지가 로드되면서 페이지가 깜박거릴 수 있다.
위에서 보았듯이 이미지의 크기 속성으로는 width , height 및 style 모두 HTML에서 유효하다.
그러나 가급적 style 속성을 사용하는 것이 좋다.
크기를 지정하는 속성 값이 없으면 이미지는 원래 크기대로 브라우저에 표시된다.
이미지의 크기를 강제로 지정하고 싶다면, 지정이 가능하다.
<img src="1.jpg" witth="600" height="400"
강제로 지정할 경우 가로 세로 비율 무시되고 지정한 가로 세로 사이즈로 표시된다.
가로 세로 비율 유지하겠다면, 가로 크기만 적어주면 된다. 줄일 때도 마찬가지다.
큰 이미지는 로드하는 데 속도가 느려지고 시간이 많이 걸린다.
그러므로 이미지 최적화 후 사용하는 것이 웹페이지에 유리하다.
5. 이미지 태그의 속성들
아래 중에서 width, height, src, alt, id 가 주로 쓰이고 나머지는 잘 안 쓰인다.
| 속성 | 사용값(단위) | 내용 |
| width | 픽셀 | 폭 |
| height | 픽셀 | 높이 |
| src | URL | 경로(위치) |
| alt | 대체 텍스트 | |
| srcset | URL | sizes 속성과 함께 사용 가능함. 반응형 웹, 또는 기타 해상도로 이미지를 표시해야 하는 경우, 해상도별 경로를 표시 |
| id | 문자열 | 이미지 고유 ID 표시 |
| crossorigin | anonymous use-credentials |
타 사이트에서 스크립트로 (canvas) 안에 이미지를 끌어오는 것을 허용할지 여부 지정 |
| ismap | ismap | 이미지가 서버사이드 이미지맵 일부인지 표시 |
| 이하 생략 |
6. 기타 참고사항
1. 다른 폴더의 이미지 소스 표시 방법
< img src ="/images/1.gif" alt ="진도의 개" style ="width:256px;height:256px;" >
2. 다른 웹사이트의 이미지 소스 표시 방법
<img src="https://www~~.com/images/2.jpg" alt="진도의 개">