DEVELOPE/HTML-HTML5

html5 태그 figure, figcaption

소찾나 2017. 11. 17. 13:09

html5 태그 figure, figcaption

html5 태그 figure, figcaption



html5 에서는 html4 에서는 없던 새로운 태그들이 추가 되었습니다. 그중에서 이미지 관련 태그인


<figure> 태그와 <figcaption> 태그에 대하여 알아보도록 하겠습니다.


1 <figure> <figcaption>


그림이나 미디어등을 대상으로 하는 태그로 <figure> 는 설명글을 붙이 대상을 정의하는 태그이고 <figcaption>은 대상에 설명글을


붙이는 태그이다. 다만 <figure> 를 정의했다고 해서 꼭 <figcaption>을 설정해야 하는건 아니지만 사용할때는 꼭 <figure> 태그안에서


사용되어야 한다.


2 예제


위 설명대로 예제로 html5 문서를 작성해 보았다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<title>html5 테스트</title>
 
</head>
</head>
<body>
<figure>
 
<img src="./html5_newtag.jpg" width=100 height=100>
<img src="./html5_newtag.jpg" width=100 height=100>
<img src="./html5_newtag.jpg" width=100 height=100>                                              
 
<figcaption>html5는 쉬워요</figcaption>
</figure>
 
 
<figure>
 
<img src="./html5_newtag.jpg" width=100 height=100>
 
<figcaption>html5는 쉬워요</figcaption>
</figure>
 
<figure>
 
<img src="./html5_newtag.jpg" width=100 height=100>
 
<figcaption>html5는 쉬워요</figcaption>
</figure>
 
<figure>
 
<img src="./html5_newtag.jpg" width=100 height=100>
 
<figcaption>html5는 쉬워요</figcaption>
</figure>
 
</body>
</html>
cs


이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^