728x90
[HTML] 볼륨 조절 하는 것 같은 태그 만들기 feat. input range
해당 효과를 input에 타입만 range로 하면 될것을
예전 포트폴리오 만들적에 이렇게 간단한걸
css 와 javascript 로 하나하나 순수 구현했던 기억이 난다
⭐️ 기본 형태
<!-- min, max 속성을 통해 처음과 끝 값을 제한할수 있다-->
<input type="range" min="1" max="10"/>
⭐️ 샘플 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="range" min="1" max="12" id="ex-in">
<div id="ex-out"></div>
<script>
document.querySelector('#ex-in').addEventListener('input',e=>{
document.querySelector('#ex-out').innerHTML= e.target.value;
});
</script>
</body>
</html>
🌈 출력 결과
728x90
'프론트엔드 > HTML' 카테고리의 다른 글
| [HTML / Favicon] 파비콘 만들기 및 적용 방법! (브라우저 탭아이콘) (1) | 2021.06.09 |
|---|---|
| [HTML5] Data 속성 (Data Attribute) (0) | 2021.03.13 |
| [Html] 시멘틱 태그 semantic tag (0) | 2021.02.06 |
| [Html] 기본 구조 - 태그와 엘리먼트 개념 Tag / Element (0) | 2021.02.03 |
댓글