코딩쌀롱

range slider를 유튜브 따라서 만들어봤다! 코드펜 링크🔗 javascript 코드도 들어가지만 input type="range"때문에 HTML¦CSS 카테고리에 글을 쓴다. 먼저 설명하자면, 1. 진짜 슬라이더인 input 2개를 만들고, 가짜 슬라이더 div를 만든다. 2. 진짜 슬라이더를 동작할 때 가짜 슬라이더도 같이 움직이도록 배치를 javascript 코드로 짠다. 3. 진짜 슬라이더를 opacity: 0 으로 투명하게 만들고, 가짜 슬라이더 위에 올린다. 4. 이 때 진짜 슬라이더는 2개지만 겹쳐놓고, thumb 두 개가 모두 활성화되도록 한다.(pointer-event: all) ✱HTML ✱CSS -webkit-, -moz-는 동작 브라우저에 관한 prefix이다. (webkit은..

웹에서 파일을 입력 받으려면 HTML에서 input type="file"으로 받을 수 있다. input 태그에 대해서는 다음 링크를 참조! (input type="file"의 HTML, CSS 링크) ✱ JavaScript 코드 전체적으로 설명하자면, 1. 사용자가 input으로 파일을 선택하면 'change' 이벤트가 발생한다. 2. 파일이 선택되면 input의 'files' 속성에 'FileList' 형태의 유사배열객체가 저장된다. 3. 'FileReader' 객체는 파일을 읽을 수 있게 도와주는 객체다. 4. FileReader의 메서드 readAsText로 텍스트를 읽어올 수 있다. 5. 읽기 성공하면 'load'이벤트가 발생한다. 6. 읽어들인 파일의 내용은 FileReader 객체의 resul..

파일을 읽는 것은 JavaScript로 가능하고, 이것에 관한 글은 다음 링크를 참고! (JS로 파일 읽기 링크) 웹에서 사용자의 로컬 파일을 입력받기 위해서 input 태그의 type 속성을 file로 지정하는 방법을 사용한다. 이렇게만 했을 때 크롬 브라우저에서 확인하면 아래와 같이 나온다. ✱ input type="file"의 속성들 사용할 수 있는 여러가지 속성들이 있다. ‣ accept, multiple, files, value, capture accept : 입력받을 수 있는 파일의 유형을 지정하는 속성 지정하지 않으면 모든 유형의 파일을 입력받을 수 있다. 여러 종류의 파일을 입력받기 위해서는 쉼표로 목록을 구분하여 작성한다. 값으로는 확장자명과 MIME 타입을 적는다. - 확장자명 : .t..

📌 addEventListener의 콜백함수 ✱문제 발생 // class TodoView 안에 있는 메서드 initEvent(todoViewObj) { // 콜백함수가 기명함수일 때 this.addButton.addEventListener("click", this.addList.bind(this)); // 콜백함수가 익명함수일 때 this.listWrapper.addEventListener("click", function({target}) { if(target.nodeName === 'LABEL') { todoViewObj.makeLineThrough(target); } if(target.nodeName === 'I') { todoViewObj.removeListItem(ta..