Font-end/Javascript6 [그림판] HTML, CSS, JS로 그림판 만들기 0. 서론 어제 Javascript를 이용해서 Element를 드로그앤드롭으로 움직이는 예제를 만들었는데, 이 재밌는 기능을 다른데 활용하고 싶어졌다. 생각을 하다가 그림판을 만들어보면 좋을것 같아서 만들어보았다. 그림판이라면 선을 그을 수 있어야하지만, 이 그림판은 도형과 텍스트만 지원한다. 간단하게 만든거라 완성도는 떨어지지만 재밌는 예제라고 생각한다. 어려운 로직이 포함된 것이 간단한 설명과 함께 정리해보았다. 그럼 예제를 통해서 어떻게 그림판을 만드는지 알아보자. 1. 프로젝트 준비 1-1. Chrome Browser 1) IE와 같은 구형브라우저에서는 ES를 적용하려면 BABEL을 이용해야하기 때문에 Chrome Browser를 사용. 2) 다운로드 - https://www.google.com/.. 2020. 3. 3. [Drag&Drop] 드래그 앤 드롭으로 Element 움직이기 0. 서론 최근에 HTML, CSS, Vanilla Javascript를 이용하여 메모장을 만들었다. 생성된 메모들을 화면에 보여줄 때 단순하게 나열만 해주다니 심심하게 느껴졌다. 그래서, Windows의 Sticky Notes처럼 드래그앤드롭으로 위치를 자유롭게 설정할 수 있도록 기능을 추가해보았는데, 다른데서도 유용하게 사용할 수 있을것 같아서 정리를 해보려고한다. 그럼 예제를 통해 드래그 앤 드롭 기능을 구현해보도록 하자. 1. 프로젝트 준비 1-1. Chrome Browser 1) IE와 같은 구형브라우저에서는 ES를 적용하려면 BABEL을 이용해야하기 때문에 Chrome Browser를 사용. 2) 다운로드 - https://www.google.com/intl/ko/chrome/ 1-2. 프로젝.. 2020. 3. 2. 이전 1 2 다음
