programming/html-css

[HTML/CSS] 멀티미디어와 입력 양식

4. 멀티미디어와 입력 양식


4.1 오디오

<audio src="오디오파일" autoplay controls>

- 오디오 파일은 mp3, wav, ogg 등이 지원됨

- controls : 화면에 제어기가 표시됨


4.2 비디오

<video src="비디오파일" autoplay controls>

비디오파일은 mp4, webm, ogg 등이 지원됨


4.3 iframe

inline frame, 웹페이지 내부에 다른 웹페이지를 표시할 경우 사용

<iframe src="웹페이지경로" width="가로길이" height="세로길이"></iframe>


4.4 <div> divide, 페이지를 논리적인 섹션으로 분리할 때 사용


4.5 <span> 줄바꿈이 없는 태그


4.6 html 입력 양식

<form action="수신주소" method="전송방식">

전송할 데이터들

</form>


4.7 데이터의 전송방식

4.7.1 post 방식

body를 통해 정보 전송

정보가 주소창에 노출되지 않음

대용량 자료 전송 가능


4.7.2 get 방식

데이터를 header에 붙여서 전송(주소창에 표시)

기본적인 방식, 보안에 취약

http://localhost/login.jsp?userid=kim&passwd=1234

QueryString(쿼리스트링)

url에 덧붙여서 전달되는 데이터, 물음표 뒤의 데이터들

?변수명=값&변수명=값

jsp 프로그램에서 받을 경우 : request.getParameter("변수명")


4.8 입력 태그 <input>

<input type="종류" value="텍스트" name="변수명">

input type의 종류 : text, password, button, submit(제출버튼), reset(데이터 초기화 버튼), radio, checkbox, image 등


4.9 입력 태그 <textarea>

<textarea rows="행의 수" cols="열의 수" name="변수명">내용</textarea>


4.10 숨김 데이터 태그 <input type="hidden">


4.11 실습예제


4.11.1 media.html (html5 멀티미디어 태그)

4.11.2 iframe.html

4.11.3 inner.html

4.11.4 div1.html

4.11.5 radiof.html

4.11.6 radiof_result.jsp

4.11.7 checkf.html    3325

4.11.10 buttonf_result.jsp

4.11.11 imageb.html

4.11.16 fieldset.html

4.11.17 html5form.html

4.11.18 tel.html

4.11.19 range.html

4.11.20 color.html

4.11.21 progress.html