1. 테이블 태그 (<table>, <tr>, <td>, <th> 등)
기본 구조
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
구성 요소 요약
| 태그/속성 |
설명 |
<table> |
표 생성. border, cellspacing, cellpadding, width, align 등 속성 사용 |
<tr> |
테이블의 한 행(row) |
<td> |
테이블의 데이터 셀 |
<th> |
테이블의 제목 셀 (기본적으로 굵고 가운데 정렬) |
colspan |
셀 가로 병합 |
rowspan |
셀 세로 병합 |
align, bgcolor, width |
정렬, 배경색, 셀 너비 등 스타일 지정 |
2. 폼 태그 (<form>, <input>, <select>, <textarea>, <button>)
기본 구조 예시
<form action="submit.jsp" method="post">
<input type="text" name="userid" placeholder="아이디">
<input type="password" name="userpw" placeholder="비밀번호">
<button type="submit">제출</button>
</form>
주요 입력 태그 정리
| 태그/속성 |
설명 |
<form> |
사용자 입력을 서버로 전송하는 영역 (action, method) |
<input type="text"> |
한 줄 텍스트 입력 |
<input type="password"> |
비밀번호 입력 (**** 표시) |
<input type="file"> |
파일 업로드 필드 |
<input type="radio"> |
라디오 버튼 (단일 선택) |
<input type="checkbox"> |
체크박스 (복수 선택 가능) |
<select><option> |
드롭다운 목록 (multiple로 다중 선택 가능) |
<textarea> |
여러 줄 입력 필드 (rows, cols) |
<button> |
클릭 가능한 버튼 (type="submit", reset, button) |
3. 입력 관련 추가 속성들
| 속성 |
설명 |
name |
서버로 전송될 때의 변수 이름 (key 역할) |
value |
전송될 실제 값 |
placeholder |
입력 전 보여지는 안내 문구 |
checked |
체크 상태 기본값 (checkbox, radio에 사용) |
id / for |
<label for="id"> 구조로 클릭 영역 확장 가능 |
required |
필수 입력 필드로 지정 |
readonly / disabled |
읽기 전용 / 비활성 필드 설정 가능 |
4. <label> 태그와 접근성
<label for="username">아이디</label>
<input type="text" id="username" name="userid">
| 태그/속성 |
설명 |
<label> |
입력 필드에 대한 설명. for 속성을 통해 연결된 <input> 클릭 확대 가능 |
title |
마우스를 올렸을 때 툴팁 표시 |