04 Hero

04. Hero.jsx — 히어로 섹션

이번 단계에서 할 일

페이지 상단의 인상적인 소개 영역(히어로 섹션)을 만듭니다.

피그마 디자인 분석

1
┌──────────────────────────────────────────────────┐
2
│                                                  │
3
│   Title        ← 폰트 72px, 색상 #0c0c0d         │
4
│   Subtitle     ← 폰트 32px, 색상 #0c0c0d         │
5
│                                                  │
6
│   [Github]  [Resume]                             │
7
│    ↑ 밝은버튼   ↑ 어두운버튼                       │
8
│    #e3e3e3      #2c2c2c (흰 텍스트)               │
9
│                                                  │
10
└──────────────────────────────────────────────────┘
11
높이: 524px

STEP 1 — Hero.jsx 작성

1
const Hero = () => {
2
  return (
3
    <section className="hero" id="home">
4

5
      {/* 제목 영역 */}
6
      <div className="hero-headline">
7
        <h1 className="hero-title">Title</h1>
8
        <p className="hero-subtitle">Subtitle</p>
9
      </div>
10

11
      {/* 버튼 영역 */}
12
      <div className="hero-buttons">
13
        <a href="#" className="btn btn--light">
14
          Github
15
        </a>
16
        <a href="#" className="btn btn--dark">
17
          Resume
18
        </a>
19
      </div>
20

21
    </section>
22
  )
23
}
24

25
export default Hero

코드 설명

`id="home"` 이 필요한 이유

Nav에서 메뉴를 클릭하면 href="#home" 으로 이동합니다. id="home" 이 있는 요소로 스크롤됩니다.

1
Nav 메뉴 클릭
2
    href="#home"
3
          ↓
4
    id="home" 을 찾아서 이동

`<section>` vs `<div>`

<div> : 의미 없는 그냥 묶음 박스
<section> : 독립적인 내용 구역을 나타냄 (접근성, SEO에 좋음)

버튼에 `<a>` 태그를 쓰는 이유

피그마에서 Github 버튼은 외부 링크로 이동합니다. 클릭 시 다른 페이지로 이동하는 버튼은 <a> 태그가 적합합니다.

1
// 링크 이동: <a> 사용
2
<a href="https://github.com/..." className="btn btn--light">Github</a>
3

4
// 폼 제출·동작 실행: <button> 사용
5
<button onClick={handleSubmit}>Submit</button>

`btn--light` / `btn--dark` 클래스 명명 규칙

-- (더블 하이픈)으로 수식어(modifier) 를 구분하는 BEM 방식입니다.

1
btn          → 기본 버튼 스타일
2
btn--light   → 밝은 버튼 (수식어)
3
btn--dark    → 어두운 버튼 (수식어)

두 버튼 모두 btn 클래스로 공통 스타일을 받고, btn--light / btn--dark 로 색상만 다르게 합니다.

STEP 2 — CSS 추가

1
/* src/index.css 에 추가 */
2

3
/* ── 히어로 ──────────────────────────────── */
4

5
.hero {
6
  height: 524px;
7

8
  /* 내용을 세로로 가운데 배치 */
9
  display: flex;
10
  flex-direction: column;
11
  justify-content: center;
12
  gap: 40px;           /* 제목 영역과 버튼 영역 사이 간격 */
13

14
  padding: 0 24px;
15
}
16

17
.hero-title {
18
  font-size: 72px;
19
  font-weight: 700;
20
  color: #0c0c0d;
21
  line-height: 1.2;  /* 줄 간격: 글자 크기의 1.2배 */
22
}
23

24
.hero-subtitle {
25
  font-size: 32px;
26
  color: #0c0c0d;
27
  margin-top: 8px;
28
}
29

30
/* ── 버튼 공통 스타일 ─────────────────────── */
31

32
.hero-buttons {
33
  display: flex;
34
  gap: 16px;  /* 버튼 사이 간격 */
35
}
36

37
.btn {
38
  display: inline-flex;
39
  align-items: center;
40
  justify-content: center;
41
  gap: 8px;
42

43
  padding: 0 20px;
44
  height: 40px;
45
  border-radius: 6px;
46
  font-size: 16px;
47
  cursor: pointer;  /* 마우스 커서를 손가락 모양으로 */
48

49
  /* 색상 변화가 부드럽게 */
50
  transition: opacity 0.2s;
51
}
52

53
/* 밝은 버튼 (Github) */
54
.btn--light {
55
  background-color: #e3e3e3;
56
  color: #1e1e1e;
57
}
58

59
/* 어두운 버튼 (Resume) */
60
.btn--dark {
61
  background-color: #2c2c2c;
62
  color: #f5f5f5;
63
}
64

65
/* 마우스 올리면 살짝 투명하게 */
66
.btn:hover {
67
  opacity: 0.8;
68
}

브라우저 확인

저장 후 브라우저에서:

큰 제목(Title)과 부제목(Subtitle)이 보입니다
아래에 버튼 2개가 나란히 있습니다
Github 버튼은 밝은 회색, Resume 버튼은 어두운 색입니다

정리

요소	사용 이유
`<section id="home">`	Nav 클릭 시 이동 대상
`<a>` 태그 버튼	외부 링크 이동
`btn` + `btn--dark`	공통 스타일 + 색상 수식어
`flexbox`	버튼 가로 나열, 히어로 세로 정렬