Text Animation
·
활동/개인 프로젝트
※ 이 글은 예전 블로그에서 퍼왔으며 2020.1.21에 작성된 글입니다. VIEW (무슨 작품을 만들든 디자인 고민이 가장 시간을 잡아 먹는다..^^) 도서관에서 SVG 연습 하다가 간단하게 만들어 본 작품이다. 생각보다 몇 분 안걸려서 조금 놀랐다. Scroll Animation, SMIL, Canvas 등등 빨리 다양한 인터렉션을 구사하고 싶다. 요즘 디자인을 눈에 익히기 위해서 Awwwards나 codepen.io 사이트에 들어가 보는데 진짜 세상에는 대단한 사람들이 많은 것 같다. 나도 좀 더 노력해야 겠다. Link Text Animation jeongwoo903.github.io
Icon Magnifier
·
활동/개인 프로젝트
※ 이 글은 예전 블로그에서 퍼왔으며 2020.1.19.에 작성된 글입니다. VIEW SVG를 배우면서 느낀점인데 문법적으로 어렵다는 느낌은 아닌데 관련성이라 해야되나 연결성이라 해야하나..;; 째뜬 쉬운데 엘리먼트들 간의 연결을 신경쓰는게 까다롭다. 아마 아직 이해가 덜 되어서 그런것 같다..ㅎㅎ Link Icon Magnifier jeongwoo903.github.io
Twitch SVG
·
활동/개인 프로젝트
※ 이 글은 예전 블로그에서 퍼왔으며 2020.1.18에 작성된 글입니다. VIEW SVG를 공부하고 만든 첫 번째 작품이다. 더 다양한 인터렉션을 구현하고 싶어서 공부하고 있다. 아직은 어떤 식으로 SVG를 사용해야하고 animation을 구사해야 할 지 모르겠지만 계속 열심히 공부해 봐야겠다. Link Twitch SVG jeongwoo903.github.io
Clock
·
활동/개인 프로젝트
※ 이 글은 예전 블로그에서 퍼왔으며 2020.1.11.에 작성된 글입니다. VIEW 요즘 계속 프론트엔드 개발자를 위한 자바스크립트 프로그래밍이란 책을 공부하고 있는데 (regexp랑 this, call(), apply() 이런거 너무 어렵다..ㅠ) new Data( ) 에 대해서 공부하다가 시계를 만들어 보고싶어서 만들어 봤다. 시계 디자인을 보다가 flip clock디자인이 이뻐서 비슷하게 만들어 봤다. 이렇게 배운걸 써먹어 보는 것도 중요한 것 같다. ​ 만들고나니 아쉬운 점이 있다. 시간을 1초마다 업로드 해야하는 점을 setTimeout( )을 1초로 설정하고 html body에다가 onload 이벤트를 주는 식으로 처리하였는데, 초는 1초씩 업로드 하면 되지만 분, 일, 월, 년 까지 1초마..
To Do List
·
활동/개인 프로젝트
※ 이 글은 예전 블로그에서 퍼왔으며 2020.1.7.에 작성된 글입니다. VIEW 이번엔 Hello World 급으로 전통적인 To Do List를 만들어 봤다... 맥북을 산 뒤로 맥북 환경에서 작업을 하다 보니 윈도우 환경에서 실행 했을 때를 고려하지 않았다;; 그 덕에 몇 번을 고쳤던지..ㅠㅠ 하지만 To Do List를 만들어 보면서 부모 자식 노드 관계나 JS의 기본적인 것에 대해 조금이나마 파악하게 된 것 같다. 앞으로는 JS를 좀 더 파고들고 SASS(SCSS)나 SVG를 한 번 공부해 보고 싶다. Link To Do List jeongwoo903.github.io
Scroll Practice2
·
활동/개인 프로젝트
※ 이 글은 예전 블로그에서 퍼왔으며 2020.1.3.에 작성된 글입니다. VIEW 저번 작품이 너무 간단해서 다시 한 번 만들어 봤다. 이걸 만들면서 css transform과 text의 위치 잡는 법을 자세히 공부한 것 같다. 여전히 가상 클래스에 대해서는 만져보지 않아서 잘 모른다.. 다음부터는 CSS보다 Javascript위주의 작품들을 만들어 봐야겠다. Link https://jeongwoo903.github.io/Scroll-Prac2/ Airplane Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Rain Drop Rain Rain Rain Rain Rain Rain Rain Rain Sun Sunshine Sunshine Sunshine Sunshin..
Scroll Practice
·
활동/개인 프로젝트
※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.31.에 작성된 글입니다. VIEW 인프런 강좌를 보고 scroll animation 배운 것을 한 번 사용해보고자 만들어 봤다. 사실 이런걸 만들려던 것은 아닌데..ㅋㅋ 뭔가 마음대로 되지 않아서 타협한 결과물이다. Link Scroll Prac jeongwoo903.github.io
Menu
·
활동/개인 프로젝트
※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.28.에 작성된 글입니다. VIEW 이번 프로젝트를 계기로 이제 CSS의 flex와 grid 그리고 중앙 정렬에 관해서는 도를 튼 것 같다..ㅋㅋ 계속하니까 그래도 실력이 조금씩 느는 것 같다. 하지만 CSS에서 아직 별로 안만져본 가상 클래스(:after, :before, :disable..등등)와 animation, transfrom 분야는 내가 생각한 것을 그대로 표현하기 힘들다는 것을 느껴서 좀 더 공부해야겠다. ​ 그리고 자바스크립트는 여전히 잘 모르겠다...ㅠㅠ inflearn강좌(인터렉티브 웹 개발 제대로 시작하기)에서 배웠던 것들을 되뇌면서 해봤는데 아직은 많은 시행착오를 거쳐야 했다. 일단 이벤트와 이벤트 위임을 중점으로 공부를 하고 코..