반응형
<figure> : 이미지에 설명을 넣기 위해 그룹을 지어줌. body 안에 들어가야만.
<img src="이미지 주소"> : 이미지 주소=이미지 경로(파일 경로 혹은 웹 주소) 확장자 명까지 넣어줘야 함.
인터넷 상 주소라면 네트워크가 되지 않을 때 볼 수 없음.
<figcaption>이미지 하단 설명 문구</figcaption> : 이미지 하단 문구를 넣기 위한 내용
</figure>
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>추천 관광지</title>
</head>
<body>
<h1>사려니 숲길</h1>
<figure>
<img src="images/road.jpg" alt="길 양 옆으로 시원하게 나무들이 뻗어있는 사려니 숲길" width="200" height="80">
<figcaption>나무들이 우거져 시원한 숲길</figcaption>
</figure>
<hr>
<h1>제주의 오름</h1>
<p>거인 설문대할망이 제주도와 육지 사이에 다리를 놓으려고 치마폭에 흙을 담아 나를 때 치마 틈새로 한줌씩 떨어진 흙덩이들이 오름이 되었다는 전설이 있다.</p>
<figure>
<img src="images/oreum-1.jpg" alt="푸른 하늘에 넓은 녹지대가 보이는 제주의 오름" width="200" height=80">
<figcaption>완만하고 부드러운 용눈이 오름
</figcaption>
</figure>
</body>
</html>
반응형
'html+CSS+JS > html+CSS' 카테고리의 다른 글
| [html/기초] 체크상자, 기입란 만들기 (input, form, fieldset, legend) (0) | 2019.06.19 |
|---|---|
| [html/기초] 이미지나 문구에 링크 걸기 (a href, target, blank, id) (1) | 2019.06.18 |
| [html/기초] 표만들기 (table, tr, th, td, caption, colgroup) (0) | 2019.06.17 |
| [html/기초] 항목나열 (0) | 2019.06.17 |
| [html/기초] html 시작, 나눔선, 글자 효과 (0) | 2019.06.17 |
