Search

개발자 99%가 모르는 신박한 HTML 태그 5개!

subject
HTML
date
2022/01/26
1 more property
HTML은 매번 쓰는 것만 쓰게 되는데, 처음 보는 태그들이 진짜 많았다. 태그를 잘 쓰는 것이 사이트의 구조화를 잘 하는 방법이라고 생각하는데, 적재적소에 맞는 태그들을 잘 사용해야 겠다
<progress> : 진행상황을 보여주는 태그
max
min
value
<meter> : 값에 따라 막대그래프?를 보여주는 태그 - 값의 상태를 보여줌 (ex. 미세먼지 레벨)
min
max
low
high
optimum
value
<details> , <summary>: collapse UI 를 표현하기 쉽게 해줌
summary: 클릭 가능한 영역
summary 이후 태그: 클릭한 후 보여지는 영역
→ 이거 실제 사용하는 곳 어쩌다 발견했다. https://getcssscan.com/ 이 곳
details, summary, p로 구성
날짜와 관련한 input type 종류
date, month, week, time
<picture> : 유저의 장치나 환경에 따라 각기 다른 버전의 이미지 표시
ex. 모바일 유저에게는 화질 낮은 이미지로 빠른 로딩 속도 확보
<img>, <source> 태그와 함께 사용됨
media 조건에 따라 다른 이미지를 제공
source 태그 지원하지 않는 경우 디폴트로 img 태그에 있는 src 사용
<datalist> : js 없이 자동완성 제공
<input> 과 함께 사용
input의 list 속성과 datalist의 id 속성값이 반드시 동일해야함