3. HTML5 멀티미디어와 입력 양식

웹 브라우저와 멀티미디어

  HTML5 이전에 웹 브라우저에서 오디오나 비디오를 재생하기 윟서는 상당한 수고가 필요하였다. 먼저 HTML 안에서는 

  <embed>나 <object>태그를 사용해야 했고 웹 브라우저에는 플래시나 AciveX를 설치해야 했다. 하지만 HTML5에서는

  <audio>와 <video> 태그가 추가되었고 이 태그를 이용해 자연스럽게 HTML 문서의 일부로 오디오와 비디오를 추가    할 수 있다. 물론 플러그인의 설치도 필요 없다.

오디오

  HTML5에서는 오디오를 재생할 수 있는 <audio> 태그를 이용해 웹 페이지에서 음악을 재생할 수 있다.

<audio src="old_pop.mp3">

  큰 따옴표 옆에는 audio 요소를 추가할 수 있다.

 오디오 파일 형식

  + MP3 : 'MPEG-1 Audio Layer-3'의 약자로 MPEG 기술의 음성 압출 기술이다.

  + Wav : 윈도우에서 사용되는 표준 사운드 포맷으로 마이크로 소프트 사와 IBM사가 만들었다. 파일의 크기가 크다.

  + Ogg : MP3 대안으로 개발된 파운드 파일 포맷으로 디지털 오디오 포맷의 특허권을 반대하고 보다 좋은 음질을

              위해 오픈소스로 개발되었다.

 <source> 태그 사용하기

   프로그램을 실행 했을때 브라우저는 실행되지 않을 경우 <source>태그를 이용해 하나의 오디오 소스에 대하여

  여러 가지 파일 형식을 통시에 제공하면 된다.

<audio controls autoplay>
	<source src="music.ogg" type="audio/ogg">
	<source src="music.mp3" type="audio/mp3">
	your browser does not support the audio element.
</audio>

  웹 브라우저는 가장 앞에 있는 파일부터 차례대로 검사하게 되고, 만약 재생이 가능한 파일 형식을 찾으면 더이상 파일

  을 검사하지 않는다.

 비디오

  비디오를 HTML 문서에 삽입하는 과정도 오디오와 거의 동일하다. 비디오는 <video> 태그를 사용한다.

  비디오 파일도 src 속성을 이용해 지정한다.

<video src="movie.mp4">

  오디오와 마찬가지로 큰 따옴표 옆에는 video 요소의 속성을 넣을 수 있다.

 비디오 파일 형식

  + MP4 : 'MPEG-4' 기술을 사용한다. MPEG-1과 MPEG-2에 비해 적은 용량으로도 고품질의 영상 및 음성을 구현할 수

             있다. 코덱은 H.264를 사용한다.

  + WebM : 무료로 제공되는 개방형 고화질 영상 압축 형식의 영상 포맷이다. 구글이 지원하고 있다. 코덱은 VP8이라고

                불린다.

  + Ogg : 역시 무료이고 비디오 압축 형식이다. Theora 비디오 압축 기술이라 부른다.

 iframe

  iframe은 웹 페이지 안에서 다른 웹 페이지를 표시하고자 할때, 사용한다. iframe은 "inline frame"의 약자이다.

  흔히 광고를 위해 사용한다. 또는 하나의 페이지를 여러 프레임으로 나누어서 각각 다른 문서를 표시하고자 할 때도

  사용한다.

 <div>와 <span>

  <div>와 <span>은 웹 사이트를 구축하는 데 반스시 필요한 도구이다. <div>는 고층 건물을 짓는 철근과 같은 역할

  을 한다. div는 "divide"의 약자로서 페이지를 논리적인 섹션으로 분리하는데 사용되는 태그이다.

<div style="border: 3px solid red">
    <h2>사자</h2>
    <p>사자는 아프리카에 살며...</p>
</div>

  <div>는 블록 수준의 요소로서 HTML 요소를 묶는 컨테이너로 사용할 수 있다.

  <span> 요소는 인라인 요소로서 텍스트를 위한 컨테이너로 사용할 수 있다. 인라인 요소는 자신이 필요한 크기만 차지

  하는 요소이다. <span>태그도 자체로는 특별한 의미는 없으며 CSS와 함께 사용되어서 텍스트 일부의 스타일 속성을

  설정할 때, 사용된다.

