포트폴리오 — 학술(mstudy.html) 완전 정리

 

 

Web Development · Portfolio HTML

포트폴리오 — 학술 페이지(mstudy.html) 분석

video 태그 · 다중 source · autoplay 정책 · preload

시작 오늘 분석할 코드

포트폴리오 4페이지 중 학술 페이지다. 이번 페이지의 핵심은 HTML5 video 태그로 프로젝트 영상을 보여주는 것이다. 옛날엔 영상을 띄우려면 Flash·Silverlight 같은 플러그인이 필요했지만, HTML5부터는 <video> 한 줄로 끝난다.

<section class="section1"> <h3>프로젝트</h3> <ul><li>레고 NXT 실습</li></ul> <video autoplay controls preload="metadata"> <source src="video.ogv" type="video/ogv"></source> <source src="video.mp4" type="video/mp4"></source> <source src="video.webm" type="video/webm"></source> 브라우저에서 비디오 파일을 지원하지 않습니다. <br/> </video> <h3>자격증 / 수상</h3> ... </section>

/* 관련 CSS */ video { margin:5px; width:300px; height:200px; }

실제 출력 미리보기

홍길동 홈페이지

경력학술인적소개

프로젝트

• 레고 NXT 실습

video.mp4

자격증

• 정보처리기사1급
• DAP 자격증

수상

• 교내 소프트웨어공모전 금상
• 포트폴리오 경진대회 장려상

참조링크

naver

google

daum

Copyright © 2014 Hong, GilDong

용어 용어 정리

<video>HTML5 비디오 재생 태그

<source>video 안에 여러 포맷을 등록

autoplay로딩 후 자동 재생 (제한 있음)

controls재생·정지·볼륨 UI 표시

preloadnone / metadata / auto

muted음소거 (autoplay와 짝)

loop끝나면 처음부터 반복

poster재생 전 표시할 썸네일 이미지

---

1 source 태그를 여러 개 쓰는 이유

브라우저마다 지원하는 비디오 코덱이 다르다. <source>를 여러 개 쓰면 브라우저가 위에서부터 차례로 시도하고, 자기가 재생할 수 있는 첫 번째 포맷을 사용한다.

포맷	코덱	지원 브라우저
.mp4	H.264 / H.265	거의 모든 브라우저 ✓
.webm	VP8 / VP9	Chrome, Firefox, Edge ✓ / Safari △
.ogv	Theora	거의 사용 안 함 (구버전 Firefox 정도)

※ 원본 코드의 type="video/ogv"는 잘못됐다. 정확한 MIME 타입은 video/ogg다. 또한 2026년 기준 .ogv는 거의 안 쓰이므로 mp4 + webm 두 개면 충분하다.

※ source 순서 전략

• 가장 많이 지원되는 mp4는 후순위에 두기 — 더 효율적인 webm을 먼저 시도
• 실무: webm → mp4 순으로 등록 (webm 지원 브라우저가 더 작은 파일을 받음)

---

2 autoplay의 함정 — 왜 자동 재생이 안 될 수 있는가

이번 코드에 autoplay가 있지만, 최신 브라우저에서는 자동 재생이 차단되는 경우가 많다. 이유: 사용자가 페이지에 들어오자마자 영상에서 갑자기 소리가 나오면 불편하기 때문이다.

[autoplay 작동 조건 — 현대 브라우저] 1. muted 속성이 함께 있을 때 ✓ 거의 항상 작동 2. 음소거가 아닐 때 ✗ 차단되는 경우 많음 3. 사용자가 페이지와 인터랙션 후 ✓ 작동

이번 코드 (autoplay만)

소리가 켜진 채 자동 재생 시도 → 다수 브라우저에서 차단

권장 (autoplay + muted)

<video autoplay muted controls>
음소거 상태로 자동 재생 → 거의 항상 작동

---

3 preload — 미리 받을지 정하는 옵션

값	동작	언제 쓰나
none	아무것도 미리 받지 않음	페이지에 영상이 많을 때 — 데이터 절약
metadata (이번 코드)	길이·해상도 등 메타데이터만	썸네일·시간 표시는 필요하지만 본 영상은 클릭 후
auto	가능하면 영상 전체 미리 받음	사용자가 반드시 볼 거라 확신할 때

---

 

반응형

 

4 source 태그 닫기 형식

이번 코드는 <source ...></source>처럼 닫는 태그를 따로 썼다. HTML5 표준은 self-closing이라 <source ...> 또는 <source ... />면 된다. 닫는 태그가 있어도 무시되어 정상 작동한다.

※ <source> 외에도 <img>, <br>, <input>, <meta>, <link> 등은 빈 요소(void element). 안에 내용이 들어갈 수 없으므로 닫는 태그가 없다.

---

5 자주 하는 실수

실수	증상	해결
type="video/ogv"	잘못된 MIME — 일부 브라우저가 무시	video/ogg로 수정 또는 ogv 자체를 빼기
autoplay만 사용	자동 재생 차단 → 검은 화면	autoplay muted 함께
controls 누락	재생 UI가 없어 사용자가 못 멈춤	controls 항상 추가
poster 누락	로딩 전 검은 박스만 보임	poster="thumbnail.jpg" 추가
대체 텍스트만 안에 있음	지원 브라우저는 텍스트 안 보고 영상만 재생	안내 메시지는 <p>로 감싸 명확하게
mp4 하나만	webm을 빠르게 받을 수 있는 브라우저도 큰 mp4를 받음	webm 우선 + mp4 fallback

---

6 현대식 권장 — 최소한의 video 태그

<video controls muted preload="metadata" poster="thumbnail.jpg" width="640" height="360"> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4"> <p>브라우저에서 비디오를 지원하지 않습니다. <a href="video.mp4">다운로드</a></p> </video>

---

핵심 한 줄 요약

<video>HTML5 비디오 — 플러그인 불필요

source 다중브라우저가 위에서부터 시도

webm + mp42026년 기준 두 개면 충분

autoplay + muted자동 재생은 음소거가 짝

preloadnone/metadata/auto — 데이터 사용 정책

controls재생 UI — 거의 필수

poster로딩 전 썸네일 이미지

type="video/ogv"오타 — 정확히는 video/ogg

Tags

#video태그 #source #mp4 #webm #autoplay #muted #preload #controls #poster #HTML5비디오 #CSS #HTML #포트폴리오 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

video태그, source, mp4, webm, autoplay, muted, preload, controls, poster, HTML5비디오, 비디오임베딩, CSS, HTML, 포트폴리오, 웹개발, 티스토리