로그인 · 가입
KREN
← 홈페이지 5강 목록으로
📊
EPISODE 04
table · thead/tbody/tfoot · colspan · rowspan · input 다양한 타입 · select · textarea · 검증 · header · nav · main · section · article · aside · footer

테이블 · 폼 · 시맨틱 HTML

데이터를 행과 열로 구조화하는 테이블의 문법(table, thead/tbody/tfoot, tr/th/td)과 셀 병합(colspan, rowspan), 접근성을 위한 scope/caption을 익힙니다. 사용자로부터 데이터를 입력받는 폼의 모든 것 — form 태그, input의 다양한 type, label, select, textarea, fieldset, 그리고 입력 검증 속성까지. 의미 있는 태그를 사용해 SEO와 접근성에 강한 HTML을 작성합니다. div의 무더기를 header/nav/main/section/article/aside/footer로 대체합니다.

HTMLtablecolspanrowspanforminput검증시맨틱SEO접근성
소요 시간
⏱ 30~60분 + 60분 + 60분
난이도
📊 초보
선수 조건
🎯 html-03
결과물
병합 셀과 접근성을 갖춘 표 작성 / 회원가입·설문조사 형태의 폼 페이지 / div 위주에서 의미 있는 태그로 재구성한 블로그 레이아웃

이 강의에서 배우는 것

  • 1thead/tbody/tfoot 구조를 이해한다
  • 2tr/th/td를 적절히 사용한다
  • 3colspan/rowspan으로 셀을 병합한다
  • 4scope와 caption으로 접근성을 높인다
  • 5form의 action/method 속성과 GET/POST 차이를 이해한다
  • 6input의 다양한 type(text/email/password/checkbox/radio/file/date 등)을 적재적소에 사용한다
  • 7label로 입력 요소와 설명을 연결한다 (접근성)
  • 8fieldset/legend로 폼을 그룹화한다
  • 9required/pattern/min/max 같은 검증 속성을 적용한다
  • 10비시맨틱 div와 시맨틱 태그의 차이를 설명한다
  • 11header/nav/main/section/article/aside/footer를 적절히 배치한다
  • 12section vs article을 구분한다
  • 13time/address/figure 같은 보조 시맨틱 태그를 활용한다

테이블

데이터를 행과 열로 구조화하는 테이블의 문법(table, thead/tbody/tfoot, tr/th/td)과 셀 병합(colspan, rowspan), 접근성을 위한 scope/caption을 익힙니다.

1. 테이블이란

행(row)과 열(column)로 이루어진 격자에 데이터를 정렬해 표시합니다. 엑셀 표를 HTML로 표현한다고 생각하면 됩니다.

⚠️

테이블은 데이터 표현용입니다. 페이지 레이아웃에는 절대 사용하지 마세요 — Flexbox/Grid가 올바른 도구입니다.

2. 기본 테이블 구조

html
<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>직업</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>25</td>
      <td>학생</td>
    </tr>
    <tr>
      <td>김철수</td>
      <td>30</td>
      <td>개발자</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">총 2명</td>
    </tr>
  </tfoot>
</table>

3. thead / tbody / tfoot

태그역할
<thead>머리글 행 — 열 제목
<tbody>본문 데이터 행
<tfoot>바닥글 — 합계·요약

4. colspan — 열 병합

html
<tr>
  <td>수학</td>
  <td colspan="2">영어 (2시간)</td>  <!-- 가로 2칸 병합 -->
</tr>

5. rowspan — 행 병합

html
<tr>
  <td rowspan="2">홍길동</td>  <!-- 세로 2칸 병합 -->
  <td>수학</td>
  <td>90</td>
</tr>
<tr>
  <td>영어</td>
  <td>85</td>
</tr>

6. scope 속성 (접근성)

html
<th scope="col">이름</th>     <!-- 열 제목 -->
<th scope="row">1반</th>      <!-- 행 제목 -->

스크린리더가 테이블을 올바르게 읽도록 th에 scope를 지정합니다.

