[TIL] HTML 신기한 태그

HTML 신박한 태그!!

1. <progress></progress>

• 1줄로 진행률 표시줄을 제공

<progress value = "50" min = "0" max="100"></progress>

• max,value 속성이 있다 두개만 지정해주면 나머지 작업은 브라우저가 알아서 해준다.

• css로 추가 커스터 마이징이 가능하다.

• 자바스크립트로 동적 값 설정해서 다양하게 쓸 수 있다.

progress[value] ::-webkit-progress-bar{
    background-color: whitesmoke;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

 #progress[value]{
    appearance: none;
    border-radius: 15px;
    overflow: hidden;
    position : relative;
    display: flex;
    align-items: center;
 }

#progress[value]::-webkit-progress-value{
     background-image: linear-gradient(to left, #2ecc71, #3498db);
 }
}

2. <summary></summary>,<detail></detail>

• 유저의 클릭으로 정보를 보여주고 숨기는 패턴
• detail 태그를 열고, 그 안에 summary 태그를 사용하는 것
• summary 태그는 클릭 가능한 영역 -> 유저가 클릭전에 보는 내용
• summary 태그 후에 나오는 내용은 유저가 클릭한 후에 표시

 <details>
     <summary>오늘은 점심은???? 클릭해봐!</summary>
    무엇을 먹을까 고민해보자<br/>
    한식, 일식, 중식, 양식 그중의 최고는 국밥이였다네.
</details>

오늘은 점심은???? 클릭해봐!

무엇을 먹을까 고민해보자
한식, 일식, 중식, 양식 그중의 최고는 국밥이였다네.

• 유저의 클릭여부에 따라서, 스타일 변경하는데 사용 가능

details{
     width: 300px;
}
details[open]{
    background-color: #cdedfd;
     background-image: linear-gradient(
        319deg,
        #cedefd 0%,
        #ffec82 37%,
        #ffcfd2 100%
    );
}

3. 달력, 날짜 선택기, 시간

• 예약 관련 기능 개발시 유용하다.
• 위젯은 유저의 디바이스 마다 다르다

<input type="date"/>


<input type="month">


<input type="week">


<input type="time">

4. <picture></picture>

• 유저의 장치나 환경에 따라 각기 다른 버전의 이미지를 표시할 수 있다.
• 모바일 유저에게 낮은 품질의 이미지를 제공해 로딩 속도를 빠르게 한다거나, 브라우저에서 이미지 형식을 사용하지 않으면 대안을 제공할 수 있다.
• <source/>, <img/> 태그와 함께 사용됨
• <img/> 태그는 디폴트 값으로 사용된다.(브라우저가 picture, source 태그를 지원하지 않을 시)
  

화면 크기를 줄여보세요~

• 이미지 3개를 다운로드 해서 1개만 보여주는 것이 아니라 유저가 보게될 1개의 이미지만 다운로드함

<picture>
        <source srcset="https://images.unsplash.com/photo-1642019113710-9af01da6be2f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60" media="(min-width:1200px)">
        <source srcset="https://images.unsplash.com/photo-1642425149556-b6f90e946859?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60" media="(min-width:900px)">
        <source srcset="https://images.unsplash.com/photo-1642372131426-f811f00a1920?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60" media="(min-width:400px)">
        <img src="https://images.unsplash.com/photo-1640622332859-55e65253475d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwyNnx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60"/>
</picture>

5. <datalist></datalist>

• JS 작성 없이 Auto Complete를 가능하게 한다.
• 자바스크립트로 자동완성 하려면 인풋값 가져오고 옵션 필터하고 결과값 보여주고 너무 많은 리소스가 있다.

5.1 사용법

1. datalist 태그를 만들고 아이디를 가져야 하는데 해당 Id와 input의 'list' 속성 값을 똑같이 준다.
2. datalist 안에서 옵션 태그를 쓴다(auto complete 옵션을 지정하기 위해서)

What is your favorite food?(click or write)

<label for="movie">What is your favorite food?</label>
    <input type="text" list="movie-options"/>
    <datalist id="movie-options">
        <option value="pizza"/>
        <option value="Kukbab"/>
        <option value="apple"/>
        <option value="banana"/>
        <option value="noodle"/>
        <option value="steak"/>
        <option value="Kimbap"/>
        <option value="soju"/>
        <option value="beer"/>
        <option value="mcdonald"/>
    </datalist>

• input 클릭시 auto complete 옵션이 보일 것이고 타이핑 하는 순간 결과 값이 자동으로 필터가 된다(필터는 시작 값이 아니라 단어를 포함한 옵션값)