TAG

progress

• 진행상황을 나타낼 때 사용

<Progress value="10" min="0" max="100"></Progress>

<style>
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, #2ecc75, #3495db);
}
</style>

meter

• 작업의 진행 상황은 전달하지 않음
• 값의 상태 전달
• 수치를 표현할 때 사용

<meter min="0" max="100" low="20" high="65" optimum="15" value="10"></meter>

<style>
::-webkit-meter-inner-element {
	// 미터 요소를 읽기 전용으로 렌더링
}

::-webkit-meter-bar {
	// 전체 값을 보유하는 미터 컨테이너
}

::-webkit-meter-even-less-good-value {
	// value 속성이 low-high 범위를 벗어나면서 최적의 값(optimum) 반대 영역에 있는 경우
    // ex. value < low < high < optimum 또는 value > high > low > optimum
}

::-webkit-meter-optimum-value {
	// 미터 요소의 현재 값
    // value 속성이 low-high 범위 내에 있으면 기본값은 녹색
}

::-webkit-meter-suboptimum-value {
	// value 속성이 low-high 범위를 벗어날 때
    // 기본값은 노란색
}
</style>

details / summary

• 유저의 클릭으로 정보를 보여주고 숨길 수 있음
• summary는 유저가 클릭하기 전 볼 수 있는 영역
• summary 이후의 태그는 유저가 클릭한 이후에만 표시

<details>
	<summary>What is always coming, but never arrives?</summary>
    <span>Tommorow</span>
</details>

<style>
details[open] {
	background-color: #cdedfd;
	background-image: linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 1
}
</style>

input

• 달력 혹은 날짜 선택기 기능 구현 가능
• 브라우저 환경에 따라 UI가 다름

<input type="month">
<input type="week">
<input type="date">
<input type="time">

picture

• 유저의 장치나 환경에 따라 각기 다른 버전의 이미지를 표시
• 해상도에 맞는 이미지를 표시함으로써 로딩 속도 개선 가능
• 3개 이미지를 다운로드 후 1개만 보여주는 방식이 아닌, 유저가 보게 될 1개의 이미지만 다운로드 되는 것
• 브라우저가 이미지 형식을 지원하지 않는 경우 다른 대안 제공 가능
• 브라우저가 포맷 지원, 장치, 크기 등을 확인해줌
• img, source 태그와 함께 사용
• img 태그는 1)default로 브라우저가 picture, source 태그를 지원하지 않는 경우 2)브라우저가 크기, 경계를 가져와서 source 태그에 포함시킨 이미지를 보여줄 때 사용됨

// Picture 태그가 이미지를 제공하는 로직
if(첫번째 source를 지원하면) {
	첫번째 이미지 출력
} else if(두번째 source를 지원하면) {
	두번째 이미지 출력
} else {
	기본 이미지 <img> 출력
}

// 해상도에 따른 이미지 제공
<picture>
	<source srcset="src/01.jpeg" media="(min-width:1200px)" />
	<source srcset="src/02.jpeg" media="(min-width:900px)" />
	<source srcset="src/03.jpeg" media="(min-width:500px)" />
    <img src="src/04.jpeg" alt />
</picture>

// 브라우저에서 이미지 형식을 지원할 경우 우선 순위에 따라 이미지 제공
<picture>
	<source srcset="x.avif" type="image/avif" />
	<source srcset="x.webp" type="image/webp" />
    <img src="x.jpg" alt />
</picture>

// 레티나 디스플레이: 일반적인 이미지보다 두 배 더 큰 이미지를 제공해서 강제로 작게 리사이징 후 화면에 출력하여 더 선명한 이미지를 제공하는 방식
// 아래와 같이 작성할 경우, 레티나 디스플레이에서는 2배수 이미지를 제공하고 그렇지 않은 경우 1배수 이미지를 제공함
// img 태그로도 사용 가능. img 태그에서는 src를 통해 폴백 이미지 제공
// 폴백이란? 별도 코드가 설정되어 있지 않은 경우 적용되는 기본값
<picture>
	<source srcset="2x.webp 2x, 1x.webp" type="image/avif" />
	<img srcset="2x.jpg 2x, 1x.jpg" src="1x.jpg" alt />
</picture>

datalist

• Auto complete (자동완성) 구현 가능
• datalist의 id 값과 동일하게 input 태그에 list 속성값 부여
• 입력한 단어를 포함한 옵션값에 따라 필터링 됨

<label for="movie">What is your faborite fruits?</label>
<input type="text" list="movie-options" />
<datalist id="movie-options">
	<option value="Graph" />
	<option value="Banana" />
	<option value="Strawberry" />
	<option value="Apple" />
	<option value="Melon" />
</datalist>