Daily Pogle

싱글페이지 애플리케이션(SPA) 를 만드는데 유용한 기능으로 한페이지 내에서 여러 탭키를 누르면 내용들이 바뀌는 효과를 보여줄 수 있습니다. ++ 사용할 메서드 classList.add classList.remove data- (target.dataset) 활용 addEventListener ++ HTML5 에서 추가된 태그 (semantic tag) - HTML 5 에서 추가된 태그 - 특정한 영역 그룹화 - 다른영역에서도 쓰일 수 있는 영역에 쓰임 - HTML 5 에서 추가된 태그 - 특정한 영역 그룹화 블로그 및 SNS 포스팅, 뉴스 기사영역, 신문 논평 등 [HTML] 연혁 사업구조 투자계획 사업구조 사업구조에 대해서 어쩌구저쩌구

2023.01.10 - [웹 개발/Javasript] - [Javascript] Canvas API - 그림판 구현하기 [Javascript] Canvas API - 그림판 구현하기 그림판에 필요한 기능에 대해서 하나하나씩 살펴보면서 코드를 구현한다. 그전에 이전 포스팅에서 간단하게 canvas 를 만들어서 그림판을 설정한다. body 태그 안에 canvas 태그를 설정한다, canvas 태 pogle-jeong.tistory.com 기능 5. 텍스트 입력해서 삽입하기 텍스트 바에 삽입할 텍스트를 적고, canvas 를 더블클릭하면 해당 텍스트가 십입 될 수 있도록 기능한다. [HTML] [JS] ctx.save() 는 현재 ctx 의 모든 속성을 저장하는 역할을 한다. ctx.restore() 는 ct..

그림판에 필요한 기능에 대해서 하나하나씩 살펴보면서 코드를 구현한다. 그전에 이전 포스팅에서 간단하게 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(..

분명 try - catch 예외처리에 대한 포스팅을 했음에도 입력처리 문제에 대해서 헤매게 되었다. 문제는 단순한 입력처리 예외상황으로 Int 형 변수에 문자열이 입력받는 상황이다. 그냥 가볍게 try - catch 와 while 문을 이용해서 해결하려 했으나 잘되지 않았다. 구글링으로 왜 해결되지 않았나 확인을 했다. 근데 사소한 문제로 인해 발생한 것이다. 이에 대한 반성문으로 쓴다. [잘못된 코드] System.out.print("나이 = "); int age; while (true) { try { age = sc.nextInt(); break; } catch(Exception e) { System.out.println("나이를 올바르게 입력해주세요."); age = sc.nextInt(); } }..

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; // 그릴 선 두꼐..

파일 입출력을 위한 예제 정리 [사용 패키지] import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.FileReader; import java.io.FileWriter; import java.io.IOException; import java.io.PrintWriter; // import java.io.* 한줄만 사용하셔도 됩니다. 1. 해당 경로의 모든 파일 확인 File file = new File("c:\\"); File filelist[] = file.listFiles(); for (int i = 0; i < filelist.length; i++) { if(filelist[i]...

프론트엔드에 역동적인 애니메이션이나 그림을 그리고 싶을 때 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와 관련된 다른 개념들을 한 곳에 모아서 정의할 수 있는 논리적인 저장소가 제공된다는 점입니다. - 비동기적으로 가져온다는 것은, 요청과 동시에 결과를 가져..