유용한 HTML 태그

CSS 작성을 줄여주는 태그

1) progress

  - 진행률 표시줄 제공

  - 속성값 : max, value

    + meter 태그와 연관

       - 유저에게 값의 수준을 보여줌(값에 따라 색상이 달라짐)

       - 차이점 : 작업의 진행상황이 아닌 값의 상태만 전달

       - 속성값 : value, min, max, low, high, optimum(최적)

       - CSS pseudo classes를 활용해 커스터마이징 가능

         - optimum-value, suboptimum-value, even-less-good-value,,

       ex. 미세먼지를 수준 정도를 나타낼 수 있음

 

반응형

 

JS의 기능을 수행할 수 있는 태그

2) detail, summary

  - 유저의 클릭으로 정보를 보여주고 숨기는 기능

  ex. <details>

          <summary> 클릭 전 보여질 내용</summary>

           <span> 클릭 후 보여질 내용</span>

       </details>

  - open이라는 CSS 선택자를 이용해 클릭 여부에 따라 스타일 변경 가능

 

3) input type "week" "time"

  - week : 1년 중 주를 선택 가능

  - time : 하루 중 시간 선택 가능

  - 위젯을 유저의 디바이스에 따라 다르게 보여짐

 

4) picture

  - 유저의 장치나 환경에 따라 각기 다른 버전의 이미지 표시 가능

  - 브라우저가 이미지 형식을 지원하지 않는 경우 다른 제안 제공 가능

  - img 태그, source 태그와 함께 사용됨

  ex. <picture>

            <source srcset="src/파일명1.jpeg" media="(min-width:1200px)"/>

            <source srcset="src/파일명2.jpeg" media="(min-width:900px)"/>

            <source srcset="src/파일명3.jpeg" media="(min-width:500px)"/>

            <img src="src/파일명4.jpeg"/>

       </picture>

             - img 태그는 디폴트 값으로 브라우저가 pciture 혹은 source 태그를 지원하지 않는 경우 사용

             - img 태그는 브라우저가 크기, 경계를 가져와 source 태그에 포함시킨 이미지를 보여줄 때 사용됨

  - 유저가 보게 될 이미지만 다운로드한다는 장점이 있음

 

5) datalist

  - JS 없이 자동완성(Auto complete) 기능 구현 가능

  - JS로 구현시 : 유저 input(입력값) 가져오기, 옵션 필터, 결과값 보여주기, 클릭 리스닝 등

  ex. <input type="text" list="1245/>

       <datalist id="1245">

           <option value ="자동완성1"/>

           <option value ="자동완성2"/>

           <option value ="자동완성3"/>

           <option value ="자동완성4"/>        

       </datalist>

           * datalist의 id값과 input 태그의 list 속성값은 같아야함

  - 입력값에 단어를 포함한 옵션값에 따라 필터링됨(해당 단어로 시작할 필요 없음)

---

+ 대박 유용한 태그들을 알게되서 넘 좋다 특히 datalist 완전 잘 활용할 수 있을 것 같아서 빨리 적용해보고 싶다는 생각에 두근두근