5.시맨틱 태그가 뭘까?<img>,<video>,<audio>
안녕하세요~여러분!
벌써 3번째 시간 입니다^^
오늘은 드디어 ! 시맨틱 태그를 배웁니다
시맨틱 태그가 뭘까요??
시맨틱(Semantic) 태그는 "내용을 정확히 알 수 있는 태그"입니다!
예를 들어, <div>나 <span>과 같은 태그는 태그만으로는 어떤 내용이 기술되었는지 전혀 알 수가 없지만!
그러나 <form>, <table>, <img>와 같은 태그는 기술되는 내용이 무엇인지 충분히 짐작할 수 있습니다!
이런 태그들을 시맨틱 태그라고 합니다!
오늘은 시맨틱 태그 중 <img>,<video>,<audio> 에 대해 알려드립니다!
먼저 <img.html >예제1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>이미지 삽입과 캔션달기</title>
</head>
<body>
<header>
<h3> 이미지 종류에는 3개가 있다</h3>
<h2> GIF/(JPG/JPEG)/PNG</h2>
</header>
<article>
<section>
<figure>
<img src="img/test.jpg" width="300" height="300"/>
<img src="img/test2.jpg" width="300" height="300"/>
<figcaption>
<p align="center">이미지 2개를 묶어 하나의 캡션으로 표시하였습니다</p>
</figcaption>
</figure>
<figure>
<!--<img src="D:/test2.jpg" width="600"height="300"/>-->
<img src="../test2.jpg" width="600"height="300"/>
<!--상위 폴더 이기 때문에 D: 도 되고 ../ 도 된당-->
<figcaption>
<a href="#">이미지 하나에 캡션 1개를 표시<a>
</figcaption>
</figure>
</section>
</article>
</body>
</html>
두번째, <video.html>예제2
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>시맨틱 태그(audio)</title>
</head>
<body>
<header>
<h1> audio 태그</h1>
<h2>HTML5에서 손 쉽게 웹 문서에 비디오 파일을 삽입할때 사용하는 태그</h2>
</header>
<article>
<section>
<video src="video/test.mp4" width="500" height="500"
controls autoplay loop>
</video>
</section>
</article>
<footer>
<br/>
</footer>
</body>
</html>
셋째, <audio.html> 예제3
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>시맨틱 태그(video)</title>
</head>
<body>
<header>
<h1> video 태그</h1>
<h2>HTML5에서 배경 음악 이나 효과음등 오디오를 삽입할때 사용하는 태그</h2>
</header>
<article>
<section>
<audio src="N2/audio/20170106.m4a" controls="true" autoplay="true"loop="true"></audio>
</section>
</article>
<footer>
2017 All rights reserved.
</footer>
</body>
</html>
오늘은 여기까지 입니다 :)