지난 시간에는 Flexbox를 이용해 깔끔한 네비게이션 바를 만들어 보았습니다. 이제 방문자가 우리 사이트에 들어왔을 때 가장 먼저 마주하게 되는 히어로 섹션(Hero Section) 을 꾸며볼 차례입니다.
히어로 섹션은 웹사이트의 첫인상을 결정짓는 아주 중요한 공간입니다. 이곳에서 우리는 사이트의 정체성을 알리고, 사용자가 다음 행동을 하도록 친절하게 유도해야 합니다. 세련된 그라디언트 배경과 함께 멋진 화면을 함께 만들어 볼까요?
1. 히어로 섹션의 구조 잡기
먼저 HTML 구조를 생각해 봅시다. 히어로 섹션에는 보통 큰 제목(Heading), 부연 설명(Subtext), 그리고 클릭을 유도하는 버튼(CTA – Call To Action)이 들어갑니다. 사용자의 시선이 분산되지 않도록 하나의 컨테이너로 감싸주는 것이 좋습니다.
<!-- index.html -->
<header id="home" class="hero">
<div class="hero-content">
<h1>Creative<br />Web Developer</h1>
<p>HTML, CSS, JavaScript로 만드는<br />인터랙티브한 웹 경험을 제공합니다.</p>
<div class="btn-group">
<button class="btn-main">프로젝트 보기</button>
<button class="btn-main">연락하기</button>
</div>
</div>
</header>2. 눈길을 사로잡는 그라디언트 배경
단색 배경보다는 부드러운 그라디언트를 사용하면 훨씬 현대적이고 깊이 있는 느낌을 줄 수 있습니다. CSS의 linear-gradient 속성을 사용해 배경을 입혀보겠습니다.
/* style.css */
.hero {
/* 화면 전체 높이를 차지하도록 설정하여 몰입감을 줍니다. */
min-height: 100vh;
/* 세련된 보라색 계열의 그라디언트를 입혀봅니다. 135도 방향으로 색이 변하도록 설정했습니다. */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* 내부 요소들을 화면 정중앙에 배치하기 위해 Flexbox를 사용합니다. */
display: flex;
justify-content: center; /* 가로 방향 중앙 정렬 */
align-items: center; /* 세로 방향 중앙 정렬 */
text-align: center; /* 텍스트 중앙 정렬 */
color: white;
padding: 0 20px;
}💡 여기서 잠깐! min-height: 100vh는 뷰포트(화면) 높이의 100%를 최소 높이로 잡겠다는 의미입니다. 덕분에 어떤 기기에서 접속하더라도 히어로 섹션이 화면을 가득 채우는 시원한 느낌을 줄 수 있습니다.
3. 콘텐츠 스타일링과 가독성 높이기
히어로 섹션 안의 텍스트들이 너무 답답해 보이지 않도록 적절한 여백과 크기를 조절해 보겠습니다. 제목은 굵고 크게, 설명글은 살짝 투명도를 주어 시각적 위계를 만들어주는 것이 포인트입니다.
.hero-content h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 20px;
line-height: 1.2; /* 줄 간격을 조절해 가독성을 높입니다. */
}
.hero-content p {
font-size: 1.2rem;
margin-bottom: 40px;
opacity: 0.9; /* 부연 설명은 살짝 투명하게 하여 제목을 더 돋보이게 합니다. */
}4. 매력적인 CTA 버튼 디자인
사용자가 가장 먼저 클릭하길 원하는 버튼은 눈에 잘 띄어야 합니다. 배경색과 대비되는 흰색을 사용하고, 마우스를 올렸을 때 부드럽게 반응하도록 효과를 넣어보겠습니다.
.btn-main {
display: inline-block;
padding: 15px 40px;
background-color: #fff;
color: #764ba2; /* 배경 그라디언트와 어울리는 색상 */
text-decoration: none;
border-radius: 50px; /* 둥근 버튼으로 부드러운 인상을 줍니다. */
font-weight: 700;
transition: all 0.3s ease; /* 모든 변화가 0.3초 동안 부드럽게 일어납니다. */
}
/* 마우스를 올렸을 때 살짝 위로 떠오르며 그림자가 생기는 효과를 줍니다. */
.btn-main:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}마무리하며
이제 브라우저를 새로고침해서 확인해 보세요! 화면을 가득 채운 아름다운 그라디언트와 그 중앙에 정갈하게 놓인 메시지가 여러분을 반겨줄 것입니다. 히어로 섹션은 단순히 예쁜 디자인을 넘어, 우리 사이트가 전달하고자 하는 핵심 가치를 가장 먼저 보여주는 소중한 공간이라는 점을 꼭 기억해 주세요.
다음 시간에는 사이트의 신뢰도를 높여주는 **서비스 소개 섹션(Features Section)**을 아이콘과 함께 깔끔하게 배치하는 방법을 알아보겠습니다.
오늘도 함께 학습해 주셔서 감사합니다. 작업하시다 궁금한 점이 생기면 언제든 편하게 말씀해 주세요!
Tip: 그라디언트 색상 조합이 고민된다면 uiGradients 같은 사이트를 참고해 보시는 것도 좋은 방법입니다.