[광고]홈페이지 만들기 5단원: 예쁜 홈페이지 디자인 – 헤더, 버튼, 레이아웃 꾸미기

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

 

홈페이지의 첫인상은 디자인에서 결정됩니다. 이번 단원에서는 헤더, 버튼, 전체 레이아웃을 예쁘게 꾸미는 방법을 배워볼 거예요. HTML과 CSS로 충분히 감각적인 UI를 만들 수 있어요!

1. 헤더(Header) 디자인 기본

<header>
  <h1>차차의 탁구 동호회</h1>
  <nav>
    <a href="#">홈</a>
    <a href="#">게시판</a>
    <a href="#">갤러리</a>
  </nav>
</header>

/* CSS */
header {
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  text-align: center;
}
header nav a {
  color: white;
  margin: 0 10px;
  text-decoration: none;
  font-weight: bold;
}

→ 깔끔한 네비게이션 바가 완성돼요!

2. 버튼 스타일링

<button class="primary-btn">가입하기</button>

.primary-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
.primary-btn:hover {
  background-color: #2980b9;
}

→ 버튼에 색상, 둥근 모서리, hover 효과를 줘서 훨씬 깔끔해져요.

3. 카드형 레이아웃 만들기

<div class="card">
  <img src="https://via.placeholder.com/300x200" alt="샘플">
  <h3>차차의 탁구 이야기</h3>
  <p>재미있는 활동 사진과 후기를 공유합니다.</p>
</div>

.card {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 16px;
  width: 300px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  margin: 10px auto;
}
.card img {
  width: 100%;
  border-radius: 10px;
}

→ 블로그, 갤러리형 홈페이지에 필수인 ‘카드 UI’ 완성!

 

코딩도 결국은 ‘꾸미기’의 연장선이에요. 작은 CSS 하나만 바꿔도 홈페이지 분위기가 확 달라져요. 이번 단원까지 익히면, 기본형 블로그형 홈페이지는 충분히 직접 만들 수 있어요!