그림판 구현 기능 9가지 색상 색 채우기 이미지 파일 저장 페인트 굵기 그림판 클리어 const canvas = document.getElementById("jsCanvas"); const ctx = canvas.getContext("2d"); const colors = document.getElementsByClassName("jsColor"); const range = document.getElementById("jsRange"); const mode = document.getElementById("jsMode"); const saveBtn = document.getElementById("jsSave"); const INITIAL_COLOR = "#2c2c2c" // 기본 컬러 블랙 const CAN..

To Do List 사이트 만들기 구현 기능 현재 시간 날씨 배경화면, 명언 무작위로 나타내기 To Do List 작성 로그인 기능 현재 시간 const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); const seconds = String(..

Document document 객체는 DOM 제어를 위한 다양한 메서드들을 담고 있다. 자바스크립트에서 HTML에 접근 및 선택, 생성, 이벤트 처리등의 작업이 가능하다. document.getElementById("아이디"); // 해당 아이디의 태그(요소)에 접근 id값.innerText = ""; // 텍스트 업데이트 document.getElementsByClassName("클래스명"); // 해당 클래스명의 태그(요소)에 접근 document.getElementsByTagName("태그명"); // 해당 태그명에 접근 document.querySelector(".클래스명 태그명"); // 엘리먼트를 CSS 방식으로 검색, 단 하나의 엘리먼트를 리턴, 동일한 조건 시 첫번째 엘리먼트를 보여준다...

Array이란? 인덱스를 가지는 복수의 자료를 저장할 수 있는 자료구조이다. 어떤 데이터 타입이든 상관없이 저장이 가능하다. const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; // 배열 선언 consol.log(daysOfWeek); // 배열 출력 daysOfWeek.push("sun"); // 배열값 추가 daysOfWeek[0] = "MON" // 배열의 첫번째 값 변경 consol.log(daysOfWeek); // sun값이 추가되고 배열의 첫번째 값이 변경된 배열 출력 Object const player = { name : "sky", points : 10, fat : false, }; consol.log(player); playe..

자바스크립트란? 정적인 HTML 문서와 달리 동적인 화면을 웹페이지에 구현하기 위해 사용하는 스크립트 언어다. 자바스크립트에서 변수를 선언할 때 사용하는 단어는 3가지가 있다. const, let, var 각 단어마다 차이점이 있다. const 처음 선언할 때 값을 무조건 대입해야 하고 재선언 및 재할당이 불가능하다. const a = 1; a = 2; // 오류 const a = 2 // 오류 let 재선언은 불가능하지만 재할당은 가능하다. let a = 1; a = 2; let a = 2; // 오류 var 재선언 및 재할당 모두 가능하다. 자바스크립트 초기에 사용되었지만 현재 권장하지 않는다.

font-size 폰트의 크기 rem html 태그에 적용된 font-size의 영향을 받는다. html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정된다. px 모니터 상의 화소 하나의 크기에 대응되는 단위다. 고정된 값이기 때문에 이해하기 쉽지만, 사용자가 글꼴의 크기를 조정할 수 없기 때문에 가급적 사용을 하지 않는 것이 좋다. em 부모 태그의 영향을 받는 상대적인 크기다. 부모의 크기에 영향을 받기 때문에 파악하기가 어렵다. rem이 등장하면서 이 단위 역시 사용이 권장되지 않는다. color 폰트의 컬러 http://www.w3schools.com/css/css_colors.asp CSS Colors CSS Colors Colors are specified using predefined c..