미디어요소
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
Info: 📢 예제파일
01. div
Info: 💡 🔗div
ex1-34.html
교재83p
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>그룹 요소</title>
<style>
header{
width: 300px;
margin: 0 auto;
border: 1px solid #000;
}
section{
width: 300px;
margin: 0 auto;
border: 1px solid #333;
}
footer{
width: 300px;
margin: 0 auto;
border: 1px solid #999;
}
</style>
</head>
<body>
<header>헤더</header>
<section>본문</section>
<footer>푸터</footer>
</body>
</html>
↓ div로 그룹화
ex1-35.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>그룹 요소</title>
<style>
#wrap{
width: 300px;
margin: 0 auto;
border: 1px solid #000;
}
</style>
</head>
<body>
**<div id="wrap">**
<header>헤더</header>
<section>본문</section>
<footer>푸터</footer>
**</div> **
</body>
</html>
02. span
Info: 💡 🖇️span 작은div
ex1-36.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>그룹 요소</title>
<style>
.s1{
background-color: #ccc;
}
.s2{
color: #ff6600;
}
</style>
</head>
<body>
<span class="s1"><span class="s2">웹표준</span>과 <span class="s2">웹접근성</span></span>
<div>
<a href="#">
<span><img src="images/whitestar.jpg" alt></span>
<span class="s2">공기정화식물 화이트스타</span>
</a>
</div>
</body>
</html>
03.시맨틱 구조요소
Info: 💡 문서의 구조영역을 표시
개발자와 웹브라우저나 장치 등 웹 페이지를 이용하는 모든 대상에 콘텐츠의 의미를 전달
https://developer.mozilla.org/ko/docs/Glossary/Semantics#html_시맨틱
| header | 헤더영역 | 제목(사이트로고),내비게이션,검색 |
|---|---|---|
| section | 맥락이 같은 요소를 주제별로 그룹핑 | 섹션주제에 대한 제목<h2>~<h6>을 포함하는 것이 좋다 |
| footer | 푸터영역 | 저작권정보, 회사정보 |
| nav | 메인메뉴 | |
| article | 독립적으로 배포가능한 게시물 | |
| aside | 광고영역 | 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스 |
| figure, figcaption | 삽화와 그림의 설명 |
ex1-37.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>구조 요소</title>
</head>
<body>
<header>
<h1><a href="#">반응형웹</a></h1>
<nav>
<ul>
<li><a href="#">MENU01</a></li>
<li><a href="#">MENU02</a></li>
<li><a href="#">MENU03</a></li>
<li><a href="#">MENU04</a></li>
<li><a href="#">MENU05</a></li>
</ul>
</nav>
</header>
<div id="container">
<section>
<h2>콘텐츠 그룹01</h2>
</section>
<section>
<h2>콘텐츠 그룹02</h2>
</section>
<article>
<h2>주요기사</h2>
</article>
<aside>광고</aside>
</div>
<footer>
<address>경기도 부천시 오정구 삼정동 000)674-5685 email@naver.com</address>
<p>COPYRIGHT © All rights reserved.</p>
</footer>
</body>
</html>
ex1-37-re.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>구조 요소</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1><a href="#">반응형웹</a></h1>
<nav>
<ul>
<li><a href="#">MENU01</a></li>
<li><a href="#">MENU02</a></li>
<li><a href="#">MENU03</a></li>
<li><a href="#">MENU04</a></li>
<li><a href="#">MENU05</a></li>
</ul>
</nav>
</header>
<div id="container">
<section>
<h2>콘텐츠 그룹01</h2>
</section>
<section>
<h2>콘텐츠 그룹02</h2>
</section>
** <div>
<article>
<h2>주요기사</h2>
</article>
<aside>광고</aside>
</div>**
</div>
<footer>
<address>경기도 부천시 오정구 삼정동 000)674-5685 email@naver.com</address>
<p>COPYRIGHT © All rights reserved.</p>
</footer>
</body>
</html>
**/* style.css */
**
* {
margin: 0;
padding: 0;
}
body > * {
width: 900px;
padding: 20px;
background: #89c03d;
text-align: center;
margin:auto;
}
header {
display: flex;
height: 200px;
justify-content: space-between;
align-items: flex-end;
}
h1 {
width: 200px;
height: 200px;
background: #bedb96;
line-height: 200px;
}
ul {
display: flex;
list-style: none;
background: #bedb96;
width: 600px;
justify-content: center;
}
li {
width: 70px;
height: 60px;
line-height: 60px;
}
#container {
display: flex;
justify-content: space-between;
}
section {
background: #bedb96;
width: 300px;
height: 400px;
line-height: 400px;
}
section + div {
display: flex;
flex-direction: column;
justify-content: space-between;
}
section + div * {
width: 200px;
height: 190px;
background: #bedb96;
}
footer > * {
background: #bedb96;
width: 600px;
padding: 5px;
margin-left: 100px;
margin-top: 5px;
}
html
css
04. audio
Info: 👁️🗨️ 🔗MDN
브라우저별 지원하는 코덱이 상이하니 호환성을 체크하고 추가한다 ** 코덱별 호환성 체크 :** ** **https://caniuse.com/?search=mp3 https://developer.mozilla.org/ko/docs/Web/Media/Formats/Containers
오디오 코덱이란?
오디오코덱: 오디오의 디지털 데이터스트림을 부호화,복호화 하는 컴퓨터 프로그램/장치 부호화→컴퓨터로 미디어파일 생성할때 데이터 코드 압축하는거 복호화→압축푸는거
audio 에 사용할수 있는 속성
| 속성/특성 | 값 | 내용 |
|---|---|---|
| src | 경로 | 재생할 음원 파일의 경로 설정(mp3, wav, ogg 파일 등) |
| autoplay | autoplay | 자동재생 (접근성위배) 🗨접근성관련사회적이슈 |
| loop | loop | 반복재생 |
| controls | controls | 컨트롤바 |
| muted | muted | 음소거 |
ex1-38.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>오디오</title>
</head>
<body>
<audio controls>
<source src="media/applause.wav" type="audio/wav">
<source src="media/applause.ogg" type="audio/ogg">
<source src="media/applause.mp3" type="audio/mp3">
</audio>
</body>
</html>
05. video 요소로 동영상 삽입
| 속성 | 값 | 내용 |
|---|---|---|
| src | 경로 | 재생할 음원 파일의 경로 설정(mp3, wav, ogg 파일 등) |
| autoplay | autoplay | 자동재생 |
| loop | loop | 반복재생 |
| controls | controls | 컨트롤바 |
| muted | muted | 음소거 |
| playsinline | playsinline | 아이폰 자동재생 |
ex1-39.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>비디오</title>
</head>
<body>
<video controls poster="images/sun.jpg" width="800" height="450">
<source src="media/sunrise.mp4" type="video/mp4">
<source src="media/sunrise.webm" type="video/webm">
<source src="media/sunrise.ogg" type="video/ogg">
</video>
</body>
</html>
05-01 자막넣기
Info: 💡 포스터와 자막을 넣어보아요
🔗MDN
<track>태그- 동영상 화면에 자막 추가하기
- 웹 표준 마크업인 HTML5에서는 비디오 콘텐츠를 웹 페이지에 삽입할 때 청각 장애인을 위한 자막을 표시하는 것이 기본입니다
<track kind="자막의 종류" src="파일 경로" srclang="사용한 언어" lable="제목" default>
자막파일
파일은 media 폴더에 저장 subtitle_ko.vtt
WEBVTT FILE
1
00:00:00.000 --> 00:00:02.000
망고 안녕~
2
00:00:02.000 --> 00:00:04.000
망고 친구들~
3
00:00:05.000 --> 00:00:06.000
공을 던져줘요~
4
00:00:07.000 --> 00:01:00.000
망고 The End
subtitle_en.vtt
WEBVTT FILE
1
00:00:00.000 --> 00:00:02.000
mango Hello~
2
00:00:02.000 --> 00:00:04.000
manggo Friend~
3
00:00:05.000 --> 00:00:06.000
mango The End
ex1-39-1.html
서버에 올려야 실행됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<h1>동영상 썸네일과 자막넣기</h1>
<video width="400" controls poster="images/mango.jpg">
<source src="media/mango.mp4" />
<track src="media/subtitle_en.vtt" kind="subtitles" srclang="en" label="english" />
<track src="media/subtitle_ko.vtt" kind="subtitles" srclang="ko" label="korean" default />
</video>
</body>
</html>
06. 아이프레임
Info: 💡 html 문서안에 다른 html 문서를 넣을수 있다.
| 속성 | 값 | 의미 |
|---|---|---|
| src | 경로 | 불러올 페이지의 URL |
| scrolling | auto | 스크롤이 필요한 경우만 스크롤 바를 노출 (기본 값) |
| yes | 스크롤링 허용, 스크롤이 필요 없는 경우도 스크롤 바를 노출 | |
| no | 스크롤 하지 않음 |
아이프레임은 접근성, SEO에 취약하므로 사용자제
ex1-40.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<h1>html5 구조 요소들</h1>
<p><header>, <section>, <footer>, <nav>, <article>, <aside> </p>
<p><strong>html5 구조 요소를 이용한 마크업 예시</strong></p>
<div>
<iframe src=" ex1-37.html" title="반응형웹" width="500" height="500"></iframe>
</div>
</body>
</html>ㄴ
07. 인라인프레임에서 하이퍼링크 연결
ex1-40-1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>iframe</title>
</head>
<body>
<h1>html5 구조 요소들</h1>
<p><header>, <section>, <footer>, <nav>, <article>, <aside></p>
<nav>
<ul>
<li><a href="ex1-39-1.html" target="mainframe">link</a></li>
<li><a href="ex1-29.html" target="mainframe">폼몽땅</a></li>
<li><a href="ex1-12.html" target="mainframe">이미지맵</a></li>
<li><a href="ex1-18-2.html" target="mainframe">네임앵커</a></li>
</ul>
</nav>
<p><strong>html5 구조 요소를 이용한 마크업 예시</strong></p>
<div>
<iframe src="ex1-37.html" title="반응형웹" width="500" height="500" name="mainframe"></iframe>
</div>
</body>
</html>