HTML 코드
<section class="hero">
<p class="eyebrow">NEW</p>
<h1>일을 더 빠르게,<br>AI와 함께</h1>
<p class="sub">설치 없이 바로 시작하세요.</p>
<div><button class="pri">무료로 시작</button><button>데모 보기</button></div>
</section>
<style>
.hero{min-height:calc(100vh - 32px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-radius:16px;background:linear-gradient(160deg,var(--surface),var(--bg))}
.eyebrow{color:var(--accent);font-weight:700;font-size:12px;margin:0}
h1{font-size:32px;line-height:1.2;margin:8px 0}
.sub{color:var(--muted);margin:0 0 16px}
button{font:inherit;padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--fg);margin:0 4px}
.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
</style>AI에게 이렇게 요청하세요
랜딩 페이지 맨 위에 화면 높이 80%로 큰 제목·한 줄 설명·버튼 2개(채움/테두리)·오른쪽 이미지 자리가 있는 히어로 섹션 만들어줘
<section class="hero">
<p class="eyebrow">NEW</p>
<h1>일을 더 빠르게,<br>AI와 함께</h1>
<p class="sub">설치 없이 바로 시작하세요.</p>
<div><button class="pri">무료로 시작</button><button>데모 보기</button></div>
</section>
<style>
.hero{min-height:calc(100vh - 32px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-radius:16px;background:linear-gradient(160deg,var(--surface),var(--bg))}
.eyebrow{color:var(--accent);font-weight:700;font-size:12px;margin:0}
h1{font-size:32px;line-height:1.2;margin:8px 0}
.sub{color:var(--muted);margin:0 0 16px}
button{font:inherit;padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--fg);margin:0 4px}
.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
</style>언제 쓰나
서비스·제품 소개 페이지의 첫 화면. 방문자가 3초 안에 “무엇을 하는 곳인지” 알게 하는 영역.
비슷한 것과 차이
- 벤토 그리드: 히어로 아래에서 기능 여러 개를 타일로 보여주는 영역
- 배너: 히어로보다 작고 가로로 긴 홍보 띠를 말할 때가 많음