1. <img> 태그
- img => image
- 이미지를 표시할 때 사용되는 태그로 단일 태그이다.
- 필수적으로 있어야하는 속성은 이미지의 url을 담는 src 속성이 있고
그 외에 이미지가 나오지 않을 때 대체 텍스트를 출력하는 alt 속성
출력되는 이미지의 크기를 살정하는 width, height 속성 등을 사용한다.
* 여기서 다루지 않은 나머지 속성들에 대해서는 아래 링크를 통해서 확인하면 된다.
mdn html img 요소
<!-- <img> -->
<img src="image file url"/>① src 속성
- src => Source, (자료의)출처
- 표시할 이미지 파일의 url과 파일 명을 입력받는 속성, 여기서 들어갈 수 있는 값은
내 컴퓨터에 저장된 이미지의 url이나, 아니면 서버에 저장된 이미지의 url이 들어간다.
- <img>의 필수 사항
② alt 속성
- alt => Alternative, 대안
- 이미지가 로딩되기 전, 로딩에 실패했을 때처럼
이미지를 표시할 수 없을 때 대신 출력되는 대체 텍스트를 입력받는 속성
(주로 이미지에 대한 설명을 첨부한다.)
2. <img> 태그 예제
[예제 소스코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>img 태그 예제</title>
</head>
<body>
<h3>내 컴퓨터에 저장된 이미지 출력</h3>
<img src="C:\yhb\works\Visual Studio Code\photo\photo5.jpg"
width="300" height="300"
alt="작년 여름 경의선 책거리 전경을 촬영한 사진"
title="작년 여름 경의선 책거리 전경을 촬영한 사진"
<br/>
<br/>
<hr/>
<br/>
<h3>서버에 저장된 이미지 출력</h3>
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKjbSx%2FbtrN4jZFb81%2FpdM3BREvnTT0cQ470Oj8PK%2Fimg.jpg"
width="300" height="300"
alt="작년 가을, 낙산공원에서 찍은 서울의 야경"
title="작년 가을, 낙산공원에서 찍은 서울의 야경"
/>
</body>
</html>[출력 결과]
img 태그 예제 내 컴퓨터에 저장된 이미지 출력
서버에 저장된 이미지 출력
첫번째 사진은 필자의 컴퓨터의 저장된 사진을 src 속성의 값으로 지정했기 때문에
해당 게시글에서는 사진이 출력되지 않고 대체 텍스트가 출력된다.
두번째 사진은 필자의 티스토리 블로그에 저장된 사진
서버에 저장된 사진의 url을 값으로 했기 때문에
이미지가 정상적으로 출력되는 것을 확인할 수 있을 것이다.
그 외에 추가적으로 title 속성을 활용해서 PC에서 사진에 마우스를 갖다대면
해당 사진에 대한 정보가 툴팁으로 나오는 것도 확인할 수 있을 것이다.
'Frontend > HTML' 카테고리의 다른 글
| [HTML] 목록 만들기 (<ul>, <ol>, <li>) (0) | 2023.04.01 |
|---|---|
| [HTML] <a> 요소 (0) | 2023.03.29 |
| [HTML] 컨테이너 태그(<div>, <span>) & 전역 속성 (0) | 2023.03.16 |
| [HTML] 인라인 태그 8가지 (1) | 2023.03.14 |
| [HTML] <p>, <h1>...<h6>, <hr> 태그 + <br>, (0) | 2023.03.03 |
