각진 세상에 둥근 춤을 추자
[HTML] 이미지 태그 본문
HTML 태그 중 자주 쓰는 태그 중 하나가 바로 이미지 관련 태그다.
사진과 그림 등의 이미지를 웹 문서에 넣을 수 있는데 몇 가지 파일 형식만을 사용할 수 있다.
만약 다른 형식으로 된 이미지 파일을 웹에서 사용한다면 다음과 같은 파일 형식으로 변환해야 한다.
- GIF (Graphic Interchange Form)
- JPG/JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
(1) <img> 태그 - 이미지 삽입하기
- src 속성: 이미지 파일 경로 지정하기
- alt 속성: 이미지를 설명해 주는 대체 텍스트
- width, height 속성 - 이미지 크기 조정하기
<img src="경로" [속성="값"]>
예제를 통해 <img> 태그를 이해해 본다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 삽입하기</title>
</head>
<body>
<h1>짱구</h1>
<img src="./image/짱구.png" alt="포크를 들고 식사를 기대하는 짱구" width="200" height="200">
</body>
</html>
위 예제를 보면 src 태그를 사용해 경로를 지정하는 것을 알 수 있다.
이때 경로 기호를 같이 사용한다.
| ./ | 현재 디렉터리 (상대 경로), 생략 가능 |
| ../ | 상위 디렉터리 (상대 경로), 생략 불가능 |
| / | 루트 디렉터리 (절대 경로) |
(2) <figure>, <figcaption> 태그 - 이미지에 설명 글 붙이기
<figure> 태그는 설명글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오 같은 멀티미디어 파일을 비롯해 사진이나 표, 소스 코드 등
웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용한다.
한 단위가 되는 요소를 나타내기 위해서는 <figure> 태그만 사용하고,
설명 글을 사용하기 위해서는 <figure> 태그 안에 <figcaption> 태그를 사용해 설명 글을 표시한다.
<figure> 요소 </figure><figcaption> 설명 글 </figcaption>
예제를 통해 <figure>, <figcaption> 태그를 이해해 본다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>figcaption</title>
</head>
<body>
<figcaption>
<img src="./image/ponyo.png" alt="ponyo">
<figcaption> "포뇨, 일어나... 출근할 시간이야..."</figcaption>
</figcaption>
</body>
</html>
'HTML' 카테고리의 다른 글
| [HTML] 아이프레임과 target (0) | 2022.09.23 |
|---|---|
| [HTML] 링크 태그 (0) | 2022.09.22 |
| [HTML] 표 태그 (0) | 2022.09.22 |
| [HTML] 목록 태그 (0) | 2022.09.22 |
| [HTML] 텍스트 태그 2 (0) | 2022.09.21 |
'HTML' Related Articles
more
