🍳 Fast Recipe

HTML, CSS, JavaScript 기반으로 구현한 다양한 UI/UX 컴포넌트 및 시각 효과를 실습한 프로젝트입니다.
버튼, 이미지 처리, Parallax, Masonry, 트리 구조 등 실제 웹 개발에 활용되는 다양한 요소들을 독립적으로 구현하며 학습한 결과물입니다.

프로젝트 구조

fast-recipe/
   ├── button/                 # 버튼 스타일 및 인터랙션 예제
   ├── image/                  # 이미지 표현/처리 예제
   ├── masonry layout/         # Masonry 레이아웃 실습
   ├── parallax/               # Parallax 스크롤 효과 구현
   ├── reloadless/             # 새로고침 없는 페이지 구성 예제
   ├── temp/                   # 임시 작업 디렉토리
   ├── templated-visualize/    # 시각화 기반 템플릿 실험
   ├── thumbnail/              # 썸네일 UI 구성 예제
   ├── tree/                   # 트리 형태 UI 구성
   └── tree_fontello/          # Fontello 아이콘 기반 트리 UI

각 디렉토리는 독립적으로 실행 가능한 HTML/CSS/JS 예제입니다.

주요 실습 주제

• 🎨 다양한 버튼 스타일 및 애니메이션
• 🖼️ 반응형 이미지 처리 및 시각적 표현
• 🧱 Masonry 레이아웃 구현
• 🌄 Parallax 스크롤 효과
• 🗂️ 트리(Tree) 구조 인터페이스
• 🔄 새로고침 없는 UI 구성
• 🧩 템플릿 시각화 구성 방식 실험

사용 기술

항목	내용
Markup	HTML5
Style	CSS3, Flexbox, Grid
Script	JavaScript (Vanilla JS)
아이콘	Fontello (트리 인터페이스용)
레이아웃	Masonry, Parallax, Thumbnail 등

실행 방법

1. 저장소 클론

   git clone https://github.com/Yang-Sooyoung/fast-recipe.git

2. 원하는 예제 폴더로 이동 후 HTML 파일 열기

   cd fast-recipe/parallax
   open index.html

   또는 브라우저에서 직접 index.html 실행

별도의 빌드/런타임 환경 없이, 로컬 브라우저에서 바로 실행 가능합니다.

학습 포인트

• 다양한 UI 컴포넌트의 구조와 스타일링 연습
• HTML/CSS만으로도 구현 가능한 인터랙션 및 시각효과 실습
• JavaScript의 DOM 제어 기초 연습
• 컴포넌트 기반 UI 개발에 대한 이해 기반 마련

향후 개선 방향

• 공통 레이아웃 템플릿 적용 및 모듈화
• GitHub Pages로 예제 데모 배포
• 폴더별 README 추가 및 설명 정리
• 각 UI 요소별 응용 버전 추가

🙋‍♀️ 만든 사람

• 👩‍💻 이름: 양수영 (Yang Sooyoung)
• 🔗 GitHub: @Yang-Sooyoung