코딩 기록들
[FrontEnd] 3. HTML 태그 상세2(video, audio, sementic) 본문
vedio태그
- https://www.w3schools.com/html/html5_video.asp
- 상세속성 https://www.w3schools.com/tags/tag_video.asp
- 유트브같은 영상 표현할때
- DFY(https://www.dfy.co.kr/) 처럼 영상을 배경에 깔고 홈페이지 구성하고 싶을때 사용
<!DOCTYPE html>
<html>
<body>
<video width="600" controls autoplay loop>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
<p>
Video courtesy of
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
</body>
</html>
audio태그
- https://www.w3schools.com/html/html5_audio.asp
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
controls 대신 autoplay loop 주면 위와 같은control 이미지 나타나지않고, 자동으로 계속 재생된다
Sementic 태그
- div와 같은 형식으로 영역을 부여하는 것. 다만, 영역에 대한 구역 명칭을 미리 정의해둔것 (하지만 한국에서는 웬만하면 div로 작성함) = 태그 자체에 의미 부여!
- https://www.w3schools.com/html/html5_semantic_elements.asp
- article : 게시글에 대한 내용을 감싸줄때(ex.문서영역의 내용을 하나의 문서로 표현시 사용)
<article class="forecast">
<h1>Weather forecast for Seattle</h1>
<article class="day-forecast">
<h2>03 March 2018</h2>
<p>Rain.</p>
</article>
<article class="day-forecast">
<h2>04 March 2018</h2>
<p>Periods of rain.</p>
</article>
<article class="day-forecast">
<h2>05 March 2018</h2>
<p>Heavy rain.</p>
</article>
</article>
'FrontEnd Programming' 카테고리의 다른 글
| [FrontEnd] 6. Margin collapsing, Width & Height, Display & Visibility (1) | 2024.03.07 |
|---|---|
| [FrontEnd] 5. CSS (3) | 2024.03.06 |
| [FrontEnd] 4. HTML 공통 Attributes, 공통Event (0) | 2024.03.06 |
| [FrontEnd] 1. HTML5 문서구조, 주요 태그, 속성 (0) | 2024.03.06 |
| [FrontEnd] 2. HTML 태그 상세(div, p, span, list, anchor, table 태그) (6) | 2024.03.06 |
'FrontEnd Programming' Related Articles
more
