도야 사이트 헤더 정본 — G:\내 드라이브\claude-work\_헤더정본

영어도 버전도 빼고,
이름 하나로 끝내는 헤더

기존 헤더에 있던 상단 커맨드 스트립(DOYA · TOOLS), 버전 배지(싹담 v1.2.4 공개 중), 브랜드 밑 영어 표기(DOYA TOOLS)를 전부 걷어냈습니다. 세 가지 중 사이트 성격에 맞는 걸 골라 복사해 쓰면 됩니다.

A · 한 줄

기본값

좌 브랜드 / 우 메뉴 + 버튼 1개. 메뉴 3개 이하, 도구·소개 페이지. 모바일에서는 메뉴가 접히고 버튼만 남습니다(토글 없음).

실제 렌더링입니다 · 스크롤·반응형은 전체 화면에서 확인 전체 화면으로 열기 →
붙여넣을 코드
<header class="hd hd-a">
  <div class="hd-wrap">
    <a class="hd-brand" href="/">
      <span class="hd-mark">싹</span>도야 도구함
    </a>

    <nav class="hd-nav" aria-label="주요 메뉴">
      <a href="#tools">도구</a>
      <a href="#guide">사용법</a>
      <a href="#faq">자주 묻는 질문</a>
    </nav>

    <div class="hd-actions">
      <a class="hd-btn" href="#download">내려받기</a>
    </div>
  </div>
</header>

B · 중앙 메뉴

문서·가이드

좌 이름 / 가운데 메뉴 / 우 버튼 2개. 메뉴 3~6개, 페이지가 여러 장인 사이트. 현재 페이지에 황동 1px 밑줄이 켜집니다. 모바일은 토글 패널.

가운데 메뉴 · 현재 페이지 밑줄 표시 전체 화면으로 열기 →
붙여넣을 코드
<header class="hd hd-b">
  <div class="hd-wrap">
    <a class="hd-brand" href="/">
      <span class="hd-dot" aria-hidden="true"></span>도야마케팅
    </a>

    <nav class="hd-nav" id="hd-menu-b" aria-label="주요 메뉴">
      <a href="#intro" aria-current="page">소개</a>
      <a href="#service">서비스</a>
      <a href="#case">사례</a>
      <a href="#note">기록</a>
    </nav>

    <div class="hd-actions">
      <a class="hd-btn is-ghost" href="#price">이용 안내</a>
      <a class="hd-btn" href="#contact">상담 신청</a>
      <button class="hd-burger" type="button" aria-label="메뉴 열기"
              aria-expanded="false" aria-controls="hd-menu-b">
        <i></i><i></i><i></i>
      </button>
    </div>
  </div>
</header>

C · 캡슐(플로팅)

랜딩

배경 위에 떠 있는 둥근 바. 황동 1px 테두리가 가장 잘 사는 형태로, 히어로가 강한 랜딩·제품 소개용. 스크롤하면 배경이 진해집니다.

떠 있는 캡슐 · 스크롤 시 배경 강화 전체 화면으로 열기 →
붙여넣을 코드
<header class="hd hd-c">
  <div class="hd-wrap">
    <div class="hd-bar">
      <a class="hd-brand" href="/">싹담</a>

      <nav class="hd-nav" id="hd-menu-c" aria-label="주요 메뉴">
        <a href="#feature">기능</a>
        <a href="#price">가격</a>
        <a href="#faq">문의</a>
      </nav>

      <span class="hd-rule" aria-hidden="true"></span>

      <div class="hd-actions">
        <a class="hd-btn" href="#download">받기</a>
        <button class="hd-burger" type="button" aria-label="메뉴 열기"
                aria-expanded="false" aria-controls="hd-menu-c">
          <i></i><i></i><i></i>
        </button>
      </div>
    </div>
  </div>
</header>

새 사이트에 붙이는 순서

  1. header.css와 header.js를 새 사이트 폴더에 복사한다.
  2. <head>에 <link rel="stylesheet" href="header.css">, </body> 앞에 <script src="header.js" defer></script>.
  3. 위 3종 중 하나를 <body> 맨 위에 붙이고 이름·메뉴·버튼 글자만 바꾼다.
  4. 사이트가 네이비 체계면 <html data-theme="navy">. 버건디면 아무것도 안 해도 된다.
지킬 것 — 헤더 안에 영어 표기·버전·상태 배지를 다시 넣지 않는다 · 황동은 1px 라인에만 쓰고 면을 채우지 않는다 · 색 토큰은 페이지 정본(--primary, --text …)을 자동으로 따라가므로 헤더 CSS 안의 색을 직접 고치지 않는다.