HTML 에서 list 속성으로 를 연결하면 어떤 효과가 추가되나요?

Q: HTML 에서 list 속성으로 를 연결하면 어떤 효과가 추가되나요?

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

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를 개선할 수 있습니다.

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

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

정규반 살펴보기

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

해설

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

관련 문제

시장과 사람의 답을 봤다면,다음 결과물의 구조를 고릅니다.

시장과 사람의 답을 봤다면,
다음 결과물의 구조를 고릅니다.