View 프론트엔드 개발자을 위한 자바스크립트 책을 11장까지 본 후 연습 삼아 만들어본 작품이다. 노드 삽입과 미디어 쿼리 변화에 집중해서 만들었다. Grid의 내부 구조를 HTML에서 작성하지 않고 자바스크립트를 통해 삽입하려고 시도했다. 창 크기가 변함에 따라 타일 하나하나에 접근해 내부의 SVG를 제거하고 삽입하는 코드를 짜기 위해 고심했는데 matchMedia라는 매서드가 있다는 것을 알게 되곤 깜짝 놀랐다. DOM 조작을 공부하면서 예전엔 알지 못했던 다양한 메소드들을 알게 된 것 같다. 아직 DOM에 대해서 공부할게 더 남았는데 후딱 끝내야 겠다. +여담 타일의 모양은 사실 우리집 화장실 타일모양이다..ㅋㅋ 어릴적 부터 봐왔는데 약간 매직아이 효과가 있는 것 같다. 타일 간의 간격을 준 이유..

※ 이 글은 예전 블로그에서 퍼온 글입니다. 사각형(rectangle) 태그로 표현하며 x, y, width, height, fill, stoke, stroke-width 속성을 주로 사용함. ​ 원(circle) 태그로 표현하며 cx, cy, r, stoke, stroke-width 속성을 주로 사용함. ​ 타원(ellipse) 태그로 표현하며 cx, cy, r, stoke, stroke-width 속성을 주로 사용함. ​ 선(line) 태그로 표현하며 시작점(x1, y1)과 끝점(x2, y2), stoke, stroke-width 속성을 주로 사용함. ​ 타원(ellipse) 태그로 표현하며 cx, cy, r, stoke, stroke-width 속성을 주로 사용함. ​ 폴리 라인(polyline) ..

※ 이 글은 예전 블로그에서 퍼왔으며 2020.1.29.에 작성된 글입니다. 작품을 엎었다. 지역을 소개하는 작품을 만들기로 계획을 세웠다. figma라는 플랫폼을 알게 되어서 사용해 보기로 하였다. figma를 이용해서 디자인을 한 다음 옮기기로 하고 작업을 시작했다. 하지만 시각적인 디자인을 구현하는데 생각을 너무 많이 하다 보니 인터렉션만 구현해도 쉽게 지쳐버려서 계속 질질 끌게 되어버렸다. 그래서 이번 작품은 그냥 여기서 그만두기로 했다. 이번 작품을 계기로 다음부턴 시간을 효율적으로 사용해야겠다. 또 이젠 백엔드 분야도 한 번 다루어 봐야겠다.

※ 이 글은 예전 블로그에서 퍼왔으며 2020.1.21에 작성된 글입니다. VIEW (무슨 작품을 만들든 디자인 고민이 가장 시간을 잡아 먹는다..^^) 도서관에서 SVG 연습 하다가 간단하게 만들어 본 작품이다. 생각보다 몇 분 안걸려서 조금 놀랐다. Scroll Animation, SMIL, Canvas 등등 빨리 다양한 인터렉션을 구사하고 싶다. 요즘 디자인을 눈에 익히기 위해서 Awwwards나 codepen.io 사이트에 들어가 보는데 진짜 세상에는 대단한 사람들이 많은 것 같다. 나도 좀 더 노력해야 겠다. Link Text Animation jeongwoo903.github.io

※ 이 글은 예전 블로그에서 퍼왔으며 2020.1.19.에 작성된 글입니다. VIEW SVG를 배우면서 느낀점인데 문법적으로 어렵다는 느낌은 아닌데 관련성이라 해야되나 연결성이라 해야하나..;; 째뜬 쉬운데 엘리먼트들 간의 연결을 신경쓰는게 까다롭다. 아마 아직 이해가 덜 되어서 그런것 같다..ㅎㅎ Link Icon Magnifier jeongwoo903.github.io

※ 이 글은 예전 블로그에서 퍼왔으며 2020.1.18에 작성된 글입니다. VIEW SVG를 공부하고 만든 첫 번째 작품이다. 더 다양한 인터렉션을 구현하고 싶어서 공부하고 있다. 아직은 어떤 식으로 SVG를 사용해야하고 animation을 구사해야 할 지 모르겠지만 계속 열심히 공부해 봐야겠다. Link Twitch SVG jeongwoo903.github.io