HTML audio·video + CSS3 animation 완전 정리

 

 

Web Development · Media + Animation

HTML audio·video + CSS3 animation
완전 정리

오디오/비디오 자동재생, 동영상 배경, keyframes로 만드는 무한 애니메이션

시작 다루는 주제

HTML5는 외부 플러그인(Flash) 없이 브라우저 자체에서 오디오·비디오를 재생할 수 있는 두 태그(<audio>, <video>)를 제공한다. 그리고 CSS3는 @keyframes + animation 속성으로 JavaScript 없이 무한 반복 애니메이션을 구현할 수 있게 한다. 이 글은 두 기능을 한번에 정리하고, 둘이 만나는 지점인 "동영상을 배경으로 깔고 그 위에 텍스트 띄우기"까지 다룬다.

용어 핵심 키워드

<audio>소리 파일 재생 태그

<video>동영상 재생 태그

controls재생/일시정지 등 기본 컨트롤 표시

autoplay페이지 로딩 후 자동 재생 시도

loop끝까지 가면 다시 처음부터

muted소리 끔 (autoplay와 함께 필수)

postervideo 재생 전 보여줄 이미지

@keyframes애니메이션 단계 정의 블록

animation-name실행할 keyframes 이름

animation-duration한 사이클 시간 (3s = 3초)

iteration-count반복 횟수 (infinite = 무한)

animation-directionnormal · reverse · alternate

backface-visibility3D 회전 시 뒷면 표시 여부

perspective3D 변환 시 원근감 거리

---

1 <audio> 기본 사용법

컨트롤이 보이는 일반 재생

<audio src="media/bgsound.mp3" controls></audio>

controls 속성 — 사용자가 직접 재생

실제 파일 로드 시 ▶ 컨트롤 바가 표시됩니다.

자동재생 + 무한 반복

<audio src="media/bgsound.mp3" autoplay loop></audio>

⚠️ 크롬 자동재생 정책: 사용자가 사이트와 한 번도 인터랙션하지 않은 경우 autoplay가 차단된다. 이를 우회하려면 muted(음소거)를 함께 적용하거나, 사용자 클릭 후 JavaScript로 .play()를 호출해야 한다.

JS로 자동재생 강제 시도

// 200ms 간격으로 play() 시도, 성공하면 멈춤 var autoplayInterval = setInterval(autoplayVideo, 200); function autoplayVideo() { var promise = document.querySelector('video').play(); if (promise !== undefined) { promise.then(function() { // 자동재생 성공! clearInterval(autoplayInterval); }).catch(function(error) { // 차단됨 — Play 버튼을 보여줘야 함 }); } }

---

2 <video> — 동영상 배경 만들기

가장 인기 있는 활용은 풀스크린 동영상 배경. position: fixed + z-index: -100으로 모든 콘텐츠 뒤에 깔고, min-width/min-height: 100%로 화면을 가득 채운다.

#bg { position: fixed; left: 0; top: 0; min-width: 100%; min-height: 100%; z-index: -100; /* 모든 콘텐츠 뒤로 */ background: url(images/flame.jpg) no-repeat; background-size: cover; }

<video src="media/flame.mp4" autoplay loop muted poster="images/flame.jpg" id="bg"></video> <div id="container"> <h2>사람을 구체적으로 도와주는 책</h2> <h1><a href="#">이지스퍼블리싱</a></h1> </div>

※ 동영상 배경 핵심 4종 세트

• autoplay — 자동 재생
• loop — 무한 반복
• muted — 음소거 (autoplay 차단 회피용 필수)
• poster — 비디오 로딩 전 보여줄 정지 이미지 (CDN 비용 절감)

💡 IE 호환을 위해 <!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><![endif]--> 같은 조건부 주석을 쓰는 코드도 있다. 지금은 IE9 미만 점유율이 사실상 0이므로 신경 쓸 필요 없다.

---

3 CSS3 @keyframes — 애니메이션 정의

@keyframes는 애니메이션의 단계별 상태를 정의하는 블록이다. 가장 단순한 형태는 from(시작) → to(끝). 더 정교한 제어가 필요하면 0%, 25%, 50%, 75%, 100% 같은 퍼센트 키프레임으로 나눈다.

