10 미디어요소

정보

📢 예제파일

01. div

정보

교재83p

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>그룹 요소</title>
6
    <style>
7
        header{
8
            width: 300px;
9
            margin: 0 auto;
10
            border: 1px solid #000;
11
        }
12
        section{
13
            width: 300px;
14
            margin: 0 auto;
15
            border: 1px solid #333;
16
        }
17
        footer{
18
            width: 300px;
19
            margin: 0 auto;
20
            border: 1px solid #999;
21
        }
22
    </style>
23
</head>
24
<body>
25
    <header>헤더</header>
26
    <section>본문</section>
27
    <footer>푸터</footer>
28
</body>
29
</html>

↓ div로 그룹화

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>그룹 요소</title>
6
    <style>
7
        #wrap{
8
            width: 300px;
9
            margin: 0 auto;
10
            border: 1px solid #000;
11
        }
12
    </style>
13
</head>
14
<body>
15
    **<div id="wrap">**
16
        <header>헤더</header>
17
        <section>본문</section>
18
        <footer>푸터</footer>
19
    **</div>    **
20
</body>
21
</html>

02. span

정보

💡 🖇️span 작은div

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>그룹 요소</title>
6
    <style>
7
        .s1{
8
            background-color: #ccc;
9
        }
10
        .s2{
11
            color: #ff6600;
12
        }
13
    </style>
14
</head>
15
<body>
16
    <span class="s1"><span class="s2">웹표준</span>과 <span class="s2">웹접근성</span></span>
17
    <div>
18
        <a href="#">
19
            <span><img src="images/whitestar.jpg" alt></span>
20
            <span class="s2">공기정화식물 화이트스타</span>
21
        </a>
22
    </div>
23
</body>
24
</html>

03.시맨틱 구조요소

정보

💡 문서의 구조영역을 표시

개발자와 웹브라우저나 장치 등 웹 페이지를 이용하는 모든 대상에 콘텐츠의 의미를 전달

https://developer.mozilla.org/ko/docs/Glossary/Semantics#html_시맨틱

header	헤더영역	제목(사이트로고),내비게이션,검색
section	맥락이 같은 요소를 주제별로 그룹핑	섹션주제에 대한 제목`<h2>`~`<h6>`을 포함하는 것이 좋다
footer	푸터영역	저작권정보, 회사정보
nav	메인메뉴
article	독립적으로 배포가능한 게시물
aside	광고영역	문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스
figure, figcaption	삽화와 그림의 설명

1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>구조 요소</title>
6
  </head>
7
  <body>
8
    <header>
9
      <h1><a href="#">반응형웹</a></h1>
10
      <nav>
11
        <ul>
12
          <li><a href="#">MENU01</a></li>
13
          <li><a href="#">MENU02</a></li>
14
          <li><a href="#">MENU03</a></li>
15
          <li><a href="#">MENU04</a></li>
16
          <li><a href="#">MENU05</a></li>
17
        </ul>
18
      </nav>
19
    </header>
20
    <div id="container">
21
      <section>
22
        <h2>콘텐츠 그룹01</h2>
23
      </section>
24
      <section>
25
        <h2>콘텐츠 그룹02</h2>
26
      </section>
27
      <article>
28
        <h2>주요기사</h2>
29
      </article>
30
      <aside>광고</aside>
31
    </div>
32
    <footer>
33
      <address>경기도 부천시 오정구 삼정동 000)674-5685 email@naver.com</address>
34
      <p>COPYRIGHT © All rights reserved.</p>
35
    </footer>
36
  </body>
37
</html>

1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>구조 요소</title>
6
    <link rel="stylesheet" href="style.css">
7
  </head>
8
  <body>
9
    <header>
10
      <h1><a href="#">반응형웹</a></h1>
11
      <nav>
12
        <ul>
13
          <li><a href="#">MENU01</a></li>
14
          <li><a href="#">MENU02</a></li>
15
          <li><a href="#">MENU03</a></li>
16
          <li><a href="#">MENU04</a></li>
17
          <li><a href="#">MENU05</a></li>
18
        </ul>
19
      </nav>
20
    </header>
21
    <div id="container">
22
      <section>
23
        <h2>콘텐츠 그룹01</h2>
24
      </section>
25
      <section>
26
        <h2>콘텐츠 그룹02</h2>
27
      </section>
28
**      <div>
29
        <article>
30
          <h2>주요기사</h2>
31
        </article>
32
        <aside>광고</aside>
33
      </div>**
34
    </div>
35
    <footer>
36
      <address>경기도 부천시 오정구 삼정동 000)674-5685 email@naver.com</address>
37
      <p>COPYRIGHT © All rights reserved.</p>
38
    </footer>
39
  </body>
40
</html>

