본문으로 건너뛰기

멀티미디어와 입력양식

1. 멀티미디어 (Multimedia)​

HTML5는 웹 브라우저에서 멀티미디어를 재생하는 방식에 혁명적인 변화를 가져왔습니다.

1.1 멀티미디어 재생​

  • HTML5 이전: <embed>나 <object> 태그를 사용했으며, 플래시(Flash)나 ActiveX와 같은 별도의 플러그인 설치가 필요했습니다. 이는 사용자와 개발자 모두에게 불편함을 초래했습니다.
  • HTML5 이후: <audio>, <video> 태그가 도입되어 브라우저 자체에서 지원하게 되었습니다. 플러그인 없이도 멀티미디어 콘텐츠를 쉽게 재생할 수 있어 웹 접근성과 편의성이 크게 향상되었습니다.

<audio> 태그​

오디오 파일을 웹 페이지에 삽입하고 재생합니다.

  • 주요 속성: autoplay(자동 재생), controls(재생 제어기 표시), loop(반복 재생), preload(미리 다운로드), src(오디오 파일 위치), volume(볼륨 설정)
  • 오디오 파일 형식: MP3, WAV, OGG 등 (브라우저마다 지원 형식이 다를 수 있으므로 호환성 고려)

<video> 태그​

비디오 파일을 웹 페이지에 삽입하고 재생합니다.

  • 주요 속성: autoplay, controls, loop, poster(비디오 다운로드 중 표시할 이미지), preload, muted(음소거), src, width, height
  • 비디오 파일 형식: MP4(H.264), WebM(VP8), OGG(Theora) 등

<source> 태그​

모든 브라우저가 지원하는 오디오/비디오 형식이 없으므로 호환성을 높이기 위해 여러 소스를 제공할 때 사용합니다. 브라우저가 지원하는 첫 번째 소스를 재생하며, type 속성으로 MIME 타입을 지정합니다.

예시:

<video controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  <source src="movie.ogv" type="video/ogg" />
  지원하지 않는 브라우저입니다.
</video>

1.2 iframe, div, span​

  • <iframe> (inline frame): 웹 페이지 안에 다른 웹 페이지를 표시할 때 사용. 하나의 페이지를 여러 프레임으로 나누어 각각 다른 문서를 표시할 수 있음
    • HTML4.01부터 도입, 대부분의 브라우저에서 지원
    • 새 속성: seamless(경계선 없이 문서의 일부처럼 출력)
  • <div>: divide의 약자, 논리적인 섹션(블록, 컨테이너)으로 분리. 블록 요소로 한 줄을 전부 차지하며, 웹 페이지의 주요 영역을 나눌 때 사용
  • <span>: <div>와 비슷하지만 인라인 요소. 텍스트의 특정 부분에 스타일을 적용하거나 작은 섹션을 분리할 때 사용

2. HTML 입력 양식 (HTML Input Forms)​

사용자로부터 데이터를 입력받아 웹 서버로 전송하는 데 사용되는 핵심적인 구성 요소입니다.

2.1 <form> 태그​

  • 동작 방식: 사용자가 데이터를 입력하여 웹 서버로 전송하는 데 사용. 온라인 쇼핑몰 주문, 사용자 피드백 등 다양한 웹 애플리케이션에 필수
    1. 클라이언트가 입력 양식 페이지를 요청
    2. 서버가 입력 양식 페이지를 전송
    3. 클라이언트가 양식에 데이터를 채워 서버로 전송
    4. 서버 스크립트(예: JSP)가 데이터를 처리
    5. 서버가 처리 결과를 담은 웹 페이지를 생성
    6. 생성된 웹 페이지를 클라이언트에 전달
  • 주요 속성:
    • action: 사용자가 입력한 데이터를 서버에서 받아서 처리하는 스크립트(php, jsp 등)의 URL 주소
    • method: 데이터를 보내는 방법 지정 (POST, GET)
      • GET: URL 주소 뒤에 파라미터를 붙여 데이터 전달. 북마크/뒤로 가기 가능, 보낼 수 있는 글자 수(2,048자) 제한, 비밀 보장 X
      • POST: HTTP Request 헤더에 포함시켜 데이터 전송. 북마크/뒤로 가기 불가, 전송 데이터 양 제한 적음, 보안성 높음

2.2 <input> 태그​

<input> 태그는 type 속성에 따라 다양한 형태의 입력 필드를 정의합니다.

  • 기본 속성: type(입력 요소 유형), name(서버에서 변수명처럼 사용), value(초기값)
  • 주요 type 속성:
    • text: 한 줄 텍스트 입력
    • password: 비밀번호 입력(입력 내용 숨김)
    • radio: 여러 항목 중 하나만 선택(같은 name 속성 사용)
    • checkbox: 여러 항목 동시 선택(checked 속성으로 미리 선택 가능)
    • submit: 입력 데이터를 서버로 전송(제출 버튼)
    • reset: 모든 입력 필드 초기화(초기화 버튼)
    • button: 일반 버튼(자바스크립트 등과 연동)
    • image: 이미지 형태의 제출 버튼
    • hidden: 화면에 보이지 않지만 서버로 데이터 전송
  • <button> 요소: <input type="button">과 유사하나, 텍스트/이미지 등 콘텐츠를 넣을 수 있음. type은 submit, reset, button 지정 가능
  • <textarea> 요소: 여러 줄 텍스트 입력, rows/cols 속성으로 크기 지정
  • <select> 요소: 드롭다운 메뉴, 사용자가 항목 선택
  • <fieldset> 태그: 입력 요소를 논리적으로 묶음, <legend>로 그룹 제목
  • <label> 태그: <input> 요소를 위한 레이블 정의. for 속성으로 <input>과 연결하면 레이블 클릭 시 입력 필드 활성화
  • 파일 업로드 버튼: <input type="file">로 파일 선택, accept 속성으로 허용 파일 MIME 타입 지정, <form>의 enctype은 multipart/form-data로 설정

2.3 HTML5 입력 요소​

HTML5에서는 <input> 태그에 다양한 type 속성과 추가 속성들이 도입되어 사용자 입력 처리 기능이 강화되었습니다.

  • 새로운 type 속성:
    • date, datetime, datetime-local, month, time, week: 날짜/시간 입력, 브라우저에서 픽커 제공
    • color: 색상 코드 입력/선택
    • email: 이메일 주소 입력 및 유효성 검증
    • tel: 전화번호 입력(브라우저 검증 약함, pattern 속성으로 정규식 사용 권장)
    • search: 검색어 입력(text와 유사, 유효성 검증)
    • range: 슬라이드 컨트롤로 숫자 선택
    • number: 숫자만 입력, min/max/step 속성으로 범위/단계 지정
    • url: URL 입력 및 유효성 검증
  • 추가된 <input> 태그 속성:
    • autocomplete: 자동 입력 완성
    • autofocus: 페이지 로드시 자동 포커스
    • placeholder: 입력 힌트 표시
    • readonly: 읽기 전용
    • required: 제출 전 반드시 입력
  • pattern: 허용하는 입력 형태를 정규식으로 지정해 정교한 유효성 검증 가능
    • 정규식(Regular Expression): 특정 규칙의 문자열을 표현하는 수식. 문자열 검색/치환에 널리 사용. 메타 문자(., \d, \w, ^, $, [])와 수량 한정자(*, +, ?, {m}) 등으로 패턴 정의