img 태그와 figure 태그를 알아봅시다. - 이미지에 캡션 붙이기
img태그는 말그대로 html4에서부터 있었던 웹페이지에 img를 올리는 태그입니다.
그렇다면 figure는 무엇인가??
이 figure태그는 이미지에 캡션을 생성시 필요한 태그입니다.
이미지에 figure를 태그를 넣은 아래 예제 소스를 확인해보세요.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>img태그와 figure 태그</title>
</head>
<body>
<figure>
<img src="images/facebook.jpg" alt="facebook" width="200" height="200">
<img src="images/twitter.jpg" alt="twitter" width="200" height="200">
</figure>
</body>
</html>
figure태그는 img태그들을 묶어서 표현합니다.
이처럼 여러개의 이미지를 나열하는데 필요합니다. 이 소스의 결과물은 아래와 같습니다.
가로 정렬로 되어서 출력되었네요...
여기에 캡션을 넣어봅시다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>img태그와 figure 태그</title>
</head>
<body>
<figure>
<img src="images/facebook.jpg" alt="facebook" width="200" height="200">
<img src="images/twitter.jpg" alt="twitter" width="200" height="200">
<figcaption>페이스북과 트위터 입니다.</figcaption>
</figure>
</body>
</html>
결과물은...
댓글 없음:
댓글 쓰기