공부/WebPage

Web page html 공부 정리 7: HTML5와 멀티미디어

라이티아 2025. 4. 27. 00:36

1: 인터넷과 웹 기초

  • 인터넷 vs 웹: 인터넷은 네트워크, 웹은 그 위에서 동작하는 데이터 공유 시스템.
  • 클라이언트/서버 구조: 서버는 요청에 따라 자료 제공, 클라이언트는 요청을 보냄.
  • 웹 주소(URL) 구성: 프로토콜, 도메인, 문서 경로.
  • HTTP 프로토콜과 상태 코드: 요청-응답 사이클, 200 OK, 404 Not Found 등.
  • IP, DHCP, DNS 설명​.

2: HTML 기초

  • HTML 문서 구조: <!DOCTYPE html>, <html>, <head>, <body>.
  • 요소(Element)와 속성(Attribute): 모든 텍스트는 태그로 감싸야 함.
  • 문단, 제목, 목록(unordered, ordered, description) 작성 방법.
  • DOM(Document Object Model) 이해​.

3: 이미지, 링크, 페이지 구성

  • 이미지 삽입: <img> 태그 (필수 속성: src, alt).
  • 링크 생성: <a> 태그 (href 속성).
  • 페이지 레이아웃: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>.
  • 인라인 요소와 블록 요소 구분.
  • 특수문자(escape characters) 및 <figure> 사용​.

4: 테이블과 폼 기본

  • 테이블 구조: <table>, <tr>, <td>, <th>.
  • 셀 병합: colspan, rowspan 사용.
  • 테이블 접근성 향상: caption, scope, <thead>, <tbody>, <tfoot>.
  • 폼 기본: <form>, <input>, action, method (GET/POST 방식)​.

6: 폼 심화

  • 폼 컨트롤 종류: 텍스트 입력, 비밀번호 입력, 라디오 버튼, 체크박스, 드롭다운 메뉴, 파일 업로드.
  • HTML5 폼 입력 타입: 이메일, URL, 전화번호, 날짜/시간, 숫자 입력 필드.
  • 접근성 향상: <label>, <fieldset>, <legend> 사용​.

7: HTML5와 멀티미디어

  • HTML5 주요 특징:
    • 플러그인 없이 오디오, 비디오 지원
    • <canvas> API로 그래픽 처리
    • 드래그 앤 드롭 지원
  • 비디오/오디오 포맷:
    • 비디오: MPEG-4(.mp4), Ogg Theora(.ogv)
    • 오디오: MP3(.mp3), WAV(.wav), Ogg Vorbis(.ogg)
  • 비디오/오디오 삽입 방법:
    • <video>, <audio> 태그 사용
    • controls, autoplay, poster, 여러 소스 지원
  • 외부 동영상 삽입: YouTube 링크 삽입​.

 

HTML5 & Multimedia

HTML5

최신저번 html

이전에 특별한 프로그래밍이나 flash, silverlight같은 독점 플러그인 기술이 필요했던 작업을 새로운 방법으로 수행할 수 있게됨

 

New features in HTML5

플러그인 없이 오디오와 비디오를 내장 지원한다

향상된 폼 컨트롤과 속성들을 제공한다

Canvas라는 웹 페이지 위에 직접 그림을 그릴 수 있는 방법을 제공한다

드래그 앤 드롭을 지원한다

CSS3를 지원한다

데이터 저장, 오프라인 애플리케이션 같은 고급 기능을 지원한다

 

 

코덱 = codec은 code와 decode의 줄임말이다

 

Video formats

MPEG-4 컨테이너 + H.264 video codec + AAC

일반적으로 MPEG-4라고 불리며 mp4, m4v확장자를 활용한다

고화질, 유연성이 좋지만 특허가 걸려있고 라이선스 비용을 지불해야 한다

HTML5 비디오를 지원하는 모든 브라우저는 MPEG-4 파일을 재생할 수 있다

 

Ogg + Theora vedio codec + Vorbis audio

Ogg Theora라고 불리며 .ogv를 사용한다

모두 오픈소스이며 라이선스 비용이 없다

품질이 떨어진다고 평가하기도 한다

최신 브라우저뿐 아니라 구버전도 지원한다

더 많은 사용자들에게 재생 호완성을 제공한다

 

Audio formats

MP3

코덱과 컨테이너가 하나로 통합된 형태

확장자는 mp3 = MPEG-1 Audio layer 3

특허가 걸려있어서 라이선스 비용이 있으며 미디어 제작자가 아닌 하드웨어, 소프트웨어 회사가 지불한다

 

WAV

코덱과 컨테이너가 하나로 통합된 형태

압축(uncompressed)되지 않은 형태이기 때문에 짧은 클립에 적합하다

 

Ogg + Vorbis

ogg, oga를 사용한다

 

MPEG-4 + AAC

m4a이며 mp3에 밀려 보편적이지 않다

 

Adding video to a page

속성들

width, heigth = 픽셀단위 조정

내장된 미디어 플레이어 화면에 차지할 박스의 크기를 지정한다

 

poster = 이미지 url

비디오가 재생되기 전 썸내일 이미지 위치를 제공한다

 

controls

속성 추가시 브라우저에 내장된 미디어 컨트롤을 표시한다

 

autoplay

미디어 파일을 충분히 다운 후, 사용자가 수동으로 재생을 누르지 않아도 자동으로 재생시킨다

근데 mute 옵션을 넣어야 대부분 작동한다 = 사운드 테러 문제

 

Multiple video sources

<video>안에 여러개의 <source>를 넣으면 브라우저는 차례대로 확인해서 지원하는 포멧을 찾으면 그 버전만 다운한다

 

 

 

 

 

Adding audio to a page

audio 요소는 video 와 비슷한 요소와 속성을 사용하지만, 화면에 표시할 것이 없기에 width, heigth, poster 속성은 사용하지 않는다

video와 같이 source요소를 사용해 여러 포맷 옵션을 제공할 수 있다

 

악의적이라면 autoplay와 loop를 설정하여 사용자가 멈출수 있는 컨트롤을 제공하지 않게 할 수 있다