HTML입력 방식

  웹은 쌍방향성이다. 즉 사용자가 서버로 보낼 수도 있는 것이다.

  입력 양식을 사용하면 사용자로부터 데이터를 받아서 서버로 넘기는데 사용된다. 입력 양식에 채워진 데이터는 서버로

  전달된다.

 입력 양식의 작동 방식

  입력 양식은 기본적으로 사용자가 정보를 넣을 수 있는 입력 필드를 가지고 있는 웹 페이지이다.

  HTML 약식은 텍스트 필드, 라디오 버튼, 버튼 등과 같은 기본적인 입력 요소를 포함 살 수 있다. 입력 양식이 제출되면

  정보는 포장되어 서버로 전달된다. 최종적으로 서버에 존재하는 어떤 서버 스크립트에 의하여 처리된다. 처리가 종료 

  되면 처리 결과가 웹 페이지로 만들어져서 사용자로 전달된다.

 <form>요소

  <form> 태그가 HTML 양식을 생성하는 데 사용된다.

<form action="input.jsp" method="post">
    <input type="text" name="input" />
    <input type="submit">
</form>

  입력양식은 항상 <form>으로 시작한다. action에는 입력을 처리하는 서버 스크림의 주소를 적어주고 method에는

  데이터가 서버로 보내지는 방법을 기술한다. GET과 POST방식이 있다.

 GET 방식과 POST 방식

  + GET 방식

  GET 방식은 URL 주소 뒤에 파라미터를 붙여서 데이터를 전달하는 방식이다.

  ex) https://heenam.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F 

  "?"기호 앞이 URL주소이고 그 뒤에가 파라미터 주소가 된다.

  GET방식으로 보낼 수 있는 글자 수는 최대 2048글자로 제한되어 있다. 또 당연히 비밀 보장이 되지 않는다.

  하지만 북마크가 가능하고 "뒤로 가기"가 보장된다.

  + POST 방식

  POST 방식은 사용자가 입력한 데이터를 URL주소에 붙이지 않고 HTTP Request 헤더에 포함시켜서 전송하는 방식이다.

  당연히 길이 제한이 없으며, 보안이 유지된다.

  POST 요청은 캐시되지 않으며 브라우저 히스토리에도 남아있지 않다. 또 북마크가 불가능하다. POST 요청을 한 후에

  "뒤로 가기"버튼을 누르면 데이터를 다시 보내야 한다는 브라우저 경고가 나온다.

입력 태그

  <form> 안에서 추가되는 입력 요소들 중에서 가장 중요한 요소는 <input>요소이다. <input>요소는 사용자로부터 

  정보를 받아들이는 용도로 사용된다.

  <input>요소는 type 속성에 따라서 여러가지 형태로 변경 될 수 있다.

 <input>형식

  <input> 태그의 일반적인 구조는 다음과 같다.

<input type="button" value="눌러보세요!" name="button1"/>

  type 속성 : 입력 요소의 유형이다.

  value 속성 : 입력 요소의 초기값이다. 입력 요소에 따라서 사용자가 변경할 수도 있따.

  name 속성 : 입력 요소의 이름이며 서버로 변수의 이름처럼 전달된다.

 텍스트 필드

  <input type="text">는 사용자가 입력할 수 있는 한줄짜리 입력 필드를 정의한다. 텍스트 필드의 기본 크기는 20글자    이다. size 송성으로 필드의 크기를 변경할 수 있다. 서버에서는 name을 변수 이름처럼 생각해 값을 참조한다.

<form>
    이름: <input type="text" name="name"><br>
    학번: <input type="text" name="number" size=10>
</form>

 패스워드 필드

  <input type="password">는 패스워드 필드를 정의한다. 사용자가 입력한 글자는 보이지 않는다.

  비밀번호에 주로 사용된다.

<form>
    패스워드: <input type="password" name="pass">
</form>

 라디오 버튼

  <input type="radio">는 라디오 버튼을 정의한다. 사용자는 여러 항복 중에서 하나만 선택 할 수 있다.

  이때, type은 radio로 설정해야 하고 name과 value 속성도 반드시 지정해야 한다. 이때 주의할 점은 name이 같아야

  동일한 그룹으로 취급된다는 점이다.

