개발자입니다

보호되어 있는 글입니다.

-그림 파일 추가 accept="image/*" : 이미지 파일만 허용한다. video 등도 가능하며 .pdf 등으로 확장자 제한을 걸 수도 있다. multiple 속성 추가시 여러 파일을 등록할 수 있다. // index.html 추가 const fileInput = document.getElementById("file"); function onFileChange(event) { console.dir(event.target); } fileInput.addEventListener("change", onFileChange); 콘솔 확인은 다음과 같다. 브라우저의 자바스크립트는 유저의 파일을 읽을 수 없다. 유저가 선택했을 때 메모리에 있게 된다. 그러면 브라우저가 파일을 활용할 수 있다. 메모리에 있는 파..

-선택자 지정 게임 : flukeout.github.io -CSS 속성 상속 여부 : https://www.w3.org/TR/CSS21/propidx.html -CSS 컬러 참고 사이트: https://www.w3schools.com/css/css_colors.asp -의미없는 텍스트 만드는 사이트(ipsum generator 검색): https://www.lipsum.com/feed/html -flexbox 여러가지 테스트 가능 사이트: https://codepen.io/enxaneta/pen/adLPwv -W3schools 에서 미디어쿼리 문법 확인 : https://www.w3schools.com/css/css3_mediaqueries.asp -HTML/CSS 사용해도 되는지 확인하는 통계 사이트 ..

-클릭시 x, y 좌표 얻어내기 아래 코드로 콘솔에서 클릭 위치 얻어낼 수 있다. function onClick(event) { console.log(event); } canvas.addEventListener("click", onClick); 클릭시마다 (0, 0) 에서 시작되는 직선을 그릴 수 있다. ctx.lineWidth = 2; function onClick(event) { ctx.moveTo(0, 0); ctx.lineTo(event.offsetX, event.offsetY); ctx.stroke(); } canvas.addEventListener("click", onClick); addEventListener에서 "click"을 "mousemove"로 바꾸면 이렇게 나온다. function ..

태그 : js로 그래픽 그릴수 있게 하는 API /* style.css */ canvas { width: 800px; height: 800px; border: 5px solid black; } body { display: flex; justify-content: center; align-items: center; } // app.js const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // 2d 그림 그리기 위해 canvas.width = 800; canvas.height = 800; // 기본 세팅 fillRect(x 시작위치, y 시작위치, 너비, 높이) ctx.fillRect(50, 50, 100,..

VS code에서 ! + 엔터시 html에 필요한 코드 자동으로 나온다. VS code에서 Live Server 설치 - 우하단 Go Live 클릭 - index.html 파일 생성해야 자동 업데이트 /* style.css */ body { background-color: turquoise; } // app.js alert('Hello');