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

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.17.에 작성된 글입니다. VIEW Flexobox, Grid의 명확한 사용법을 알고 싶어 연습삼아 만들어 봄. 여전히 개념 정리가 필요하긴 함. 사실 태그 element에 border을 부여하려 했었는데 왠지 잘 안됨. Link Photo View jeongwoo903.github.io

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.17.에 작성된 글입니다. VIEW Interactive Web강의와 Flexobox, Grid를 배우고 만들어 봄. 확실히 이론과 사용은 다르다는 것을 느겼다. 내가 짰지만 어떻게 작동하는지 잘 모르겠다. 개념을 확실히 하자. Link Hot Tofic jeongwoo903.github.io

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.15.에 작성된 글입니다. VIEW 알게 된 것 ​ 만약 라인 그라데이션을 쓸거면 이 색이 이쁘니 참고 하자. background: linear-gradient(90deg, #ff8806 0%, #fb07f3 100%); Flex 가운데 정렬을 하고 싶다면 다음 코드를 이용해보자. display: flex; justify-content: center; align-items: center; 다음 코드는 element들을 신축성있게 움직이게 해 준다. (뒤의 숫자는 남은 여백을 각각을 어느 비율로 나누어 설정할 것인가.) flex-grow: 1; 진짜 비율을 보이는 대로 나누고 싶다면 이 코드를 써라. flex: 1; Grid 비율대로 가르기 display..