HTML 태그 5 가지

# 본 글은 '노마드 코더 (Nomad Coders)' 유튜브를 보며 간단히 개인적으로 정리한 내용입니다

 

CSS 를 적게 작성하는데 도움주는 태그

 

* <progress></progress>

- 1줄로 진행률 표시줄을 출력해준다..

- 속성 : value, min, max

- css로 추가 커스터마이징 가능함.

- metter 태그와 밀접하게 관련되어 있다.

- 예시 : <progress value="50" min="0" max="100"></progress>

 

 

* <meter></meter>

- 유저에게 값의 수준을 보여준다.

- 값의 수준에 따라 색상 변경된다.

- 속성 : min, max, low, high, optimum, value

- 예시 : <meter value="20" min="0" max="100" low="20" high="65" optimum="15"></meter>

 

 

* <details></details>

- detail 태스에는 'open' 이라는 CSS selector가 있다.

- 클릭 여부에 다라 스타일 변경 가능함.

- summary, span 태그와 함게 사용된다.

- 예시 :

테스트 맞아? 클릭해봐

응 테스트야

 

 

* <picture></picture>

- 각기 다른 버전의 이미지를 표시할 수 있다.

- (유저 장치나 환경에 따라)

- 모바일 환경에서는 저화질의 이미지를 출력하는데에 사용할 수 있다.

- (아무래도 더 빨리 로딩 가능하겠지?)

- img, source 태그와 함께 사용된다.

- source : 조건, img : 디폴트

- 브라우저가 picture 또는 srouce 같은 태그를 지원하지 않는 경우 디폴트 img 사용된다.

- 예시 : 

창 width 사이즈에 따라 (500,900,1200) 유튜브/구글/네이버 이미지가 보여지게 됨

 

 

* <datalist></datalist>

- Javascript 작성 없이, Auto complete (자동완성) 기능을 가능하게 한다.

- 사용방법 : 1. input (입력값)을 가져야한다.

-     2. datalist를 만들고 id를 부여해야 한다.

-     3. 해당 id에 input의 list 속성값은 준다.

-     4. datalist 안에서 option 태그를 사용한다.

- 결과 : input 클릭 시 입력 가능한 옵션이 자동으로 출력된다.

-     그 후, 유저가 타이핑 시 결과값도 자동으로 필터 될 것이다.

-     첫글자가 아닌 포함된 결과를 필터링한다.

- 예시 :

What is your favorite movie?