UI Development

📌 VanillaJS, Typescript를 이용한 UI 개발 스터디 예제 코드입니다.

---

User Interface List

1. Layout

CSS, Media Query를 이용한 반응형 기본 레이아웃 구성
Google Fonts, Adobe Font 임포트

• 01. Layout

2. Tab Menu

Tab 메뉴, 콘텐츠 구성 방법과 Click 이벤트 핸들링

• 02. Tab Menu
• 02. Tab Menu (Typescript)

3. Global Navigation Menu

GN(Global Navigation) 메뉴 구성과 이벤트 핸들링
Desktop, Tablet, Mobile 별 스타일 구성

• 03. Global Navigation Menu
• 03. Global Navigation Menu (Typescript)

4. Appearance

Color Scheme를 이용한 스타일 분리
토글 버튼을 이용한 컬러 모드 변경 방법
테마별 버튼을 이용한 컬러 모드 변경 방법과 이벤트 핸들링

• 04.01. Appearance :: Color Scheme Style
• 04.02. Appearance :: Color Mode
• 04.03. Appearance :: Color Theme
• 04.03. Appearance :: Color Theme (Typescript)

5. Mouse Event

마우스 커서 효과 구성 방법과 이벤트 핸들링
마우스 이동에 따른 이미지 3D 회전 구성 방법과 이벤트 핸들링

• 05.01. Mouse Move Event :: Cursor Effect
• 05.01. Mouse Move Event :: Cursor Effect (Typescript)
• 05.02. Mouse Move Event :: Image 3D Rotate
• 05.02. Mouse Move Event :: Image 3D Rotate (Typescript)

6. Image Slide Gallery & Full Page Hero Banner

기본 이미지 슬라이드 갤러리 구성 방법과 이벤트 핸들링
풀 페이지 히어로 배너 구성 방법과 이벤트 핸들링
Font Awesome 아이콘 적용 방법
GSAP를 이용한 요소 애니메이션 구성 방법
GSAP를 이용한 타입라인 애니메이션 구성 방법

• 06.01. Image Slide Gallery
• 06.01. Image Slide Gallery (Typescript)
• 06.02. Full Page Hero Banner
• 06.02. Full Page Hero Banner (Typescript)
• 06.03. Full Page Hero Banner Advanced
• 06.03. Full Page Hero Banner Advanced (Typescript)

7. Accordion

아코디언 콘텐츠 구성 방법과 이벤트 핸들링
데이터를 이용한 동적 콘텐츠 구성 방법

• 07.01. Accordion Hover
• 07.02. Accordion Click Selected
• 07.02. Accordion Click Selected (Typescript)
• 07.03. Accordion Click Selected & Dynamic HTML Content
• 07.03. Accordion Click Selected & Dynamic HTML Content (Typescript)

8. Sprite Sheet Animation

Sprite Sheet 이미지를 활용한 클립 애니메이션 구성 방법과 이벤트 핸들링
다중 클립 애니메이션 구성 방법과 제어

• 08.01. Sprite Sheet Animation Hover
• 08.01. Sprite Sheet Animation Hover (Typescript)
• 08.02. Sprite Sheet Animation Controls
• 08.02. Sprite Sheet Animation Controls (Typescript)
• 08.03. Sprite Sheet Animation Multiple Clips
• 08.03. Sprite Sheet Animation Multiple Clip (Typescript)

9. Scroll Event

스크롤 위치를을 이용한 콘텐츠 노출 인터랙션 구성 방법과 이벤트 핸들링
패럴랙스(Parallax) 스크롤링 구성 방법과 제어

• 09.01. Scroll Event :: Content Appear on Scroll
• 09.01. Scroll Event :: Content Appear on Scroll (Typescript)
• 09.02. Scroll Event :: Parallax Scrolling Effect
• 09.02. Scroll Event :: Parallax Scrolling Effect (Typescript)

10. Audio Player

음악 재생을 위한 플레이어 구성 방법과 컨트롤러 제어

• 10. Audio Player
• 10. Audio Player (Typescript)

11. Video Player

동영상 재생을 위한 플레이어 구성 방법과 컨트롤러 제어

• 11. Video Player
• 11. Video Player (Typescript)

12. Touch Swipe Image Gallery

터치 이벤트를 이용한 모바일에서 적용 가능한 이미지 갤러리 구성 방법과 이벤트 핸들링

• 12. Touch Swipe Image Gallery
• 12. Touch Swipe Image Gallery (TypeScirpt)

13. AJAX (Asynchronous JavaScript And XML)

비동기 통신을 이용한 콘텐츠 구성 방법
Restful API 제어

• 13. UI with Ajax
• 13. UI with Ajax (Typescript)

14. Canvas API

Canvas API를 이용한 시각화 구성 방법
Pixi JS를 이용한 그래픽스 구성 방법
Canvas + Pixi JS + GSAP 애니메이션 시퀀스 구성 방법

• 14.01. Canvas
• 14.01. Canvas (Typescript)
• 14.02. UI with Canvas
• 14.02. UI with Canvas (Typescript)
• 14.03. Canvas Graphics Animation Sequence
• 14.03. Canvas Graphics Animation Sequence (Typescript)