<form>
    성별:
    <input type="radio" name="gender" value="male">
    <input type="radio" name="gender" value="female">
</form>

 체크 박스

  <input type="checkbox">는 체크 박스를 정의 한다. 체크 박스는 사용자가 여러 개의 항복을 동시에 선택할 수 있다.

  name속성은 동일해야 한다. 미리 어떤 값을 체크하고 싶다면 checked 속성을 지정하면 된다.

<form>
    과일 선택:
    <input type="checkbox" name="fruits" value="apple" checked>
    <input type="checkbox" name="fruits" value="grape">
    <input type="checkbox" name="fruits" value="orange">
</form>

 제출 버튼과 초기화 버튼

  <input type="submit">은 제출 버튼을 정의한다. 제출 버튼은 데이터를 서버로 전송하는 데 사용된다.

  <input type="reset">은 초기화 버튼이다. 이 버튼을 누르면 입력 필드에 입력한 값이 모두 초기화 된다.

<form name="input" action="getid.jsp" method="get">
    사용자 아이디:
    <input type="text" name="user"> <br />
    <input type="submit" name="제출">
    <input type="reset" name="초기화">
</form>

 <input>버튼

  일반적인 버튼은 <input type="button">으로 생성할 수 있다. 버튼은 다양한 용도로 사용될 수 있다.

  이반적으로 우리는 onclick 속성에 버튼이 클릭되면 실행되는 자바스크립트를 지정한다.

  onclick은 "버튼이 클릭이 되면"이라는 의미이다.여기서는 간단하게 경고 대화 상자를 화면에 표시하는 alert()실행한다.

<form name="input" action="getid.jsp" method="get">
    물품가격:
    <input type="text" name="user"> <br />
    수량:
    <input type="text" name="user"> <br />
    <input type="button" value="계산" onclick="alert('10000원입니다.')">
</form>

 <button>버튼

  버튼은 <button>태그로도 정의할 수 있다.<button>요소 안에는 텍스트나 이미지와 같은 콘텐츠를 넣을 수 있다.

  반드시 <button> 요소의 type을 지정하도록 하자. 거의 모든 브라우저는 <button>태그를 지원한다.

<<button type="button" onclick="alert('안녕하세요')">눌러보세요!</button>

 이미지 버튼

  경우에 따라서 버튼을 이미지로 만들고 싶을 때가 있다. 이미지 버튼은 2가지 방법으로 가능하다.

  +<button type="submit"><img src="submit.png"></button>

  +<input type="image" src="submit.png" alt="제출 버튼">

<form name="input" action="getid.jsp" method="get">
    아이디:
    <input type="text" name="name"><br />
    <input type="image" src="submit" alt="제출 버튼">
</form>

입력 태그

 <textarea>요소

  <testarea>는 여러 줄의 텍스트를 입력받을 때 사용하는 태그이다. 영역의 크기는 rows와 cols로 설정한다.

  사용자가 초기 공간보다 더 많은 텍스트를 입력하면 자동으로 스크롤바가 생성된다.

<form name="input" action="getfeedback.jsp" method="get">
    고객의 의견 <br  />
    <textarea name="feedback" rows="5" cols="50">
    </textarea>
</form>

 <select>요소

  <select>요소는 메뉴를 표시하고 사용자로 하여금 선택하게 한다. <select>요소는 항상 <option>요소와 함께 

  사용된다. <option> 요소는 반드시 value 속성을 가지고 있어야 한다.

  selected 속성을 이용해 특정 항목을 초기에 선택할 수 있다.

<form action="">
<select name="cars">
    <option value="bmw">BMW</option>
    <option value="benz">BENZ</option>
    <option value="hyundai" selected>현대자동차</option>
    <option value="kia">기아자동차</option>
</select>
</form>

 <fieldset> 태그

  입력 요소를 그룹핑하는 데 사용되는 태그이다. <fiedset>요소 안에는 다양한 입력 요소를 넣을 수 있으며 그룹의

  경계선에 선을 그려준다. <legend>태그를 사용하면 그룹에 제목을 붙일 수 있다.

<form>
    <fieldset>
        <legend>인적사항입력</legend>
        이름:         <input type="text"><br>
        전화번호:     <input type="text"><br>
        주소:         <input type="text">
    </fieldset>
