<progress>
progress Tag는 진행률을 나타낼 수 있는 태그다.
progress Tag Example
progress Tag는 3가지의 속상을 가지며, min과 max를 통하여, 진행바의 최소 최대 크기를 지정해주고 value로 현재 진행률을 지정해준다.
progress Tag는 CSS랑 같이 사용할 수도 있다.
<!-- option value : 현재 상태 값, min : 최소, Max : 최대 -->
<progress value = "80" min = "0" max = "200"></progress>
<Details>
details Tag는 Toglelist를 Html만으로 구현할 수 있다.
details Tag Example
PINO
PINO IS Student
details Tag는 아래와 같이 작성하여 Toggle을 만든다.
<details> 안에 <summary>는 Toggle에 보이는 텍스트를 작성하고, 그 아래의 내용들은 전부 Toggle로 숨겨지는 내용들이다.
<details>
<summary>PINO</summary>
<p> PINO IS Student
</details>
<datalist>
datalist Tag는 HTML만으로 자동 완성 기능을 구현할 수 있는 Tag다.
datalist Tag Example
영화 검색 기능
datalist Tag는 id값을 만들어 연결하고 싶은 input tag에 list 속성을 id 값으로 연결한다.
그리고 <datalist> 안에 <option>을 이용하여 자동 완성 옵션을 생성한다.
<h4>영화 검색 기능</h4>
<input type = "text" list = "result"/>
<datalist id = "result">
<option value = "해리포터"/>
<option value = "디워"/>
<option value = "트랜스포머"/>
<option value = "아이언맨"/>
</datalist>