에서 list 속성으로 를 연결하면 어떤 효과가 추가되나요?"> 에서 list 속성으로 를 연결하면 어떤 효과 | TTJ 코딩퀴즈"> 에서 list 속성으로 를 연결하면 어떤 효과가 추가되나요?"> 에서 list 속성으로 를 연결하면 어떤 효과 | TTJ 코딩퀴즈"> 에서 list 속성으로 를 연결하면 어떤 효과가 추가되나요?">
처리중입니다. 잠시만 기다려주세요.
퀴즈 / HTML / 문제

HTML <input type="range">에서 list 속성으로 <datalist>를 연결하면 어떤 효과가 추가되나요?

보통 MDN Web Docs
보기 및 정답
A 슬라이더 위에 특정 값 위치를 나타내는 눈금 표시(tick mark)가 나타난다
B 슬라이더가 드롭다운 목록으로 변경되어 사용자가 값을 선택하게 된다
C 슬라이더의 색상이 변경되며 datalist에 정의된 커스텀 테마가 적용되는 역할이다
D 슬라이더가 비활성화되어 사용자가 값을 조절할 수 없는 상태가 된다

해설

<input type="range">에 <datalist>를 연결하면, datalist의 <option> 값에 해당하는 위치에 시각적 눈금(tick mark)이 표시됩니다. 사용자가 특정 값의 위치를 직관적으로 파악할 수 있게 하며, 브라우저에 따라 스냅 동작도 제공합니다. 별도의 JavaScript 없이 슬라이더 UX를 개선할 수 있습니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기