본문 바로가기

CSS2

[CSS] Javascript 없이 Tab Menu 구현하기 서론 HTML 태그 중에 태그의 for속성은 연결된 태그로 Focus를 이동시키는 기능을 한다. 예를들어, 그 대상이 이면 바로 입력할 수 있도록 커서가 깜빡이며, 나 라면 해당 태그의 checked 상태가 'on/off'된다. 이 예제는 이러한 태그의 for속성을 이용한 방법이다. 1. 예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81.. 2020. 4. 24.
[그림판] 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.