1
**/* style.css */
2
**
3
* {
4
  margin: 0;
5
  padding: 0;
6
}
7
body > * {
8
  width: 900px;
9
  padding: 20px;
10
  background: #89c03d;
11
  text-align: center;
12
  margin:auto;
13
}
14
header {
15
  display: flex;
16
  height: 200px;
17
  justify-content: space-between;
18
  align-items: flex-end;
19
}
20
h1 {
21
  width: 200px;
22
  height: 200px;
23
  background: #bedb96;
24
  line-height: 200px;
25
}
26
ul {
27
  display: flex;
28
  list-style: none;
29
  background: #bedb96;
30
  width: 600px;
31
  justify-content: center;
32
}
33
li {
34
  width: 70px;
35
  height: 60px;
36
  line-height: 60px;
37
}
38
#container {
39
  display: flex;
40
  justify-content: space-between;
41
}
42
section {
43
  background: #bedb96;
44
  width: 300px;
45
  height: 400px;
46
  line-height: 400px;
47
}
48
section + div {
49
  display: flex;
50
  flex-direction: column;
51
  justify-content: space-between;
52
}
53
section + div * {
54
  width: 200px;
55
  height: 190px;
56
  background: #bedb96;
57
}
58

59
footer > * {
60
  background: #bedb96;
61
  width: 600px;
62
  padding: 5px;
63
  margin-left: 100px;
64
  margin-top: 5px;
65
}

04. audio

정보

👁️‍🗨️ 🔗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	음소거

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>오디오</title>
6
</head>
7
<body>
8
    <audio controls>
9
        <source src="media/applause.wav" type="audio/wav">
10
        <source src="media/applause.ogg" type="audio/ogg">
11
        <source src="media/applause.mp3" type="audio/mp3">
12
    </audio>
13
</body>
14
</html>

05. video 요소로 동영상 삽입

정보

👁️‍🗨️ 🔗video 접근성 고려하기

속성	값	내용
src	경로	재생할 음원 파일의 경로 설정(mp3, wav, ogg 파일 등)
autoplay	autoplay	자동재생
loop	loop	반복재생
controls	controls	컨트롤바
muted	muted	음소거
playsinline	playsinline	아이폰 자동재생

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>비디오</title>
6
</head>
7
<body>
8
    <video controls poster="images/sun.jpg" width="800" height="450">
9
        <source src="media/sunrise.mp4" type="video/mp4">
10
        <source src="media/sunrise.webm" type="video/webm">
11
        <source src="media/sunrise.ogg" type="video/ogg">
12
    </video>
13
</body>
14
</html>

05-01 자막넣기

정보

💡 포스터와 자막을 넣어보아요

🔗MDN <track>태그- 동영상 화면에 자막 추가하기

웹 표준 마크업인 HTML5에서는 비디오 콘텐츠를 웹 페이지에 삽입할 때 청각 장애인을 위한 자막을 표시하는 것이 기본입니다

1
<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

서버에 올려야 실행됨

1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>Document</title>
6
  </head>
7
  <body>
8
    <h1>동영상 썸네일과 자막넣기</h1>
9
    <video width="400" controls poster="images/mango.jpg">
10
      <source src="media/mango.mp4" />
11
      <track src="media/subtitle_en.vtt" kind="subtitles" srclang="en" label="english" />
12
      <track src="media/subtitle_ko.vtt" kind="subtitles" srclang="ko" label="korean" default />
13
    </video>
14
  </body>
15
</html>

06. 아이프레임

정보

💡 html 문서안에 다른 html 문서를 넣을수 있다.

속성	값	의미
src	경로	불러올 페이지의 URL
scrolling	auto	스크롤이 필요한 경우만 스크롤 바를 노출 (기본 값)
	yes	스크롤링 허용, 스크롤이 필요 없는 경우도 스크롤 바를 노출
	no	스크롤 하지 않음

아이프레임은 접근성, SEO에 취약하므로 사용자제

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>iframe</title>
6
</head>
7
<body>
8
    <h1>html5 구조 요소들</h1>
9
    <p>&lt;header&gt;, &lt;section&gt;, &lt;footer&gt;, &lt;nav&gt;, &lt;article&gt;, &lt;aside&gt; </p>
10
    <p><strong>html5 구조 요소를 이용한 마크업 예시</strong></p>
11
    <div>
12
        <iframe src=" ex1-37.html" title="반응형웹" width="500" height="500"></iframe>
13
    </div>
14
</body>
15
</html>ㄴ

07. 인라인프레임에서 하이퍼링크 연결

1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>iframe</title>
6
  </head>
7
  <body>
8
    <h1>html5 구조 요소들</h1>
9
    <p>&lt;header&gt;, &lt;section&gt;, &lt;footer&gt;, &lt;nav&gt;, &lt;article&gt;, &lt;aside&gt;</p>
10
    <nav>
11
      <ul>
12
        <li><a href="ex1-39-1.html" target="mainframe">link</a></li>
13
        <li><a href="ex1-29.html" target="mainframe">폼몽땅</a></li>
14
        <li><a href="ex1-12.html" target="mainframe">이미지맵</a></li>
15
        <li><a href="ex1-18-2.html" target="mainframe">네임앵커</a></li>
16
      </ul>
17
    </nav>
18
    <p><strong>html5 구조 요소를 이용한 마크업 예시</strong></p>
19
    <div>
20
      <iframe src="ex1-37.html" title="반응형웹" width="500" height="500" name="mainframe"></iframe>
21
    </div>
22
  </body>
23
</html>