기초) HTML5 추가 요소(input/video 등) 정리

 

 

 

<Input>

 

<ul>

<li input type="color"> color </li>

<li input type="date"> date </li>

<li input type="datetime"> datetime </li>

<li input type="datetime-local"> datetime-local </li>

<li input type="month"> 월 선택 </li>

<li input type="week"> 주 선택 </li>

<li input type="time"> 시간 선택 </li>

<li input type="email"> 이메일 키보드 생성 </li>

<li input type="number"> 숫자 키보드 생성 </li>

<li input type="range"> 슬라이더 범위 선택 </li>

<li input type="search"> 검색어 입력 </li>

<li input type="tel"> 전화번호 입력 </li>

<li input type="url"> 도메인 입력 </li>

</ul>

 

 

---

 

 

<picture>

 

 

<picture>
    <source media ="(min-width:800px)" srcset= "images가 800px 이상.jpg">
    <source media ="(min-width:350px)" srcset= "images가 351~799px 사이.jpg">
    <img src="타쿠.jpg" alt="size test">
</picture>

 

media 쿼리를 적용하여

반응형으로 만들 수 있다

 

디바이스별

알맞은 사이즈를 확인!

 

---

 

<video>

 

 

속성으로

 

controls :

컨트롤 박스가 나온다

 

autoplay :

브라우저가 읽히자마자

바로 플레이

 

loop :

동영상 반복

 

preload :

재생전에 파일을 다운로드할 것인지

일부만 받을 것인지 결정하는 것

설정값으로

auto/metadata/none이 있다.

 

가로 세로 사이즈 속성 넣을 수 있다.

(width/height)

 

<video controls autoplay loop preload="none" width="500px" height="300px">
      <source src="타쿠대디.mp4" type="video/mp4">
</video>

 

 

---

 

<audio>

 

 

비디오와 세팅은 동일.

 

가로 세로 사이즈는

필요 없으니 없애준다.

 

<audio controls autoplay loop preload="none">
      <source src="타쿠대디.mp3" type="audio/mp3">
</audio>