피그마 기초

처음부터 전부 만들려고 하지 말고 구조 → 공통 스타일 → 섹션별 제작 → 반응형 → 애니메이션 순서로 가면 됩니다.

추천 순서
1. 폴더 만들기
dongbusan-cc/
├─ index.html
├─ css/
│ └─ style.css
├─ js/
│ └─ main.js
└─ images/
2. HTML 구조 먼저 작성
<header></header>

<main>
<section class="hero"></section>
<section class="intro"></section>
<section class="course"></section>
<section class="clubhouse"></section>
<section class="reservation"></section>
<section class="location"></section>
</main>

<footer></footer>
3. 피그마 기준으로 공통 스타일 정리

먼저 이것부터 정하세요.

:root {
--main-color: #1f3b2d;
--sub-color: #c8a96a;
--text-color: #222;
--gray-color: #777;
--bg-color: #f7f5ef;
}

그리고 공통 여백도 정합니다.

section {
padding: 120px 0;
}

.inner {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
4. PC 화면부터 제작

처음에는 반응형 생각하지 말고
1920px 또는 1440px 기준 PC 디자인부터 맞추세요.

순서는 이렇게 추천합니다.

Header
↓
Hero
↓
Course
↓
Clubhouse
↓
Reservation
↓
Footer
5. 모바일 반응형 추가

PC가 어느 정도 완성되면 아래처럼 모바일을 잡습니다.

@media (max-width: 768px) {
section {
padding: 70px 0;
}

.inner {
width: 92%;
}

.course-list {
grid-template-columns: 1fr;
}
}
6. 마지막에 애니메이션 추가

처음부터 애니메이션 넣으면 복잡해집니다.
레이아웃 완성 후에 추가하세요.

추천 애니메이션은:

메뉴 hover
카드 hover 확대
스크롤 fade-up
Hero 텍스트 등장
예약 버튼 fixed
지금 바로 해야 할 작업

오늘은 이 순서로 하면 됩니다.

1. 프로젝트 폴더 만들기
2. index.html / style.css / main.js 생성
3. HTML 전체 섹션 뼈대 작성
4. Header + Hero 먼저 완성
5. 그다음 Course Section 제작

가장 먼저 만들 부분은 Header + Hero Section입니다.
이 두 개가 완성되면 전체 사이트 분위기가 잡힙니다.