6. 미디어요소
`div`/`span`, 시맨틱 구조 태그, `audio`/`video`, `iframe`, `details`·popover 등 모던 미디어·디스클로저 요소를 정리한다.
Info: 📢 예제파일
1. 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>
2. 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>
3.시맨틱 구조요소
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
4. 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.mp3" type="audio/mpeg">
<source src="media/applause.wav" type="audio/wav">
</audio>
</body>
</html>
5. 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" preload="metadata" playsinline>
<source src="media/sunrise.mp4" type="video/mp4">
<source src="media/sunrise.webm" type="video/webm">
</video>
</body>
</html>
1. 자막넣기
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>
6. 아이프레임
Info: 💡 html 문서안에 다른 html 문서를 넣을수 있다.
| 속성 | 값 | 의미 |
|---|---|---|
src | 경로 | 불러올 페이지의 URL |
title | 텍스트 | iframe 의 용도 (접근성 필수) |
width, height | 숫자 | iframe 크기 |
loading | lazy / eager | 화면에 들어올 때 로드(lazy) — 성능에 유리 |
sandbox | (값 없음) / 토큰 조합 | 외부 콘텐츠 격리 (스크립트·폼 차단). 보안 권장 |
referrerpolicy | no-referrer 등 | 리퍼러 노출 제어 |
allow | 토큰 | 카메라/마이크/결제 등 권한 |
Info: ⚠️
scrolling속성은 HTML5 에서 deprecated 되었습니다. 스크롤은 CSS 의overflow로 제어하세요.
Info: 💡 iframe 은 접근성·SEO 에 취약하므로 가급적 자제. 외부 콘텐츠 임베드 시에는
title,loading="lazy",sandbox를 함께 적는 것이 모던 권장.
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" loading="lazy"></iframe>
</div>
</body>
</html>
7. 인라인프레임에서 하이퍼링크 연결
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>
▪ 2026 보완: 디스클로저와 popover
8. <details> / <summary> — 접기·펼치기
Info: 👁️🗨️ 자바스크립트 없이 접기·펼치기 를 만드는 시맨틱 요소. 모던 FAQ·공지사항·코드 예제에 자주 쓴다.
<details>
<summary>FAQ - 환불 정책은 어떻게 되나요?</summary>
<p>구매일로부터 7일 이내 환불 가능합니다.</p>
</details>
| 요소 | 역할 |
|---|---|
<details> | 컨테이너. 기본은 접힌 상태 |
<summary> | 항상 보이는 요약 줄 — 클릭하면 펼쳐진다 |
open 속성 | <details open> 으로 시작부터 펼친 상태 |
CSS ::details-content 의사 요소 (2024+) 로 펼침 영역 스타일·전환 가능. 브라우저 검색 (Ctrl + F) 도 접힌 영역 내부 텍스트를 찾을 수 있다.
Info: 💡
<dialog>가 모달 이라면<details>는 문서 흐름 안의 토글. 둘은 다른 용도다.
9. popover API
Info: 👁️🗨️ 2024 년 표준화·Baseline 진입. 메뉴·툴팁·드롭다운 같은 가벼운 팝오버 를 자바스크립트 없이 만든다.
<button popovertarget="my-tip" popovertargetaction="show">
도움말 보기
</button>
<div id="my-tip" popover>
<p>여기 도움말이 표시된다.</p>
<button popovertarget="my-tip" popovertargetaction="hide">닫기</button>
</div>
| 속성 | 위치 | 의미 |
|---|---|---|
popover | 팝오버 본체 | popover (= auto) / manual / hint |
popovertarget="id" | 트리거 버튼 | 어느 팝오버를 제어할지 |
popovertargetaction | 트리거 버튼 | show / hide / toggle (기본) |
popover 값 차이
| 값 | 동작 |
|---|---|
auto (기본) | 바깥 클릭·ESC 로 자동 닫힘. 한 번에 하나만 열림 |
manual | 명시적으로 닫아야 함. 여러 개 동시 가능 |
hint | 툴팁용. auto 와 비슷하지만 다른 auto 와 동시 가능 |
<dialog> 와 비교
| 비교 | <dialog> (modal) | popover |
|---|---|---|
| 용도 | 모달 — 작업 강제 | 메뉴·툴팁·드롭다운 |
| 배경 차단 | ✓ (::backdrop) | ✗ (auto 는 바깥 클릭만 닫음) |
| 포커스 트랩 | ✓ (showModal()) | ✗ |
| 작성 부담 | API 호출 필요 | 속성만으로 |
Info: 💡 진짜 모달 (작업 강제) 은
<dialog>, 가벼운 팝업 (메뉴·툴팁) 은 popover.