</form>

 <label>태그

  <label>태그는 <input>요소를 위한 레이블을 정의한다. <label>태그의 속성 for를 사용하면 레이블과 <input>

  요소를 서로 연결할 수 있다. 마우스로 <label>을 클릭해도 <input>요소를 클릭한 것과 똑같은 효과를 낸다.

 파일 업로드 버튼

  사용자가 파일을 선택해서 서버로 업로드 해야 하는 경우도 상당히 많다. 이런 경우에 유용하게 사용할 수 있는 

  태그가 있다. 바로 <input type="file">이다. 이 버튼을 누르면 파일 이름을 선택하는 대화 상자가 화면에 등장한다.

  <form>태그에 속성으로 enctype=multi-part/form-data"를 추가하는 것이 좋다. 이것은 파일을 올바르게 업로드 하여

  준다.

<form action="proc_form.jsp">
    <label for="male">남성</label>
    <input type="radio" name="gender" id="male" value="male"><br>
    <label for="female">여성</label>
    <input type="radio" name="gender" id="female" value="female"><br>
    <input type="submit" value="제출">
</form>

 <input type="hidden">

  이 태그는 사용자가 입력하는 데이터는 아니지만 클라이언트 컴퓨터가 서버 컴퓨터로 특정한 데이터를 전송하고 싶은    경우에 많이 사용한다.화면에는 아무것도 나타나지 않고 사용자가"제출"버튼을 누를때, 서버로 <input type="hidden>

  요소의 name과 value 속성값이 전송된다.

<form enctype="multipart/form-data">
    <input type="file" accept="image/jpeg, image/gif">
</form>

HTML5 입력 요소

  HTML5에는 <input> 태그에 아주 많은 type 속성이 추가되었다. 가급적이면 새로운 입력 타입을 많이 사용하도록

  하자. 

 추가된 속성

  HTML5에서는 새로운 <input> 태그의 속성들도 많이 추가되었다. 몇 개만 살펴보자.

  + autocomplete: 자동으로 입력을 완성한다.

  + autofocus: 페이지가 로드되면 자동으로 입력 포커스르 갖는다.

  + placeholder: 입력 힌트를 희미하게 보여준다.

  + readonly: 읽기 전용 필드

  + required: 입력 양식을 제출하기 전에 반드시 채워져 있어야 함을 나타낸다.

  + pattern: 허용하는 입력의 형태를 정규식으로 지정한다.

 한눈에 보기

  전체 입력 양식을 한 페이지에 만들어 보자.

<!DOCTYPE html>
<html>
    <head>
        <title>html5form</title>
    </head>
    <body>
        <form>
            date: <input type="date" />  <br>
            datetime: <input type="datetime" />  <br>
            datetime-local: <input type="datetime-local" />  <br>
            month: <input type="month" />  <br>
            time: <input type="time" />  <br>
            week: <input type="time" />  <br>
            color: <input type="color" />  <br>
            email: <input type="email" />  <br>
            tel: <input type="tel" />  <br>
            search: <input type="search" />  <br>
            range: <input type="range" />  <br>
            number: <input type="number" />  <br>
            url: <input type="url" />  <br>
            <input type="submit" />
        </form>
    </body>
</html>

 search

  검색은 인터넷에서 가장 기본적인 행위이다. 검색이라 하면 반드시 구글이나 네이버에서의 검색만을 의지하지 않는다.

  검색을 위한 입력 양식이 하나의 타입이 되어도 전혀 어색하지 않다.

...
검색: <input type="search" name="search">
...

  input 요소의 타입을 search로 설정해도 타입이 text인 겨웅와 별반 다르지 않은 거 같지만 브라우저가 검색이라는

  것을 인식하면 좀 더 다르게 취급할 수도 있다.

 이메일 입력

  <input>요소의 type을 "email"로 지정하면 이메일 주소를 입력받을 수 있다. 이것도 마찬가지로 text 타입으로

  지정하는 것과 외양은 비슷하지만 required 속성을 설정하면 브라우저가 유효한 이메일 주소인지를 검사할 수 있다.

  유효한 주소 검사는 "제출" 버튼을 눌렀을 때만 실행된다.

