jjanmo / interactive-web

Interactive Web 🚀

Interactive Web

나에게 인터렉티브 웹라고 하면 동적이고 화려하고 멋있는 웹사이트를 말한다. 이와 동시에 유저가 해당 웹사이트와의 인터렉션을 통해서 뭔가 감동을 얻는다면 그것이야 말로 진정한 인터렉티브 웹이 아닐까. 이러한 웹을 만들기 위해서 다양한 방법들이 존재한다. 이 저장소는 어떠한 방식으로 인터렉티브함을 표현해야하는지 그 기술, 방법등에 대해 익히고 실습 과정을 기록하는 중이다.

• StudyLog

Part1 : Interactive Web Examples

소소한 인터렉티브 예제들을 따라 만들어보자!

Content

• Interactive Web1(in interactive-web directory)

  • WIL
  • 레퍼런스:강의 with 1분코딩

• 도라에몽 눈알돌리기

  • WIL
  • 레퍼런스:유튜브 with 1분코딩

• Interactive Web2

  • v1.0 WIL : 해당 강의의 2021~22년 버전
  • v2.0 WIL : 해당 강의의 업데이트 버전(2023년)
  • 레퍼런스:강의

• BBC clone

  • WIL (cf.저장소 변경 이슈로 인해 기존 interactive-sths 저장소에서 옮겨옴. 😅)
  • 레퍼런스:유튜브 with 1분코딩

Part2 : CSS 3D Transform

파트1을 만들어가면서 조금 더 인터렉티브함을 주기 위해선 좋은 자바스크립트 실력과 더불어 3D에 대한 감각이 중요함을 느꼈다. 특히 CSS를 이용한 3D Transform에 대해선 좀 더 경험해볼 필요가 있다고 생각했다. 그래서 해당 사이트의 예제들을 따라 만들어보면서 3D 경험과 시야를 넑혀보고자 한다.

Part3 : SVG

SVG 마스터하기 라고 쓰고 중수정도까지만 💫 되어보자!

1분 코딩님의 SVG 마스터 강의를 실습 및 정리하는 공간!

My Examples 🦊

• Linus Torvalds Saying

Part4 : HTML5 Canvas

HTML5 Canvas Tutorials with 1분코딩님

My Examples 🚀

• 그림판
• 클릭게임

Part5 : CSS Flex & Grid

• CSS Flex와 Grid 제대로 익히기 1분코딩님의 강의를 듣고 실습한 공간 🤖

• Grid Practice : Grid Examples → 그리드에 대해서 연습해보고자 찾아보니 이런 좋은 예제 사이트가 있었다! 다양한 그리드 레이아웃을 만들어보자 🚀

• Flex & Grid 응용 예제s

Part6 : three.js

three.js 1분코딩님 강의를 듣고 실습한 공간 🚀

인터렉티브 웹 개발 강의에서 Three.js 파트를 통한 복습용 실습 📝

Part7 : Interactive Leaflet [done]

Leaflet : 홍보/안내를 목적으로 2단 혹은 3단 접어서 보여주는 인쇄물을 말한다.

1분코딩님의 인터랙티브웹-리플릿만들기를 실습한 공간 🔖

나만의 Leftlet Demo (사내 프로토타입용)