icon

리스트, 테이블, 폼 요소

 HTML은 정보를 구조화하고 사용자와 상호작용하는 데 필요한 다양한 요소를 제공합니다.

 이 절에서는 리스트, 테이블, 폼 요소의 사용법과 접근성 고려사항을 알아보겠습니다.

리스트

 HTML에서는 세 가지 유형의 리스트를 제공합니다.

 1. 순서 없는 리스트 <ul>

  • 항목의 순서가 중요하지 않을 때 사용합니다.
  • 각 항목은 <li> 태그로 표시합니다.
<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>오렌지</li>
</ul>

 2. 순서 있는 리스트 <ol>

  • 항목의 순서가 중요할 때 사용합니다.
  • type 속성으로 번호 유형을 지정할 수 있습니다 (예 : 1, a, A, i, I).
<ol type="A">
  <li>첫 번째 단계</li>
  <li>두 번째 단계</li>
  <li>세 번째 단계</li>
</ol>

 3. 정의 리스트 <dl>

  • 용어와 그에 대한 정의를 나열할 때 사용합니다.
  • <dt>는 용어, <dd>는 정의를 나타냅니다.
<dl>
  <dt>HTML</dt>
  <dd>웹 페이지의 구조를 정의하는 마크업 언어</dd>
  <dt>CSS</dt>
  <dd>웹 페이지의 스타일을 지정하는 언어</dd>
</dl>

테이블

 테이블은 행과 열로 구성된 2차원 데이터를 표시하는 데 사용됩니다.

 1. 기본 테이블 구조

<table>
  <thead>
    <tr>
      <th>제목 1</th>
      <th>제목 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>데이터 1</td>
      <td>데이터 2</td>
    </tr>
  </tbody>
</table>

 2. 주요 테이블 태그

  • <table> : 테이블의 시작과 끝
  • <thead> : 테이블 헤더 그룹
  • <tbody> : 테이블 본문
  • <tr> : 테이블 행
  • <th> : 헤더 셀
  • <td> : 데이터 셀

 3. 테이블 접근성 향상

  • <caption> 태그로 테이블 설명 제공
  • scope 속성으로 헤더 셀의 범위 지정
  • 복잡한 테이블의 경우 id와 headers 속성 사용
<table>
  <caption>분기별 판매 실적</caption>
  <thead>
    <tr>
      <th scope="col">분기</th>
      <th scope="col">판매액</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1분기</th>
      <td>10,000,000원</td>
    </tr>
    <tr>
      <th scope="row">2분기</th>
      <td>15,000,000원</td>
    </tr>
  </tbody>
</table>

폼 요소

 폼은 사용자로부터 데이터를 수집하고 서버로 전송하는 데 사용됩니다.

 1. 기본 폼 구조

<form action="/submit-url" method="post">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">제출</button>
</form>

 2. 주요 폼 요소

  • <input> : 다양한 유형의 입력 필드 (text, password, checkbox, radio 등)
  • <select> : 드롭다운 목록
  • <textarea> : 여러 줄 텍스트 입력
  • <button> : 버튼 요소

 3. 라벨과 접근성

  • 모든 입력 필드에 <label> 연결
  • placeholder는 힌트로만 사용하고, 필수 정보는 라벨에 포함

 4. 폼 데이터 전송

  • method 속성 : GET(데이터를 URL에 포함) 또는 POST(데이터를 요청 본문에 포함)
  • action 속성 : 데이터를 전송할 서버의 URL

 5. 폼 유효성 검사

  • HTML5 내장 유효성 검사 속성 사용 (required, pattern, min, max 등)
  • 복잡한 유효성 검사는 자바스크립트로 구현

실제 사용 예시

 다음은 리스트, 테이블, 폼 요소를 조합한 실제 사용 예시입니다.

<h1>제품 주문 양식</h1>
 
<h2>제품 목록</h2>
<ul>
  <li>노트북</li>
  <li>스마트폰</li>
  <li>태블릿</li>
</ul>
 
<h2>가격표</h2>
<table>
  <caption>제품별 가격 정보</caption>
  <thead>
    <tr>
      <th scope="col">제품명</th>
      <th scope="col">가격</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>노트북</td>
      <td>1,000,000원</td>
    </tr>
    <tr>
      <td>스마트폰</td>
      <td>800,000원</td>
    </tr>
    <tr>
      <td>태블릿</td>
      <td>600,000원</td>
    </tr>
  </tbody>
</table>
 
<h2>주문 양식</h2>
<form action="/submit-order" method="post">
  <fieldset>
    <legend>개인 정보</legend>
    <label for="name">이름:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="phone">전화번호:</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" placeholder="000-0000-0000">
  </fieldset>
  
  <fieldset>
    <legend>주문 정보</legend>
    <label for="product">제품 선택:</label>
    <select id="product" name="product" required>
      <option value="">선택하세요</option>
      <option value="laptop">노트북</option>
      <option value="smartphone">스마트폰</option>
      <option value="tablet">태블릿</option>
    </select>
    
    <label for="quantity">수량:</label>
    <input type="number" id="quantity" name="quantity" min="1" max="10" value="1">
    
    <label for="comments">추가 요청사항:</label>
    <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
  </fieldset>
  
  <button type="submit">주문하기</button>
</form>

 이 예시는 제품 목록을 순서 없는 리스트로 표시하고, 가격 정보를 테이블로 제공하며, 사용자로부터 주문 정보를 수집하는 폼을 포함하고 있습니다.

 각 요소는 시맨틱하게 구조화되어 있으며, 라벨링, 그룹핑 등을 통해 접근성을 고려하고 있습니다.

 이러한 구조는 정보를 명확히 전달하고 사용자 상호작용을 효과적으로 지원합니다.

이전으로다음으로