이미지 태그는 이미지를 올리기 위해 사용한다.
문법
<img src="이미지가 위치하는 url" alt="대체텍스트" width="폭" height="높이" longdesc="링크"/>
- src : 이미지가 위치하는 url
- alt : alternative의 약자로 한국어로는 대체 텍스트라 부름. 이미지가 로딩되기 전이나, 이미지를 로딩할 수 없는 경우 이미지의 위치에 텍스트가 표시. 시각장애인을 위한 장치와 검색 엔진에서도 사용.
- width, height : 이미지의 크기
- longdesc : 이미지와 관련된 링크
예제
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
이미지 로딩 : <br /><img src="https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /><br /><br /><br />
대체 텍스트 사용 : <br /><img src="https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="구글 로고" /><br /><br /><br />
대체 텍스트 사용, 존재하지 않는 이미지 로딩 : <br /><img src="https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92d.png" alt="구글 로고" /><br /><br /><br />
이미지의 크기 지정 : <br /><img src="https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="50" /><br /><br /><br />
</body>
</html>
예제 설명
예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.
첫번째 이미지의 경우 일반적으로 이미지 태그를 사용하여 이미지를 로딩하는 방법이다.
두번째 이미지는 대체 텍스트를 사용한다. 대체 텍스트는 이미지의 url이 안맞거나 url에 이미지가 없을 경우 사용하는데 이번에는 이미지가 있는 url을 사용했기 때문에 이미지가 로딩된다.
세번째 이미지는 구글 로고 이미지가 아닌 대체 텍스트가 사용되었다. 왜냐하면 이미지를 로딩하는 url에 이미지가 없기 때문이다. 이미지가 없으므로 대체 텍스트인 구글 로고라는 텍스트가 로딩되었다.
마지막 이미지는 이미지의 길이를 50으로 줄여서 로딩한 것이다. 이미지의 길이만 설정하였기 때문에 높이는 자동적으로 비율이 맞춰져서 로딩되었다.
'Programming > HTML' 카테고리의 다른 글
| iframe, frame (0) | 2017.12.11 |
|---|---|
| 목록 (0) | 2017.12.11 |
| 문단, 줄바꿈, 띄어쓰기, 링크 (0) | 2017.12.07 |
| 태그(tag) (0) | 2017.12.07 |
| HTML이란? (0) | 2017.12.07 |
꼴통보안인