웨딩업체 홈페이지

🛠️ 개발 가이드

웨딩 스튜디오를 위한 골드·아이보리 톤 홈페이지 데모예요. Cormorant Garamond 세리프 폰트와 실제 Unsplash 사진으로 청첩장 같은 감성을 살렸어요.

기술 스택

핵심 구현 포인트

• 순수 HTML/CSS로 받은 디자인 시안을 컴포넌트 CSS 파일(edenWedding.css)로 옮기면서, 모든 선택자 앞에 .eden-scope를 붙여 다른 데모 페이지 스타일과 절대 섞이지 않게 했어요.
• :root 변수는 문서 전체에 적용되는 전역 선택자라 그대로 쓰면 다른 페이지에도 영향을 주기 때문에, .eden-scope 클래스 자체에 CSS 변수를 정의해 스코프를 지켰어요.
• 제목은 Cormorant Garamond(구글 폰트), 본문은 프로젝트 전체에서 쓰는 Pretendard(jsDelivr CDN)로 두 서체를 함께 로드해요.
• 갤러리·예약 섹션 배경은 실제 Unsplash 사진 URL을 사용해요 — 다른 데모의 블로그 썸네일과 같은 패턴이에요.

이렇게 만들면 돼요

1. 순수 HTML/CSS 시안을 받으면, 태그 선택자(nav, section, footer 등)를 전부 부모 스코프 클래스의 자손 선택자로 바꿔요.
2. :root에 있던 CSS 변수는 스코프 클래스 자체로 옮겨서 전역 오염을 막아요.
3. HTML 마크업을 JSX로 옮기면서 반복되는 부분(갤러리 이미지, 패키지 카드)은 배열 + map()으로 바꿔요.
4. 문의 폼은 React state로 감싸서 제출 시 로컬에서만 "접수완료" 화면을 보여줘요.

참고 파일