[HTML] HTML Tags (3) 동영상, Form, 레이아웃 태그

2019. 3. 1. 01:15ㆍ프로그래밍 언어/HTML & CSS

폼 태그와 레이아웃 태그는 중요한 태그이므로 확실하게 익힐 수 있도록 한다.

1. 비디오 태그

<video controls="controls">

<source src="URL" type="video/mp4" />

</video>

<source> 미디어 요소, 여러 미디어 리소스를 지정하는 데 사용됩니다 <video> ,<audio> .

2. Form 태그

사용자로 부터 어떤 정보를 입력받아 서버로 전송하기 위해 사용하는 태그

<form action="#" method="get">

</form>

5 = HTML5에서 새롭게 추가된 속성

속 성	값	설 명
accept	file_type	HTML5에서 더이상 사용되지 않는 속성 서버에서 받을 수 있는 파일 유형을 콤마로 구분된 리스트를 나타냄.
accept-charset	character_set	폼 제출을 위해 사용될 수 있는 문자셋을 지정함.
action	URL	입력된 form-data가 어디로 보내질지 나타냄.
method	get	주소창에 서버로 전송되는 데이터가 노출됨. 전송값이 노출되어도 무관한 간단한 검색 등에 사용.
method	post	아이디, 패스워드 값과 같이 노출되면 안되는 민감한 데이터 전송시 사용.
autocomplete 5	on / off	자동완성을 설정할지 안할지 지정
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	폼 데이터가 서버로 전송될 때 어떤 방식으로 인코딩 되어야 하는지 지정함. ( POST 방식일때만 사용하는 속성 )
name	text	폼 이름을 지정
novalidate 5	novalidate	폼 데이터가 전송될 때 양식의 유효성을 검사하지 않도록 함.
target	_blank _self _parent _top	제출된 폼에 대한 서버의 Response를 어디에서 보여줄것인지

<input> 태그를 이용해 폼 데이터를 입력받을 항목을 지정해 줄 수 있다.

예전엔 <table> 태그를 이용해 웹 페이지의 레이아웃을 구현했으나, 최근에는 <div> 와 <span> 태그를 이용해 레이아웃을 구현한다.

<div> 태그는 블럭 요소이다. 개행 태그가 없어도 마치 블럭을 쌓듯이 차곡 차곡 행을 차지하며 레이아웃을 구성한다.

<body>
    <div>block_01</div>
    <div>block_02</div>
    <div>block_03</div>
    <div>block_04</div>
</body>
cs

<p> , <ul>.<li> , <ol>.<li> ...

<span> 태그는 인라인(inline) 요소이다. 태그 요소들이 하나의 라인으로 옆으로 붙여나가는 방식으로 레이아웃을 구성한다.

1
2
3
4
<span>item1</span>
<span>item2</span>
<span>item3</span>
<span>item4</span>
cs