04. Hero.jsx — 히어로 섹션

이번 단계에서 할 일

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

---

피그마 디자인 분석

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

---

STEP 1 — Hero.jsx 작성

// src/components/Hero.jsx

const Hero = () => {
  return (
    <section className="hero" id="home">

      {/* 제목 영역 */}
      <div className="hero-headline">
        <h1 className="hero-title">Title</h1>
        <p className="hero-subtitle">Subtitle</p>
      </div>

      {/* 버튼 영역 */}
      <div className="hero-buttons">
        <a href="#" className="btn btn--light">
          Github
        </a>
        <a href="#" className="btn btn--dark">
          Resume
        </a>
      </div>

    </section>
  )
}

export default Hero

---

코드 설명

id="home" 이 필요한 이유

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

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

<section> vs <div>

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

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

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

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

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

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

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

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

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

---

STEP 2 — CSS 추가

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

/* ── 히어로 ──────────────────────────────── */

.hero {
  height: 524px;

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

  padding: 0 24px;
}

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

.hero-subtitle {
  font-size: 32px;
  color: #0c0c0d;
  margin-top: 8px;
}

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

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

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

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

/* 밝은 버튼 (Github) */
.btn--light {
  background-color: #e3e3e3;
  color: #1e1e1e;
}

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

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

---

브라우저 확인

저장 후 브라우저에서:

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

---

정리

---