7. caption — 테이블 제목

html
<table>
  <caption>2026년 1분기 판매 실적</caption>
  <thead>...</thead>
</table>

폼 (Form)

사용자로부터 데이터를 입력받는 폼의 모든 것 — form 태그, input의 다양한 type, label, select, textarea, fieldset, 그리고 입력 검증 속성까지.

1. form 태그

html
<form action="처리할 URL" method="get 또는 post">
  <!-- 입력 요소들 -->
</form>

GET vs POST

html
<!-- GET: URL에 데이터 노출, 검색 등 -->
<form action="/search" method="get">
  <input type="text" name="query">
  <button type="submit">검색</button>
</form>
<!-- 제출 시 URL: /search?query=값 -->

<!-- POST: URL에 노출 X, 회원가입·로그인 -->
<form action="/login" method="post">
  <input type="email" name="email">
  <input type="password" name="password">
  <button type="submit">로그인</button>
</form>

2. input 타입별

html
<input type="text" name="username" placeholder="이름" maxlength="20">
<input type="email" name="email" placeholder="example@email.com">
<input type="password" name="password" minlength="8">
<input type="number" name="age" min="0" max="150" step="1">
<input type="checkbox" name="hobby" value="reading" checked>
<input type="radio" name="gender" value="male">
<input type="file" name="profile" accept="image/*">
<input type="date" name="birthday" min="1900-01-01" max="2026-12-31">
<input type="range" name="rate" min="1" max="10" value="5">
<input type="hidden" name="user_id" value="12345">
<input type="tel" placeholder="010-0000-0000">
<input type="url" placeholder="https://example.com">
<input type="color">
<input type="search" placeholder="검색">

3. label

html
<!-- 방법 1: for + id (권장) -->
<label for="username">이름:</label>
<input type="text" id="username" name="username">

<!-- 방법 2: 감싸기 -->
<label>
  이름:
  <input type="text" name="username">
</label>
💡

라벨을 클릭하면 연결된 입력 요소가 포커스됩니다. 스크린리더도 label을 읽으므로 접근성에 필수.

4. select — 드롭다운

html
<select name="city">
  <option value="">-- 선택하세요 --</option>
  <option value="seoul" selected>서울</option>
  <option value="busan">부산</option>
</select>

<!-- optgroup으로 그룹화 -->
<select name="job">
  <optgroup label="IT 분야">
    <option value="dev">개발자</option>
    <option value="design">디자이너</option>
  </optgroup>
  <optgroup label="일반">
    <option value="sales">영업</option>
  </optgroup>
</select>

<!-- 다중 선택 -->
<select name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
</select>

5. textarea — 여러 줄 입력

html
<label for="message">메시지:</label>
<textarea id="message" name="message" rows="5" cols="40"
          placeholder="여기에 입력하세요..." maxlength="500"></textarea>

6. button

html
<button type="submit">제출하기</button>
<button type="reset">다시 작성</button>
<button type="button" onclick="alert('클릭!')">일반 버튼</button>

7. fieldset / legend — 폼 그룹화

html
<form>
  <fieldset>
    <legend>개인 정보</legend>
    <label for="name">이름:</label>
    <input type="text" id="name">
  </fieldset>
  <fieldset>
    <legend>계정 정보</legend>
    <label for="pw">비밀번호:</label>
    <input type="password" id="pw">
  </fieldset>
  <button type="submit">가입하기</button>
</form>

8. 입력 검증 속성

html
<input type="text" required>                    <!-- 필수 -->
<input type="text" placeholder="홍길동">          <!-- 힌트 -->
<input type="text" disabled>                     <!-- 비활성화 -->
<input type="text" value="값" readonly>           <!-- 읽기 전용 -->
<input type="text" minlength="2" maxlength="20"> <!-- 길이 -->
<input type="number" min="1" max="150">          <!-- 숫자 범위 -->
<input type="text" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
       placeholder="010-1234-5678">             <!-- 정규식 -->