@keyframes change-bg { from { background-color: blue; border: 1px solid black; } to { background-color: #a5d6ff; border-radius: 50%; } } div { width: 100px; height: 100px; animation-name: change-bg; animation-duration: 3s; animation-iteration-count: infinite; }

실행 결과 — 사각형 ↔ 원, 색 변화 (3초 무한)

 

---

4 animation 속성 8종

속성	값	설명
animation-name	이름	실행할 @keyframes 식별자
animation-duration	3s, 500ms	한 사이클 시간
animation-timing-function	ease, linear, ease-in-out, cubic-bezier()	속도 곡선
animation-delay	1s	시작 지연 시간
animation-iteration-count	infinite, 3	반복 횟수
animation-direction	normal · reverse · alternate	방향 — alternate는 왔다갔다
animation-fill-mode	none · forwards · backwards · both	끝난 후 어떤 상태 유지할지
animation-play-state	running · paused	재생/일시정지 (JS로 토글)

단축 표기 (shorthand)

/* name | duration | timing | delay | iteration | direction */ animation: moving 3s ease infinite alternate;

여러 애니메이션 동시 실행 (콤마 구분)

animation: rotate 1.5s infinite, background 1.5s infinite alternate;

moving 애니메이션 — width + opacity + transform 동시 변화

CSS3 Animation

두 애니메이션 동시 — 3D 회전 + 배경색 변화

 

---

반응형

5 animation-direction 4종 비교

값	동작
normal	(기본) from → to → 다시 from에서 시작
reverse	to → from (역방향만)
alternate	from→to→from→to... (왔다 갔다, 가장 자연스러움)
alternate-reverse	to→from→to→from...

💡 무한 반복을 자연스럽게 보이려면 거의 항상 alternate를 쓴다. normal은 끝나면 갑자기 처음으로 점프해서 어색하다.

---

6 backface-visibility — 3D 뒷면 처리

요소를 rotateY(180deg)로 뒤집으면 그 뒷면이 사용자에게 보인다. 카드 뒤집기 효과나 3D 메뉴에서 뒷면을 안 보이게 처리할 때 사용.

.container { perspective: 300px; } /* 3D 원근감 부여 */ .box { transform: rotateY(135deg); } #back1 { backface-visibility: hidden; } /* 뒷면 안 보임 */ #back2 { backface-visibility: visible; } /* 뒷면 보임 (기본) */

왼쪽: hidden (뒷면 안 보임) / 오른쪽: visible (뒷면 글자가 거울 반전된 채 보임)

BACK

BACK

---

7 자주 하는 실수

실수	증상	해결
autoplay만 적용 (muted 없음)	크롬·사파리에서 차단	muted 속성 추가
animation-iteration-count 누락	1번만 실행되고 멈춤	infinite 또는 숫자 지정
@keyframes 이름 오타	아무 동작 없음	animation-name과 정확히 일치
perspective 없이 rotateY	3D 효과 없이 평평하게 보임	부모에 perspective 부여
video에 width/height 미지정	로딩 전 레이아웃 점프	poster + 너비 지정
animation 단축 순서 혼동	일부 속성 무시됨	name → duration → timing 순서 확인

---

요약 핵심 한 줄 정리

Audio · Video · CSS3 Animation

<audio src>controls / autoplay / loop / muted

<video>+ poster (로딩 전 이미지) + muted (자동재생 필수)

동영상 배경position:fixed + z-index:-100 + min-w/h:100%

@keyframesfrom/to 또는 0~100% 단계 정의

animation단축: name duration timing delay count direction

infinite + alternate무한 반복 + 왔다 갔다 (가장 자연스러움)

animation: a, b콤마로 여러 애니메이션 동시 실행

backface-visibilityhidden — 3D 회전 시 뒷면 안 보이게

perspective부모에 부여 → 자식의 3D 원근감 활성화

Tags

#audio #video #autoplay #loop #muted #animation #keyframes #animation-direction #backface-visibility #동영상배경 #웹개발 #티스토리

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

audio, video, autoplay, loop, muted, animation, keyframes, animation-direction, backface-visibility, 동영상배경, 웹개발, 티스토리