홈페이지 만들기 8단원: 게시판 스타일 적용 – 글 목록도 예쁘게!

 

 

홈페이지의 핵심 기능 중 하나인 게시판. 작성된 글이 리스트로 정리돼 보이고, 보기 좋게 스타일링되면 홈페이지의 완성도도 확 올라갑니다!

1. 게시판 기본 구조

<div class="board">
  <div class="post">
    <h3>[공지] 탁구 모임 일정 안내</h3>
    <p>작성자: 차차 | 날짜: 2025-04-23</p>
  </div>

  <div class="post">
    <h3>[후기] 어제 친선 경기 재밌었어요!</h3>
    <p>작성자: 정현 | 날짜: 2025-04-22</p>
  </div>
</div>

2. CSS로 깔끔하게 정리하기

.board {
  max-width: 700px;
  margin: auto;
  padding: 20px;
}
.post {
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}
.post h3 {
  margin: 0;
  color: #2c3e50;
}
.post p {
  font-size: 14px;
  color: #888;
}

3. 공지글은 스타일 차별화하기

.post h3::before {
  content: "[공지] ";
  color: red;
  font-weight: bold;
}

→ 제목 앞에 자동으로 [공지] 붙이기 (선택적으로 class로 처리도 가능)

 

4. 카드형 게시판으로도 만들 수 있어요

.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.post {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  background-color: #fafafa;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

→ 갤러리형 게시판에도 활용 가능!

 

게시판은 단순히 정보를 보여주는 공간이 아니라, ‘내 홈페이지가 살아있다’는 걸 느끼게 해주는 핵심 기능이에요. 앞으로 방명록, 후기 게시판, 공지사항 등으로 다양하게 확장해볼 수 있어요!

 

 

 

 

 

 

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