시맨틱 HTML

의미 있는 태그를 사용해 SEO와 접근성에 강한 HTML을 작성합니다. div의 무더기를 header/nav/main/section/article/aside/footer로 대체합니다.

1. 시맨틱이란

div vs 시맨틱

html
<!-- 비시맨틱 (나쁜 예) -->
<div id="header">...</div>
<div id="nav">...</div>
<div id="main">...</div>

<!-- 시맨틱 (좋은 예) -->
<header>...</header>
<nav>...</nav>
<main>...</main>

두 코드는 브라우저에서 같아 보일 수 있지만, 시맨틱 방식은 코드의 의미가 훨씬 명확합니다.

2. 왜 시맨틱 HTML?

  • SEO: 검색엔진이 페이지 내용을 더 잘 이해 → 검색 순위에 영향
  • 접근성: 스크린리더가 페이지 구조를 안내 ("내비게이션 메뉴", "주요 콘텐츠 시작" 등)
  • 가독성: 개발자가 코드의 역할을 바로 이해 → 유지보수·협업이 쉬워짐

3. 주요 시맨틱 태그

header

html
<header>
  <h1>사이트 이름</h1>
  <nav>...</nav>
</header>

페이지 또는 섹션의 머리글. article 안에도 사용 가능.

nav

html
<nav>
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="/about">소개</a></li>
  </ul>
</nav>

주요 내비게이션에만. 본문 중간 일반 링크에는 사용하지 않습니다.

main

페이지의 핵심 내용. 페이지에 하나만 사용.

section vs article

태그독립성사용 예
<section>다른 섹션과 연관된 부분 구획챕터, 탭 패널, 카테고리 묶음
<article>독립적으로 의미가 완결되는 콘텐츠블로그 글, 뉴스 기사, 댓글

aside

주요 콘텐츠와 간접적으로 관련된 부가 정보. 사이드바, 광고, 관련 글 등.

footer

html
<footer>
  <p>© 2026 홍길동</p>
  <address>이메일: hong@example.com</address>
</footer>

4. 보조 시맨틱 태그

time

html
<time datetime="2026-05-10">2026년 5월 10일</time>
<time datetime="2026-05-10T14:30">오후 2시 30분</time>

address

html
<address>
  작성자: <a href="mailto:hong@example.com">홍길동</a><br>
  서울특별시 강남구 테헤란로 123
</address>

5. 전체 페이지 레이아웃 예시

html
<body>
  <header>
    <h1>나의 블로그</h1>
    <nav>
      <ul><li><a href="/">홈</a></li><li><a href="/html">HTML</a></li></ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>최신 글</h2>
      <article>
        <header>
          <h3>HTML 기초 완전 정복</h3>
          <time datetime="2026-05-10">2026-05-10</time>
        </header>
        <p>본문...</p>
        <footer><p>태그: HTML, 기초</p></footer>
      </article>
    </section>
  </main>

  <aside>
    <h2>카테고리</h2>
    <ul><li><a href="/html">HTML (6편)</a></li></ul>
  </aside>

  <footer>
    <p>© 2026 홍길동</p>
    <address>hong@example.com</address>
  </footer>
</body>

6. div와 span은 언제?

시맨틱 태그로 대체할 수 없을 때 사용합니다 — 단순 스타일 적용용 묶음.

html
<div class="card-grid">
  <article>...</article>
  <article>...</article>
</div>

<p>가격: <span class="price">35,000원</span> (부가세 포함)</p>
예제 코드 / 강의 자료

전체 강의 자료와 예제 코드는 GitHub에서 자유롭게 받아볼 수 있습니다.

GitHub에서 보기 ↗

댓글 0

아직 댓글이 없습니다. 첫 댓글을 남겨 주세요.

댓글은 회원만 쓸 수 있습니다.

광고·욕설·비방·개인정보·불법 내용이 담긴 댓글은 숨기거나 지웁니다. 댓글은 닉네임과 함께 공개됩니다. 개인정보처리방침