4강 : HTML 기본3

4-1. 동영상을 출력하는 태그 - video

---

웹사이트에서 비디오를 출력해주는 태그이다.

 

- video 태그의 속성

src : 사운드 파일이 저장되어 있는 경로의 주소를 넣어준다.

autoplay : 자동 재생 여부 설정

loop : 반복 재생 여부 설정

controls : 컨트롤러 추가 여부 설정

 

<video src="비디오 파일 경로" type="video/mp4" controls="controls"></video>

 

하지만..

video 태그보다는 iframe 태그를 이용한 youtube 영상 업로드를 더 많이 쓸듯하다..

 

- iframe 태그 : 웹페이지 안에 다른 웹페이지를 표출하는 태그

유튜브 동영상에서 우클릭하고 '소스 코드 복사' 클릭

영상 우클릭 시 뜨는 창

<iframe width="1280" height="720" src="https://www.youtube.com/embed/6KoBEYBjki4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

 

4-2. 폼 태그 - form, input, label

---

중요!!

회원가입과 같은 사용자의 입력을 필요로 할 때 사용된다.

 

• form 태그

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

 

- form 태그의 속성

action : 폼을 전송할 URL을 입력한다.

method : 폼에 전송할 방식을 지정한다. GET방식과 POST방식이 있다.

autocomplete : 폼 내부에 자동완성기능 사용 여부 결정

 

여기서..!!

GET방식과 POST방식에 대해 간단히 알아보자

 

-GET 방식 : URL로 값을 받는 방식 - 주로 서버에서 받아오는 방식(페이지 검색, 조회)에 사용

- POST 방식 : 서버에 값을 URL이 아닌 숨겨져서 보내지는 방식 - 주로 서버에 올리면서 수행하는 방식(글쓰기, 로그인 등과 같이 서버의 값을 변화시키는 작업)

 

GET 방식은 정보 은닉이 불가능하고, POST 방식은 정보 은닉이 가능

자세한 내용은 나중에 Django 게시글을 올리면서 더 보완을 할 것이다.

 

 

• input 태그

<input type="text" name="uname" />

 

input 요소는 텍스트 입력, 전송 버트, 라디오 버튼, 체크 박스 등 여러가지가 있다.

type 속성으로 수행되는 역할이 달라진다.

 

- text : 일반문자
- password : 기호 (*****와 같이 표시된다.)
- file : 파일 선택 시 사용
- radio : n개 중 1개만 사용할 때 (name은 같지만 value는 다르게 해준다.)
- checkbox : n개 중 n개 선택 가능(옵션 checked를 이용해 기본적으로 체크되어 있게 할 수 있다.)

name 속성은 데이터가 서버로 전송될 때 할당되는 변수의 이름이다.

만약 name이 'abc'이고, 해당 form의 method가 GET일 경우 URL 주소에는 'abc=값'이 붙어서 전송된다.

type이 submit인 input 태그를 클릭할 경우, 해당 폼에 입력된 값들이 서버로 전송이 된다.

 

보통 form 태그 안에서 이런 저런 input 태그로 입력을 받고 마지막에는 input 태그의 type을 submit으로 주어서 폼을 서버에 제출한다.

 

 

• textarea 태그

<textarea rows="5" cols="20">간단하게 입력하세요.</textarea>

 

row와 cols를 이용해 크기를 지정해준다.

보통 text type보다 많은 내용(자기 소개 등)을 입력 받을 때 사용한다.

 

 

• select 태그

여러 option 중 하나를 선택하고자 할 때 사용한다.

출력되는 형태는 밑에서 보는 것처럼 drop down 방식이다.

 

checked 옵션을 해놓으면 해당하는 option 태그 내용이 선택된 상태로 페이지가 업로드 되고,

그렇지 않으면 디폴트는 첫 option 태그가 선택된 상태로 페이지가 업로드 된다.

<select>
      <option>KOREA</option>
      <option>USA</option>
      <option>JAPAN</option>
      <option>CHINA</option>
</select>

기본적인 select 태그

multiple 옵션 사용시 여러개를 동시에 선택할 수 있게 해준다.

<select multiple="multiple">
      <option>김치</option>
      <option>불고기</option>
      <option>파전</option>
      <option>비빔밥</option>
</select>

multiple  옵션 사용

 

 

4-3. 레이아웃 구성 태그 - div, span

---

레이아웃을 구성하는 태그로 div 태그와 span 태그가 있다.

 

div 태그는 블록 형식으로 <br />을 이용해 개행하지 않더라도 개행하여 밑으로 차곡차곡 붙는다.

<div>block_01</div>
<div>block_02</div>
<div>block_03</div>
<div>block_04</div>
<div>block_05</div>

밑으로 차곡차곡

 

span 태그는 라인 형식으로 옆으로 쭉 나열된다.

<span>inline_01</span>
<span>inline_02</span>
<span>inline_03</span>
<span>inline_04</span>
<span>inline_05</span>

옆으로 쭉

 

 

 

출처

https://www.inflearn.com/course/html-css-%EA%B0%95%EC%A2%8C#

인프런 실전 HTML & CSS 강좌

 

http://webberstudy.com/html-css/html-3/form-1/