{"id":18653292,"url":"https://github.com/theo-interactive/ui-development","last_synced_at":"2026-04-12T07:38:37.140Z","repository":{"id":107920263,"uuid":"589593740","full_name":"theo-interactive/ui-development","owner":"theo-interactive","description":"(Completed version) UI development examples (Learn web UI development)","archived":false,"fork":false,"pushed_at":"2023-03-22T02:56:06.000Z","size":1357,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-17T23:08:15.751Z","etag":null,"topics":["adobe-fonts","ajax","canvas","css3","font-awesome","google-fonts","gsap3","html5","javascript","pixijs-v5","typescript"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theo-interactive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-16T13:41:52.000Z","updated_at":"2023-12-28T15:28:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"baf35803-9f3d-477d-85e1-2d69f7396581","html_url":"https://github.com/theo-interactive/ui-development","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/theo-interactive/ui-development","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theo-interactive%2Fui-development","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theo-interactive%2Fui-development/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theo-interactive%2Fui-development/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theo-interactive%2Fui-development/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theo-interactive","download_url":"https://codeload.github.com/theo-interactive/ui-development/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theo-interactive%2Fui-development/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31707953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-12T06:22:27.080Z","status":"ssl_error","status_checked_at":"2026-04-12T06:21:52.710Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adobe-fonts","ajax","canvas","css3","font-awesome","google-fonts","gsap3","html5","javascript","pixijs-v5","typescript"],"created_at":"2024-11-07T07:11:02.873Z","updated_at":"2026-04-12T07:38:37.101Z","avatar_url":"https://github.com/theo-interactive.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UI Development\n\n📌 VanillaJS, Typescript를 이용한 UI 개발 스터디 예제 코드입니다.\n\n***\n\n## User Interface List\n\n### 1. Layout\n\n\u003e CSS, Media Query를 이용한 반응형 기본 레이아웃 구성\u003cbr\u003e\nGoogle Fonts, Adobe Font 임포트\n\u003e\n- [01. Layout](https://github.com/theo-interactive/ui-development/tree/main/01_layout)\n\n### 2. Tab Menu\n\n\u003e Tab 메뉴, 콘텐츠 구성 방법과 Click 이벤트 핸들링\n\u003e\n- [02. Tab Menu](https://github.com/theo-interactive/ui-development/tree/main/02_tab-menu)\n- [02. Tab Menu (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/02_tab-menu-ts)\n\n### 3. Global Navigation Menu\n\n\u003e GN(Global Navigation) 메뉴 구성과 이벤트 핸들링\u003cbr\u003e\nDesktop, Tablet, Mobile 별 스타일 구성\n\u003e\n- [03. Global Navigation Menu](https://github.com/theo-interactive/ui-development/tree/main/03_global-navigation-menu)\n- [03. Global Navigation Menu (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/03_global-navigation-menu-ts)\n\n### 4. Appearance\n\n\u003e Color Scheme를 이용한 스타일 분리\u003cbr\u003e\n토글 버튼을 이용한 컬러 모드 변경 방법\u003cbr\u003e\n테마별 버튼을 이용한 컬러 모드 변경 방법과 이벤트 핸들링\n\u003e\n- [04.01. Appearance :: Color Scheme Style](https://github.com/theo-interactive/ui-development/tree/main/04-01_appearance--color-scheme)\n- [04.02. Appearance :: Color Mode](https://github.com/theo-interactive/ui-development/tree/main/04-02_appearance--color-mode)\n- [04.03. Appearance :: Color Theme](https://github.com/theo-interactive/ui-development/tree/main/04-03_appearance--color-theme)\n- [04.03. Appearance :: Color Theme (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/04-03_appearance--color-theme-ts)\n\n### 5. Mouse Event\n\n\u003e 마우스 커서 효과 구성 방법과 이벤트 핸들링\u003cbr\u003e\n마우스 이동에 따른 이미지 3D 회전 구성 방법과 이벤트 핸들링\n\u003e\n- [05.01. Mouse Move Event :: Cursor Effect](https://github.com/theo-interactive/ui-development/tree/main/05-01_mouse-move--cursor-effect)\n- [05.01. Mouse Move Event :: Cursor Effect (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/05-01_mouse-move--cursor-effect-ts)\n- [05.02. Mouse Move Event :: Image 3D Rotate](https://github.com/theo-interactive/ui-development/tree/main/05-02_mouse-move--image-3d-rotate)\n- [05.02. Mouse Move Event :: Image 3D Rotate (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/05-02_mouse-move--image-3d-rotate-ts)\n\n### 6. Image Slide Gallery \u0026 Full Page Hero Banner\n\n\u003e 기본 이미지 슬라이드 갤러리 구성 방법과 이벤트 핸들링\u003cbr\u003e\n풀 페이지 히어로 배너 구성 방법과 이벤트 핸들링\u003cbr\u003e\nFont Awesome 아이콘 적용 방법\u003cbr\u003e\nGSAP를 이용한 요소 애니메이션 구성 방법\u003cbr\u003e\nGSAP를 이용한 타입라인 애니메이션 구성 방법\n\u003e\n- [06.01. Image Slide Gallery](https://github.com/theo-interactive/ui-development/tree/main/06-01_image-slide-gallery)\n- [06.01. Image Slide Gallery (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/06-01_image-slide-gallery-ts)\n- [06.02. Full Page Hero Banner](https://github.com/theo-interactive/ui-development/tree/main/06-02_full-page-hero-banner)\n- [06.02. Full Page Hero Banner (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/06-02_full-page-hero-banner-ts)\n- [06.03. Full Page Hero Banner Advanced](https://github.com/theo-interactive/ui-development/tree/main/06-03_full-page-hero-banner-advanced)\n- [06.03. Full Page Hero Banner Advanced (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/06-03_full-page-hero-banner-advanced-ts)\n\n### 7. Accordion\n\n\u003e 아코디언 콘텐츠 구성 방법과 이벤트 핸들링\u003cbr\u003e\n데이터를 이용한 동적 콘텐츠 구성 방법\n\u003e\n- [07.01. Accordion Hover](https://github.com/theo-interactive/ui-development/tree/main/07-01_accordion-hover)\n- [07.02. Accordion Click Selected](https://github.com/theo-interactive/ui-development/tree/main/07-02_accordion-clcik-selected)\n- [07.02. Accordion Click Selected (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/07-02_accordion-clcik-selected-ts)\n- [07.03. Accordion Click Selected \u0026 Dynamic HTML Content](https://github.com/theo-interactive/ui-development/tree/main/07-03_accordion-clcik-selected--dynamic-html-content)\n- [07.03. Accordion Click Selected \u0026 Dynamic HTML Content (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/07-03_accordion-clcik-selected--dynamic-html-content-ts)\n\n### 8. Sprite Sheet Animation\n\n\u003e Sprite Sheet 이미지를 활용한 클립 애니메이션 구성 방법과 이벤트 핸들링\u003cbr\u003e\n다중 클립 애니메이션 구성 방법과 제어\n\u003e\n- [08.01. Sprite Sheet Animation Hover](https://github.com/theo-interactive/ui-development/tree/main/08-01_sprite-sheet-animation-hover)\n- [08.01. Sprite Sheet Animation Hover (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/08-01_sprite-sheet-animation-hover-ts)\n- [08.02. Sprite Sheet Animation Controls](https://github.com/theo-interactive/ui-development/tree/main/08-02_sprite-sheet-animation-controls)\n- [08.02. Sprite Sheet Animation Controls (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/08-02_sprite-sheet-animation-controls-ts)\n- [08.03. Sprite Sheet Animation Multiple Clips](https://github.com/theo-interactive/ui-development/tree/main/08-03_sprite-sheet-animation-multiple-clips)\n- [08.03. Sprite Sheet Animation Multiple Clip (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/08-03_sprite-sheet-animation-multiple-clips-ts)\n\n### 9. Scroll Event\n\n\u003e 스크롤 위치를을 이용한 콘텐츠 노출 인터랙션 구성 방법과 이벤트 핸들링\u003cbr\u003e\n패럴랙스(Parallax) 스크롤링 구성 방법과 제어\n\u003e\n- [09.01. Scroll Event :: Content Appear on Scroll](https://github.com/theo-interactive/ui-development/tree/main/09-01_scroll-event--content-appear-on-scroll)\n- [09.01. Scroll Event :: Content Appear on Scroll (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/09-01_scroll-event--content-appear-on-scroll-ts)\n- [09.02. Scroll Event :: Parallax Scrolling Effect](https://github.com/theo-interactive/ui-development/tree/main/09-02_scroll-event--parallax-scrolling-effect)\n- [09.02. Scroll Event :: Parallax Scrolling Effect (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/09-02_scroll-event--parallax-scrolling-effect-ts)\n\n### 10. Audio Player\n\n\u003e 음악 재생을 위한 플레이어 구성 방법과 컨트롤러 제어\n\u003e\n- [10. Audio Player](https://github.com/theo-interactive/ui-development/tree/main/10_audio-player)\n- [10. Audio Player (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/10_audio-player-ts)\n\n### 11. Video Player\n\n\u003e 동영상 재생을 위한 플레이어 구성 방법과 컨트롤러 제어\n\u003e\n- [11. Video Player](https://github.com/theo-interactive/ui-development/tree/main/11_video-player)\n- [11. Video Player (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/11_video-player-ts)\n\n### 12. Touch Swipe Image Gallery\n\n\u003e 터치 이벤트를 이용한 모바일에서 적용 가능한 이미지 갤러리 구성 방법과 이벤트 핸들링\n\u003e\n- [12. Touch Swipe Image Gallery](https://github.com/theo-interactive/ui-development/tree/main/12_touch-swipe-image-gallery)\n- [12. Touch Swipe Image Gallery (TypeScirpt)](https://github.com/theo-interactive/ui-development/tree/main/12_touch-swipe-image-gallery-ts)\n\n### 13. AJAX (Asynchronous JavaScript And XML)\n\n\u003e 비동기 통신을 이용한 콘텐츠 구성 방법\u003cbr\u003e\nRestful API 제어\n\u003e\n- [13. UI with Ajax](https://github.com/theo-interactive/ui-development/tree/main/13_ui-with-ajax)\n- [13. UI with Ajax (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/13_ui-with-ajax-ts)\n\n### 14. Canvas API\n\n\u003e Canvas API를 이용한 시각화 구성 방법\u003cbr\u003e\nPixi JS를 이용한 그래픽스 구성 방법\u003cbr\u003e\nCanvas + Pixi JS + GSAP 애니메이션 시퀀스 구성 방법\n\u003e\n- [14.01. Canvas](https://github.com/theo-interactive/ui-development/tree/main/14_01_canvas)\n- [14.01. Canvas (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/14_01_canvas-ts)\n- [14.02. UI with Canvas](https://github.com/theo-interactive/ui-development/tree/main/14_02_ui-with-canvas)\n- [14.02. UI with Canvas (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/14_02_ui-with-canvas-ts)\n- [14.03. Canvas Graphics Animation Sequence](https://github.com/theo-interactive/ui-development/tree/main/14_03_animation-sequence)\n- [14.03. Canvas Graphics Animation Sequence (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/14_03_animation-sequence-ts)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheo-interactive%2Fui-development","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheo-interactive%2Fui-development","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheo-interactive%2Fui-development/lists"}