Daily Pogle

그림판에 필요한 기능에 대해서 하나하나씩 살펴보면서 코드를 구현한다. 그전에 이전 포스팅에서 간단하게 canvas 를 만들어서 그림판을 설정한다. body 태그 안에 canvas 태그를 설정한다, canvas 태그를 통해서 그림 등 그리는게 가능해진다 [HTML] [CSS] - canvas 의 크기와 테두리를 설정해준다. 또한 그림판은 흰 바탕으로 설정해준다. canvas { width: 800px; height: 800px; border: 3px solid black; background-color: white; } [Javascript] - 그림판은 2D 이므로 2d 속성을 사용하기 위해서 getContext("2d") 를 사용한다 const canvas = document.querySelector(..

Javascript 로 그림판을 만들기 전에 기초기능부터 살펴보려고 한다. 만들기 전에 활용할 기초기능들을 정리해보았다. Javascript 의 canvas 위치는 이전 포스팅과 같다. 이 포스팅에서는 다음과 같은 기능을 한다. = 특정한 위치로부터 사용자가 클릭한 위치까지 각기 다른색의 선을 그릴 수 있게한다. HTML 삽입 미리보기할 수 없는 소스 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // 캔버스에 그림그릴때 context canvas.width = 800; //css 뿐만 아니라 js에서도 표시 canvas.height = 800; ctx.lineWidth = 2; // 그릴 선 두꼐..

프론트엔드에 역동적인 애니메이션이나 그림을 그리고 싶을 때 Javascrpipt 에서 canvas API 를 제공합니다. 앞서 HTML 에 만 먼저 추가해주시면 됩니다.이후에 동작들은 모두 Javascript 에서 진행합니다. 1. 다양한 모형 그리기 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // 캔버스에 그림그릴때 context canvas.width = 800; //css 뿐만 아니라 js에서도 표시 canvas.height = 800; ctx.rect(50, 50, 100, 100); //canvas(50,50) 위치에서 width 100, height 100 인 사각형그리기 ctx.re..

이전 포스팅에서 weather API 를 사용했었습니다. weather api 를 활용하기 위해서는 fetch 를 사용합니다., fetch 는 서버와의 비동기 요청 방식으로 Ajax 방식 중 하나로써 가장 최신기능을 제공합니다. 또한 fetch API 는 Promise 객체를 기반으로 하고 있습니다. fetch 는 javascript 의 오픈 api 로 javascript 를 사용해 웹페이지를 직접 열지않도고 서버를 통해 원하는 리소스를 얻어올 수 있는 기능을 해줍니다 fetch 의 장점은 네트워크 리소스를 비동기적으로 가져올 수 있다는 것과 http와 관련된 다른 개념들을 한 곳에 모아서 정의할 수 있는 논리적인 저장소가 제공된다는 점입니다. - 비동기적으로 가져온다는 것은, 요청과 동시에 결과를 가져..

내가 있는 장소의 날씨 정보를 얻기 위하여 weather API 를 활용할 것이다. https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (subscriptions w openweathermap.org 해..

To do list 를 만들기 위한 기능을 고려한다. [요구사항] 1. 사용자 입력 2. 시계 기능. 3. 입력을 통한 "오늘 할일" 추가. 4. "오늘 할일" 삭제기능. 5. Local Storage(내부 DB)를 통한 기능. [주의점] - submit 시 발생하는 기본 브라우저 기능 정지 필요.(submit 시 웹페이지 초기화 등) - 입력, 삭제 시 각 element 를 기억해서 수정할 수 있도록 구현 필요.(아니면 원하는 element 수정 불가) 주요 function 모음 function operation return const date = new Date(); Date object 생성 object String(date.getHours()).padStart(2,"0"); 현재 Hour 를 st..

// required: 반드시 채워야함. // maxlength: 입력의 최대길이. // placeholder: 입력전 예시문구. Login

이전 포스트에서 Javascript 에서 style 을 변경하는 것보다 style 은 CSS 영역에서 변경하는 것을 언급했다. Style CSS 를 통해 HTML Style 주기 Animation Javascript 를 통해 HTML에 동적효과 이렇게 설명하면 대체 어떻게 CSS 에서 이벤트를 통한 스타일 변환을 한다는 소리지? 라는 생각이 들 수 있다. 전하고자하는 말은 CSS 에서 내가 원하는 Style 을 구현하고 Javascript를 통하여 HTML의 element에 class 를 부여하거나 (element.className = "name"), 삭제하는 방식으로 스타일을 부여하는 방식을 의미한다. element.classList. 앞서서 element.className = " " 을 설명하였지만,..