06. 미디어요소

작성자:

📢 예제파일

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

💡 🖇️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.시맨틱 구조요소

💡 문서의 구조영역을 표시

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

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

header 헤더영역 제목(사이트로고),내비게이션,검색
section 맥락이 같은 요소를 주제별로 그룹핑 섹션주제에 대한 제목<h2>~`

`을 포함하는 것이 좋다
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

👁️‍🗨️

브라우저별 지원하는 코덱이 상이하니 호환성을 체크하고 추가한다
**
코덱별 호환성 체크 :**
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 요소로 동영상 삽입

👁️‍🗨️ 🔗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. 자막넣기

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

🔗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. 아이프레임

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

속성 값 의미
src 경로 불러올 페이지의 URL
title 텍스트 iframe 의 용도 (접근성 필수)
width, height 숫자 iframe 크기
loading lazy / eager 화면에 들어올 때 로드(lazy) — 성능에 유리
sandbox (값 없음) / 토큰 조합 외부 콘텐츠 격리 (스크립트·폼 차단). 보안 권장
referrerpolicy no-referrer 등 리퍼러 노출 제어
allow 토큰 카메라/마이크/결제 등 권한

⚠️ scrolling 속성은 HTML5 에서 되었습니다. 스크롤은 CSS 의 overflow 로 제어하세요.

💡 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>&lt;header&gt;, &lt;section&gt;, &lt;footer&gt;, &lt;nav&gt;, &lt;article&gt;, &lt;aside&gt; </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>&lt;header&gt;, &lt;section&gt;, &lt;footer&gt;, &lt;nav&gt;, &lt;article&gt;, &lt;aside&gt;</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> — 접기·펼치기

👁️‍🗨️ 자바스크립트 없이 접기·펼치기 를 만드는 시맨틱 요소. 모던 FAQ·공지사항·코드 예제에 자주 쓴다.

FAQ – 환불 정책은 어떻게 되나요? 
<p>구매일로부터 7일 이내 환불 가능합니다.</p>
요소 역할
<details> 컨테이너. 기본은 접힌 상태
<summary> 항상 보이는 요약 줄 — 클릭하면 펼쳐진다
open 속성 <details open> 으로 시작부터 펼친 상태

CSS ::details-content 의사 요소 (2024+) 로 펼침 영역 스타일·전환 가능. 브라우저 검색 (Ctrl + F) 도 접힌 영역 내부 텍스트를 찾을 수 있다.

💡 <dialog> 가 모달 이라면 <details> 는 문서 흐름 안의 토글. 둘은 다른 용도다.

9. popover API

👁️‍🗨️ 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 호출 필요 속성만으로

💡 진짜 모달 (작업 강제) 은 <dialog>, 가벼운 팝업 (메뉴·툴팁) 은 popover.

댓글 남기기