[웹 소프트웨어] Lec. 3: HTML Multimedia, Block and Form

3/14

 

Part1. HTML Block

두개의 display 값: block, inline

block

• <h1>~<h6>, <p>, <hr>, <ul>, <ol>, <li>, <table>, <div>
• 하나의 줄을 점유한다.(start on a new line)

inline

• <a>, <img>, <b>, <strong>, <i>, <em>,<sub>,<sup>,<span>,<label>
• 줄의 일부를 점유한다.(not start on a new line)

 

<div>를 이용하여 스타일을 설정할 수 있다.(css 사용한 것과 유사)

 

Part2. HTML Multimedia elements

Multimedia란?: audio, video 등등 다양한 format

이전엔 Adobe Flash[1]를 사용해서 embed multimedia를 이용

 

오디오 예시

<audio src="media.mp3" autoplay controls>

src는 source

autoplay는 자동재생

controls는 조작 메뉴(정지, 일시정지, 재생 등)

 

비디오 예시

<video src="video.mp4" autoplay controls>

 

+요즘은 유튜브에서 링크를 이용하여 가져오기도 한다.

 

Part3. HTML Form elements

<form>: 유저 입력을 모으기 위한 형태를 정의한다. 유저 입력은 서버로 전송된다.

Tag	Description
<input>	글을 쓸 수 있는 작은 공간을 정의한다. 여러 element가 있다. (기본)
<textarea>	글을 쓸 수 있는 공간을 정의한다.
<label>	input에 대한 라벨을 정의한다.
<fieldset>	관계된 element들의 그룹을 짓는다.
<legend>	filedset의 부분을 정의한다.
<select>	drop-down 메뉴를 만든다.
<option>	drop-down의 각 옵션을 정의한다.
<button>	클릭 가능한 버튼을 만든다.
<datalist>	먼저 정의된 옵션의 리스트.

 

<form>의 구동 방법

1. 사용자의 브라우저
2. form에서 형식에 따라 서버로 정보를 전송한다.
3. 웹 서버에서 처리하고
4. 답변을 돌려보낸다.

action 속성은 submit되었을 때의 반응을 정의한다.

 

보내는 방식은(method) post와 get이 있다.

url이 get방식, HTTP는 post 방식

 

 

---

[1] 그 플래시게임의 플래시 맞다.