html 기초

video , audio( 거의 동일 )
<video src ="dog.mp4" controls width="500" autoplay muted />

controls - 재생과 정지버튼으로 조작가능
loop - 무한 반복(="5" 와 같이 횟수지정가능)
autoplay - 접속하자마자 바로 동영상재생(브라우저의 정책상 음소거를 해줘야함)
muted - 음소거기능 (autoplay 와 함께 사용)
Poster - 동영상이 로딩되고 있을때 보여줄 이미지 저장
preload - 브라우저가 미리 동영상을 다운받도록함
metadata - 사용자가 재생시키기전까지는 비디오의 크기,첫프레임, 비디오관련 정보와 같은 메타데이터만 다운
none - 재생을 시작하기 전까지 비디오를 다운하지 않음

source - 브라우저에서 오디오파일이 지원되지 않는 경우를 대비

soure 사용 예시)
<audio controls autoplay>
<source src="song.mp3" type="audio/mp3">
<source src="song.ogg" type="audio/ogg">
</audio>


<video controls autoplay muted width="500" loop="2">
<source src ="dog.mp4" type="video/mp4" />
이 브라우저는 비디오태그를 지원하지 않습니다.
</video>

 

 

See the Pen Untitled by kimsuhan (@codingbook) on CodePen.

 

 

 

form태그 - 사용자에게 값을 받을 수 있는 태그
<form action="서버경로" method="get/post> //get,post 둘중하나 사용
</form>

<input type="text" name="userId" /> / 
form - input으로 받은 데이터를 받아오는 태그

input 속성
type으로 어떤값을 받아올지 지정 / name으로 내용 확인 / value로 값 확인 / placeholder 셀에 대한 설명 / required 값을 필수적으로 입력하도록 지정함 / disabled 화면에는 보이지만 입력이 안됨(비활성 상태)


type 속성
type / 다양한 값을 입력받도록함
password / 암호화되어 나옴
reset / input안에 있는 내용들을 모두 초기화
sumit / input안에 있는 내용들을 form으로 전송
redio / 하나만 선택할 수 있는 버튼의 타입(다수중 1개) - 구분을 위해 value를 다르게 입력
checkbox / 여러개를 선택할 수 있는 체크박스 형태(구분을 위해 name을 다르게 입력)
color / 색상 선택 가능
file / 파일 이름을 입력하는 창을 생성
number / 숫자 입력 가능 min="" max="" 범위 지정가능
hidden / 사용자의 눈에는 안보이지만 정보확인을 위해 사용(받은 값 확인가능)
email / 셀의 형식이 이메일인지 확인해준다.

 

 

See the Pen Untitled by kimsuhan (@codingbook) on CodePen.