본문 바로가기
728x90
반응형

HTML2

[Context Menu] 나만의 컨텍스트 메뉴 만들기 0. 서론 웹 브라우저에서 마우스 오른쪽 클릭을 하면 아래와 같이 'Context Menu'가 출력된다. 이 메뉴에는 뒤로가기, 새로고침, 다른 이름으로 저장 등 기본적으로 브라우저에서 제공되는 이벤트들이 있다. 평소처럼 아무 생각없이 이 메뉴들을 사용하다가, 문뜩 내 맘대로 꾸며보고 싶어졌다. 그래서, 또 직접 만들어 보았다. 이번 포스트에서는 이 Context Menu를 만드는 방법에 대해서 다루어 볼 계획이다. 가장 간단하게 만들 수 있는 정적 Context Menu를 만들어보고, 좀 더 확장시킨 동적 Context Menu를 만들어볼 계획이다. 1. 정적 Context Menu 작성 1-1. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 .. 2020. 5. 29.
[그림판] 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.
728x90
반응형