WEB
HTML5 의 멀티미디어
HTML5 이전에는 오디오나 동영상을 브라우저에서 재생하기 위해 ActiveX 나 Flash 을 설치하는 등의 많은 수고가 필요했습니다. 하지만 HTML5 부터는 그럴 필요없이 HTML 문서의 일부로 오디오와 비디오를 추가시킬 수 있습니다.
Audio
<audio> 요소
<audio src="audio/old_pop.mp3" controls></audio>
<audio controls>
<source src = "./audio/old_pop.mp3" type="audio/mp3"/>
<source src = "./audio/old_pop.ogg" type="audio/ogg"/>
<source src = "./audio/old_pop.wav" type="audio/wav"/>
</audio>오디오 파일 형식
- mp3
- wav
- ogg
<source> 태그
오디오 파일의 형식에 따라 브라우저에서 실행되는 경우가 있고, 실행하지 못하는 경우가 발생합니다. 이럴 경우, 위 코드 처럼 <source> 태그를 활용해서 여러가지 파일 형식을 동시에 제공할 수 있습니다.
Video
<video> 요소
<video src="./video/movie.ogv" controls></video>
<video controls width="640" height="480">
<source src="./video/trailer.mp4" type="video/mp4">
<source src="./video/trailer.ogv" type="video/ogg">
<source src="./video/trailer.webm" type="video/webm">
</video>비디오 파일 형식
- mp4
- ogg
- webm
iframe ( inline frame )
웹페이지 내부에서 다른 웹페이지를 표시하고 싶을 때 사용합니다. 광고등을 이용할 때 사용하면 좋습니다.
<iframe src="../Day01/02_text.html" frameborder="1"></iframe>
<!-- 다른 서버의 웹문서도 포함 가능함 -->
<iframe src="http://tjdrjs0803.dothome.co.kr/index.html" frameborder="1"></iframe>
<iframe src="http://mrhi.or.kr" frameborder="0"></iframe>
<iframe src="" frameborder="1" name="aaa"></iframe>
<a href="http://www.w3c.org" target="aaa">월드 와이드 웹 공식 사이트</a>
<a href="http://www.google.com" target="aaa">구글</a>
<div> 와 <span>
HTML 요소들의 논리적인 섹션을 구분짓고 싶을 때 사용합니다. 거의 대부분의 웹 페이지들은 필수적으로 이 속성들을 사용하여 섹션을 구분짓습니다. 이 태그들의 자체적으로 의미를 가지지는 않지만, 여러 요소들의 그룹화 시키고 그룹끼리 구분짓고 싶을 때 사용한다고 보면 되겠습니다.
<div> 는 블록 수준의 요소로서 하나의 줄 전부를 차지하며, <span> 요소는 인라인 요소로, 컨텐츠의 크기 만큼 공간을 차지합니다.
<!-- div 의 블럭요소 특징 -->
<p>
안녕하세요 나는 <div style="color: blue">홍길동</div>입니다.
</p>
<!-- span 의 인라인 요소 특징 -->
<p>
안녕하세요 나는 <span style="color: blue">홍길동</span>입니다.
</p>
HTML 입력 양식
지금까지는 서버에서 데이터를 가져오는 예제만 보았습니다. 하지만 HTML 을 이용하여 서버에 데이터를 보내는 일도 가능합니다. HTML 입력 양식은 이를 도와줍니다.
<input> 요소
서버로 데이터를 보내기 위해서는 데이터가 준비되야합니다. 데이터는 사용자로부터 받아올 수 있으며, 사용자가 데이터를 입력하기 위해 사용할 수 있는 요소가 <input> 요소 입니다.
input 요소에는 라디오버튼, 체크박스, submit, 콤보박스 등등의 여러가지 type 이 존재하며, 각각의 상황에 맞추어 적당한 타입을 선택할 수 있습니다.
<form> 요소
<form> 요소는 anchor 요소와 마찬가지로 다른 html 문서를 실행할 수 있습니다. 다만, anchor 와는 다르게 데이터를 전달할 수 있다는 차이점이 있습니다. 데이터를 전달하기 위해서는 input 요소가 필요합니다.
GET 방식과 POST 방식
<form> 요소를 이용하여 데이터를 보내는 방식은 HTTP 메서드를 이용하는 방식이며 이에는 GET 방식과 POST 방식이 있습니다. input 요소를 이용하여 데이터를 입력받고, input 요소의 type 으로 submit 을 설정하면 입력받은 데이터들을 서버로 보낼 수 있습니다. 이때, input 요소의 name 속성을 꼭 설정해주어야 서버에서 각 데이터의 식별이 가능합니다.
- GET 방식
<form action="./getTest.php" method="get">
<input type="text" name="title">
<input type="text" name="message">
<input type="submit">
</form>- POST 방식
<form action="./postTest.php" method="post">
<fieldset>
<legend>POST 방식으로 HTTP 요청</legend>
<label for="in1">name : </label>
<input type="text" name="name" id="in1">
<br>
<label>
password : <input type="password" name="password">
</label>
<br>
<p>
gender :
<label><input type="radio" name="rg" value="male" checked>Male</label>
<label><input type="radio" name="rg" value="female">Female</label>
</p>
<p>
fruits :
<label><input type="checkbox" name="fruits[]" value="apple">사과</label>
<label><input type="checkbox" name="fruits[]" value="banana">바나나</label>
<label><input type="checkbox" name="fruits[]" value="orange">오렌지</label>
</p>
<p>
message :
<textarea name="message" cols="40" rows="5"></textarea>
</p>
<p>
<select name="brand">
<optgroup label="자동차 브랜드">
<option value="현대">현대</option>
<option value="기아">기아</option>
<option value="쌍용">쌍용</option>
</optgroup>
</select>
</p>
<input type="hidden" name="id" value="cha">
<div>
<input type="submit">
<input type="reset">
</div>
</fieldset>
</form>