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

※ 이 글은 예전 블로그에서 퍼왔으며 2020.1.11.에 작성된 글입니다. VIEW 요즘 계속 프론트엔드 개발자를 위한 자바스크립트 프로그래밍이란 책을 공부하고 있는데 (regexp랑 this, call(), apply() 이런거 너무 어렵다..ㅠ) new Data( ) 에 대해서 공부하다가 시계를 만들어 보고싶어서 만들어 봤다. 시계 디자인을 보다가 flip clock디자인이 이뻐서 비슷하게 만들어 봤다. 이렇게 배운걸 써먹어 보는 것도 중요한 것 같다. ​ 만들고나니 아쉬운 점이 있다. 시간을 1초마다 업로드 해야하는 점을 setTimeout( )을 1초로 설정하고 html body에다가 onload 이벤트를 주는 식으로 처리하였는데, 초는 1초씩 업로드 하면 되지만 분, 일, 월, 년 까지 1초마..

※ 이 글은 예전 블로그에서 퍼왔으며 2020.1.7.에 작성된 글입니다. VIEW 이번엔 Hello World 급으로 전통적인 To Do List를 만들어 봤다... 맥북을 산 뒤로 맥북 환경에서 작업을 하다 보니 윈도우 환경에서 실행 했을 때를 고려하지 않았다;; 그 덕에 몇 번을 고쳤던지..ㅠㅠ 하지만 To Do List를 만들어 보면서 부모 자식 노드 관계나 JS의 기본적인 것에 대해 조금이나마 파악하게 된 것 같다. 앞으로는 JS를 좀 더 파고들고 SASS(SCSS)나 SVG를 한 번 공부해 보고 싶다. Link To Do List jeongwoo903.github.io

※ 이 글은 예전 블로그에서 퍼왔으며 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..

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.31.에 작성된 글입니다. VIEW 인프런 강좌를 보고 scroll animation 배운 것을 한 번 사용해보고자 만들어 봤다. 사실 이런걸 만들려던 것은 아닌데..ㅋㅋ 뭔가 마음대로 되지 않아서 타협한 결과물이다. Link Scroll Prac jeongwoo903.github.io

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.28.에 작성된 글입니다. VIEW 이번 프로젝트를 계기로 이제 CSS의 flex와 grid 그리고 중앙 정렬에 관해서는 도를 튼 것 같다..ㅋㅋ 계속하니까 그래도 실력이 조금씩 느는 것 같다. 하지만 CSS에서 아직 별로 안만져본 가상 클래스(:after, :before, :disable..등등)와 animation, transfrom 분야는 내가 생각한 것을 그대로 표현하기 힘들다는 것을 느껴서 좀 더 공부해야겠다. ​ 그리고 자바스크립트는 여전히 잘 모르겠다...ㅠㅠ inflearn강좌(인터렉티브 웹 개발 제대로 시작하기)에서 배웠던 것들을 되뇌면서 해봤는데 아직은 많은 시행착오를 거쳐야 했다. 일단 이벤트와 이벤트 위임을 중점으로 공부를 하고 코..

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.25.에 작성된 글입니다. VIEW 요즘 모질라랑 프론트엔드 개발자를 위한 머시기 노란 책으로 Javascript를 공부하다가 어느 정도 사용 가능한지 알아보려고 한 번 만들어 봤다. (누가 모질라 번역좀 해줘..ㅠㅠ 프로그래밍 공부를 하면 영어가 자동으로 따라오는 느낌..?) Link Color Change jeongwoo903.github.io

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.18.에 작성된 글입니다. VIEW %단위와 top, left, bottom, right 그리고 축(axis) 요것들이 쉬워 보이지만 은근 짜증나게 한다. 그리고 container를 viewport의 중앙에 내릴때는 align-items: center;로 왜 안되는 걸까?.. 의문이다. 거의 항상 position: absolute한다음 top과 transform: translateX로 중앙 배열하는 것 같다. 이번엔 margin-top으로 했다. Link CSS 3D jeongwoo903.github.io 의문점 정리 1. margin-top: 50vh가 아니고 25vh써야 중앙에 정렬되는가? Viewport Height (vh)는 viewport의 높..