...
이메일: <input type="email" name="email" required>  <br>
...

  실행 결과에서 질못된 이메일 주소에 대하여 브라우저가 경고 메세지를 표시하는 것을 볼 수 있다. 만약 좀 더

  정교하게 검사하려면 pattern 속성을 지정하면 된다. pattern 속성에는 정규식을 넣어준다.

  여러 개의 이메일 주소를 쉼표로 구분하여 입력하고 싶다면 muliple 속성을 지정한다.

 정규식

  정규식이란 특정한 규칙을 가지고 있는 문자열을 표현하는 수식이다. 정규식은 많은 텍스트 에디터와 프로그래민

  언어에서 문자열의 검색과 치환을 위해 사용되고 있다.

  먼저 정규 표현식은 /와 / 내부에 위치한다.

  많이 사용되는 정규식 패턴을 잘 모아놓은 사이트는 http://regexlib.com/ 이다. 참고하도록 하자.

 URL 입력

  url 타입은 웹 주소를 입력하기 위한 입력 필드를 생성산다. multiple이라는 속성을 사용하면 하나 이상의 URL도 

  입력 할 수 있다. 브라우저는 입력된 주소에 대하여 약간의 검증 작업을 한다. 검증 작업을 시키려면 required 속성을

  설정하도록 하자.

...
URL: <input type="url" name="url" required>  <br>
...

 전화번호 입력

  tel 타입은 전화번호를 입력하기 위한 필드를 생성한다. 전화번호는 브라우저에서 별다른 검증은 하지 않는데 이유는

  전세계적으로 너무 다양한 형태의 전화번호가 사용되고 있기 때문이다. 검증을 올바르게 하려면 pattern 속성에

  정규식을 지정해준다.

<form>
    전화번호: <input type="tel" name="tel" required pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}" title="####-####-####">  <br>
    <input type="submit" />
</form>

  입력 검증을 하려면 반드시 title에 올바른 입력 형태를 지정해야 한다. 위의 pattern에 입력된 정규식의 의미는

  "[0부터 9사이의 정수]를 4번 반복, -기호, [0부터 9사이의 정수]를 4번 반복, -기호, [0부터 9사이의 정수]를 4번 반복"

  이다.

 number

  <input> 요소의 type을 "number"로 지정하면 정수를 입력 받을 수 있다. max, min, step 속성을 이용해 최댓값,

  최솟값, 단계값도 지정할 수 있다. number 타입은 브라우저에 따라서 상당히 다르게 표시된다.

...
신발사이즈: <input type="number" min="230" max="290" step="10" name="shoesize" value="260">  <br>
...

 range

  <input>요소의 type을 "range"로 지정하면 어떤 범위에 속하는 정수를 입력받을 수 있다.

...
테니스 스킬: <input type="range" min="1" max="10" value="1">  <br>
...

 날짜

  인터넷에서 의외로 자주 사용하는 직업이 날짜를 입력하는 작업이다. 따라서 사용자가 날짜를 쉽게 입력할 수 있도록

  하는 것은 대단히 중요하다. HTML5에서는 브라우저 자체가 날짜를 선택하는 픽커 기능을 내장하고 있다.

  날짜와 시간을 입력하기 위한 <input> 요소의 소것ㅇ은 다음과 같은 종류가 있다.

  + date: 날짜 입력

  + month: 월 입력

  + week: 주 입력

  + time: 시간 입력

  +datetime: 날짜와 시간을 입력할 수 있는 양식 제공, 국제 표준 시간대

  + datetime-local: 날짜와 시간을 입력할 수 있는 양식 제공, 지역 표준 시간대

...
생일: <input type="date" name="dob"/>  <br>
...

  여기서도 min, max를 사용해 어떤 특정한 기간에서만 사용자가 날짜를 선택할 수 있도록 강제할 수 있다.

 

 시간입력

  시간을 입력할 수 있는 요소이다. 

...
시작시간: <input type="time" name="start-time"/>  <br>
...

 색상 입력

  <input> 요소의 type을 "color"로 지정하면 색상을 입력받을 수 있다. 인터넷 익스플로러는 아직 지원하지 않지만

  구글과 오페라는 다음과 같이 지원하고 있다.

   ...
   색상선택: <input type="color" name="color" />  <br>
   ...