[HTML] HTML 알아두면 좋은 태그

<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>