Frontend Mentor - Recipe Page 클론 제작기

Frontend Mentor에서 제공하는 디자인 찬성을 바탕으로 Recipe Page를 클론 제작했습니다.
HTML/CSS만으로 구성되어 있으며, 반응형과 타이포그래픽에 중점을 두어 UI를 완성했습니다.

완성 이미지

프로젝트 개요

• 제작 목적: 시멘틱 마크업과 반응형 레이아웃 학습
• 기술 스택: HTML5, CSS3 (Flexbox), Google Fonts
• 디자인 기준 해상도:
  • Mobile: 375px
  • Desktop: 1440px

사용 기술

기술	설명
Semantic HTML	시멘틱 태그로 문서 구조를 명확히 표현
Flexbox	레이아웃 배치와 정리를 유연히 구성
Media Queries	모바일 우선(Mobile-first) 반응형 적용
Google Fonts	Young Serif, Outfit 포트 사용

폴더 구조

recipe-page/
├── index.html
├── style.css
├── assets/         # 이미지 리소스
│   └── images/
├── design/         # 제공된 레퍼런스 이미지
└── README.md

배우는 점

• HTML5 시멘틱 태그 사용의 중요성
• 디자인 시스템에 맞은 간격/색상 적용 방식
• 작은 화면부터 큰 화면으로 확장하는 모바일 우선 접근법
• Web Font 사용 시 fallback 고려 필요

* 모바일 우선 접근법 : 웹이나 앱 UI/UX를 모바일 기준으로 먼저 설계하고,
                                  점차 화면이 커짐에 따라 태블릿 → 데스크탑 순으로 확장하는 방식

GitHub Repository