튜토리얼

HTML/CSS로 학급 홈페이지 만들기

2026년 1월 22일 8분

들어가며: 왜 직접 만들어야 할까?

학급 홈페이지를 운영하고 싶다면 네이버 블로그나 구글 사이트를 이용하는 방법도 있습니다. 하지만 직접 HTML과 CSS로 만들어보면, 내가 원하는 디자인과 기능을 자유롭게 구현할 수 있고, 무엇보다 웹이 어떻게 동작하는지 근본적으로 이해하게 됩니다. 이번 글에서는 초보자도 따라할 수 있는 학급 홈페이지 제작 과정을 단계별로 안내하겠습니다.

1단계: 기본 HTML 구조 만들기

모든 웹페이지는 동일한 기본 구조에서 시작합니다. 먼저 텍스트 에디터(VS Code 추천)를 열고, index.html 파일을 생성한 뒤 다음 코드를 작성해 보세요. 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>우리 반 홈페이지</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>3학년 2반에 오신 것을 환영합니다!</h1>
    <nav>
      <a href="#notice">공지사항</a>
      <a href="#schedule">시간표</a>
      <a href="#gallery">사진첩</a>
    </nav>
  </header>
  <main>
    <section id="notice">
      <h2>공지사항</h2>
      <p>3월 신학기 준비물 안내입니다.</p>
    </section>
  </main>
  <footer>
    <p>3학년 2반 담임 선생님</p>
  </footer>
</body>
</html>

위 코드에서 핵심적인 태그들을 살펴보겠습니다.

  • <header>: 페이지 상단의 제목과 네비게이션 영역입니다
  • <nav>: 페이지 내 이동을 위한 링크 모음입니다
  • <main>: 페이지의 핵심 콘텐츠가 들어가는 영역입니다
  • <section>: 주제별로 콘텐츠를 구분하는 데 사용합니다
  • <footer>: 페이지 하단의 부가 정보 영역입니다
시맨틱(Semantic) 태그를 사용하면 검색 엔진이 페이지 구조를 더 잘 이해할 수 있고, 접근성 측면에서도 훨씬 좋습니다. 단순히 div만 사용하는 것보다 의미 있는 태그를 사용하는 습관을 들이세요.
HTML 태그로 구성한 학급 홈페이지의 기본 뼈대

2단계: CSS로 스타일 입히기

HTML만으로는 밋밋한 페이지가 됩니다. 이제 style.css 파일을 만들어 디자인을 추가해 보겠습니다. 

/* 전체 기본 설정 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Pretendard', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
}

/* 헤더 스타일 */
header {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  text-align: center;
  padding: 2rem;
}

header h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* 네비게이션 스타일 */
nav a {
  color: white;
  text-decoration: none;
  margin: 0 1rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  transition: background 0.3s;
}

nav a:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 메인 콘텐츠 */
main {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

색상 선택 팁

학급 홈페이지의 색상은 밝고 따뜻한 느낌을 주는 것이 좋습니다. 저는 주로 파스텔 톤의 파란색과 보라색 그라디언트를 사용하는데, 아이들이 보기에도 편안하고 학부모님들도 호감을 가지시더라고요. 색상 조합이 고민될 때는 coolors.co 같은 색상 팔레트 생성기를 활용해 보세요.

CSS를 적용한 후 완성된 학급 홈페이지 모습

3단계: 시간표 섹션 추가하기

학급 홈페이지에서 가장 많이 조회되는 콘텐츠 중 하나가 시간표입니다. HTML의 <table> 태그를 사용하여 깔끔한 시간표를 만들어 봅시다. 

<section id="schedule">
  <h2>이번 주 시간표</h2>
  <table>
    <thead>
      <tr>
        <th>교시</th>
        <th>월</th>
        <th>화</th>
        <th>수</th>
        <th>목</th>
        <th>금</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>국어</td>
        <td>수학</td>
        <td>사회</td>
        <td>과학</td>
        <td>영어</td>
      </tr>
    </tbody>
  </table>
</section>

테이블 스타일도 CSS로 꾸며주면 훨씬 보기 좋아집니다. 

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

th, td {
  padding: 0.75rem;
  text-align: center;
  border: 1px solid #e0e0e0;
}

th {
  background: #667eea;
  color: white;
  font-weight: 600;
}

tr:nth-child(even) {
  background: #f8f9fa;
}

4단계: 반응형 디자인 적용

학부모님들은 대부분 스마트폰으로 학급 홈페이지를 확인하십니다. 따라서 반응형 디자인은 선택이 아니라 필수입니다. CSS 미디어 쿼리를 사용하면 화면 크기에 따라 레이아웃을 조정할 수 있습니다. 

@media (max-width: 768px) {
  header h1 {
    font-size: 1.5rem;
  }

  nav a {
    display: block;
    margin: 0.5rem 0;
  }

  table {
    font-size: 0.85rem;
  }
}

마치며

이번 글에서는 HTML과 CSS의 기초를 활용하여 학급 홈페이지를 만드는 과정을 살펴보았습니다. 처음에는 코드가 낯설게 느껴질 수 있지만, 하나씩 따라 하다 보면 어느새 나만의 웹페이지가 완성됩니다. 다음 글에서는 JavaScript를 활용하여 홈페이지에 동적인 기능을 추가하는 방법을 알아보겠습니다.

완벽하지 않아도 괜찮습니다. 직접 코드를 작성하고 결과를 확인하는 과정 자체가 가장 좋은 학습입니다. 일단 시작해 보세요!