티스토리 뷰

DEVELOPE/HTML-HTML5

html5 태그 figure, figcaption

소찾나 2017. 11. 17. 13:09
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

html5 태그 figure, figcaption

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


html5 태그 figure, figcaption

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

'DEVELOPE > HTML-HTML5' 카테고리의 다른 글

html5 canvas api 사용  (0) 2017.11.20
html5 태그 중 생략가능한 종료태그  (0) 2017.11.18
html5 문서의 구조  (0) 2017.11.17
html5 의 등장  (0) 2017.11.17
DOCTYPE HTML 선언 & 사용  (0) 2017.01.31
공유하기 링크
댓글