노션정리
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 | 마우스를 올렸을 때 툴팁 표시 |
5. 정의형 목록 태그 (<dl>, <dt>, <dd>)
예시
<dl>
<dt>HTML</dt>
<dd>웹 문서를 구조화하기 위한 마크업 언어</dd>
</dl>
| 태그 | 설명 |
|---|
<dl> | 정의형 목록 시작 태그 |
<dt> | 용어 (Definition Term) |
<dd> | 설명 (Definition Description) |
정의형 목록은 정보성 콘텐츠, 용어사전, FAQ 등에 적합합니다.
6. 기타 유용한 HTML 개념들
| 개념 | 설명 |
|---|
<fieldset>, <legend> | 관련된 폼 요소를 그룹화하고 제목 제공 |
<br> | 줄바꿈. 테이블 내부에서는 되도록 사용하지 않음 |
<caption> | 테이블 제목 지정 |
style="..." | 인라인 CSS 스타일 적용 (가능하면 CSS 분리 권장) |
정리 예제: 실전용 회원가입 폼
<form action="submit.jsp" method="post">
<fieldset>
<legend>회원 가입</legend>
이름: <input type="text" name="name" required><br>
성별:
<input type="radio" name="gender" value="M">남자
<input type="radio" name="gender" value="F">여자<br>
관심분야:
<input type="checkbox" name="interest" value="web">웹
<input type="checkbox" name="interest" value="ai">AI<br>
전공:
<select name="major">
<option value="cs">컴퓨터</option>
<option value="biz">경영</option>
</select><br>
자기소개:<br>
<textarea name="intro" rows="5" cols="40"></textarea><br>
<button type="submit">제출</button>
<button type="reset">초기화</button>
</fieldset>
</form>
