Mong dev blog

1. 들어가기 전에…범위 슬라이더(range slider)는 사용자가 특정 범위 내에서 최소, 최대값을 선택할 수 있는 UI 요소이다.이번 포스팅에서는 두 개의 input을 이용해 범위 슬라이더를 구현하는 방법에 대해 알아보았다!이 포스팅을 다 읽고 나면 아래와 같은 형태의 범위 슬라이드를 구현할 수 있다 🙂2. 어떻게 구현할 수 있을까?1) HTML 구조💡 먼저, 범위 슬라이더를 구성할 기본 HTML 구조를 정의해야한다.구조는 두 개의 input 요소와 진행 상태를 표시하는 요소, 두 개의 핸들로 구성된다.(1) 코드보기 요소역할range-slider-container- 최상위 컨테이너slider-track- 슬라이더의 트랙 또는 배경 역할p..

이번 시간에는 input [type=”file”]의 스타일을 커스텀해보자! 1. input [type=”file”]? input에 type을 file로 지정하면 파일을 업로드할 수 있는 버튼을 만들 수 있다. 만약 특정 파일 유형만 허용하려면 accept를 사용하면 된다. multiple 속성을 추가하면 2개 이상의 파일을 추가할 수 있다. 이처럼, file은 파일 업로드를 빠르게 구현할 수 있지만, input자체에 스타일을 적용할 수 없는 단점이 있다. 아래 예시는 input에 스타일을 준 모습이다. 앞서 언급했듯이 스타일이 적용되지 않았다ㅜ See the Pen input file not apply style by KumJungMin (@kumjungmin) on CodePen. 2. 스타일 지정하는..