동영상을 출력하는 태그(video)
<video></video>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TITLE</title>
</head>
<body>
<video controls="controls" width="500">
<source src="C:\Users\hobby\Videos\Captures\123.mp4" type="video/mp4" />
</video>
<video
src="C:\Users\hobby\Videos\Captures\123.mp4"
controls="controls"
width="500"
></video>
</body>
</html>
음악을 추가하듯이 비디오도 똑같이 해주면 됨
폼 태그(form)
회원등록 할 때 많이 접함
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TITLE</title>
</head>
<body>
<form action="#" method="get">
이름: <input type="text" name="uname" /><br />
아이디: <input type="text" name="uid" /><br />
비밀번호: <input type="password" name="upw" /><br />
연락처: <input type="text" name="uphone1" size="5" />-
<input type="text" name="uphone2" size="5" />-
<input type="text" name="uphone3" size="5" /><br />
사진: <input type="file" name="upic" /><br />
성별구분:<input type="radio" name="gender" value="m" />남
<input type="radio" name="gender" value="w" />여<br />
사용언어:<input
type="checkbox"
name="lan"
value="kor"
checked="checked"
/>한글, <input type="checkbox" name="lan" value="eng" />영어,
<input type="checkbox" name="lan" value="jap" />일어,
<input type="checkbox" name="lan" value="chi" />중국어<br />
자기소개: <textarea cols="20" rows="5">간단하게 입력하세요.</textarea
><br />
국적:
<select>
<option>KOREA</option>
<option>USA</option>
<option>JAPAN</option>
<option>CHINA</option></select
><br />
좋아하는 음식:
<select multiple="multiple">
<option>김치</option>
<option>불고기</option>
<option>파전</option>
<option>비빔밥</option></select
><br />
<input type="submit" />
</form>
</body>
</html>
<form></form>
-action: 정보가 어디론가 갈 때 주소 기입
-method: get/post 방식이 있음. 정보가 가는 방식(입력을 안할 경우 defalut은 get)
get: 도메인 주소에 내가 입력한 값의 정보가 나타남(보안 취약, 페이지 넘어갈 때)
post: 도메인 주소에 내가 입력한 값의 정보가 나타나지 않음(회원 정보 등록, 로그인 등 노출되지 말아야할 정보를 넘길 때 사용)
<input/>: 값을 넣을 때 태그
-type: 입력 창 타입을 정해줌
text: 일반 텍스트, password: 글자가 은닉화 됨, file: 파일 넣을 때, submit: action에 있는 주소로 정보 전송
radio: n개 중에 한 개만 유일하게 선택해야할 때, value값이 전송됨), checkbox: 여러 개 선택할 때(value 값이 전송됨, defalut로 체크 표시 되어 있게 할 때, checked="checked"를 씀)=>한 묶음일 경우 name을 같게
-name: 각 입력 창의 고유 식별 이름
-size: (속성값)만큼 글자 칸 크기 설정
<textarea></textarea>: 여러줄 입력
-rows: (속성값)만큼 행
-cols: (속성값)만큼 열
<select></select>: 선택 태그, 여러 개 선택할 수 있게 하려면 multiple="multiple"
ㄴ> <option></option>: 옵션 태그(select랑 같이 쓰임)
이렇게 입력을 하고 get 방식으로 제출할 경우
이렇게 ?뒤에 각 name="입력 값" 이렇게 표시가 된다
레이아웃 구성 태그(div, span)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TITLE</title>
</head>
<body>
<div>divblock1</div>
<div>divblock2</div>
<div>divblock3</div>
<div>divblock4</div>
<p>pblock</p>
<ul>
<li>liblock1</li>
<li>liblock2</li>
</ul>
<span>inline1</span>
<span>inline2</span>
<span>inline3</span>
</form>
</body>
</html>
html은 영역을 크게 블럭 요소와 라인 요소로 나뉠 수 있다
<div></div>: 블럭 형식(한 개가 끝나면 엔터 친 듯 아래로 내려감, 수직방향)으로 태그, 또 다른 예: li, p
<span></span>: 라인 형식(한 개가 끝나면 옆으로 이어짐, 개행이 되지x)