HTML은 정보를 구조화하고 사용자와 상호작용하는 데 필요한 다양한 요소를 제공합니다.
이 절에서는 리스트, 테이블, 폼 요소의 사용법과 접근성 고려사항을 알아보겠습니다.
리스트
HTML에서는 세 가지 유형의 리스트를 제공합니다.
1. 순서 없는 리스트 <ul>
- 항목의 순서가 중요하지 않을 때 사용합니다.
- 각 항목은
<li>
태그로 표시합니다.
2. 순서 있는 리스트 <ol>
- 항목의 순서가 중요할 때 사용합니다.
type
속성으로 번호 유형을 지정할 수 있습니다 (예 : 1, a, A, i, I).
3. 정의 리스트 <dl>
- 용어와 그에 대한 정의를 나열할 때 사용합니다.
<dt>
는 용어, <dd>
는 정의를 나타냅니다.
테이블
테이블은 행과 열로 구성된 2차원 데이터를 표시하는 데 사용됩니다.
1. 기본 테이블 구조
2. 주요 테이블 태그
<table>
: 테이블의 시작과 끝
<thead>
: 테이블 헤더 그룹
<tbody>
: 테이블 본문
<tr>
: 테이블 행
<th>
: 헤더 셀
<td>
: 데이터 셀
3. 테이블 접근성 향상
<caption>
태그로 테이블 설명 제공
scope
속성으로 헤더 셀의 범위 지정
- 복잡한 테이블의 경우
id
와 headers
속성 사용
폼 요소
폼은 사용자로부터 데이터를 수집하고 서버로 전송하는 데 사용됩니다.
1. 기본 폼 구조
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 등)
- 복잡한 유효성 검사는 자바스크립트로 구현
실제 사용 예시
다음은 리스트, 테이블, 폼 요소를 조합한 실제 사용 예시입니다.
이 예시는 제품 목록을 순서 없는 리스트로 표시하고, 가격 정보를 테이블로 제공하며, 사용자로부터 주문 정보를 수집하는 폼을 포함하고 있습니다.
각 요소는 시맨틱하게 구조화되어 있으며, 라벨링, 그룹핑 등을 통해 접근성을 고려하고 있습니다.
이러한 구조는 정보를 명확히 전달하고 사용자 상호작용을 효과적으로 지원합니다.