강의자료: 한 눈에 보는 HTML 요소 총정리 https://heropy.blog/2019/05/26/html-elements/
강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/
1. 표 콘텐츠
▪ <table>, <tr>, <th>, <td>
- 데이터 표(<table>)의 행(줄 / <tr>)과 열(칸, 셀(Cell) / <th>, <td>)을 생성
- Table Row, Table Header, Table Data
▪ <th>
- ‘머리글 칸’을 지정
| 속성 | 의미 | 값 | 기본값 |
| abbr | 열에 대한 간단한 설명 | ||
| headers | 관련된(종속된) 하나 이상의 다른 머리글 칸 id 속성 값 | ||
| colspan | 병합하려는 열의 수 | 1 | |
| rowspan | 병합하려는 행의 수 | 1 | |
| scope | 자신이 누구의 ‘머리글 칸’인지 명시 | col: 자신의 열 colgroup: 모든 열 row: 자신의 행 rowgroup: 모든 행 auto |
auto |
▪ <td>
- ‘일반 칸’을 지정
| 속성 | 의미 | 값 | 기본값 |
| headers | 관련된 하나 이상의 다른 머리글 칸(<th>) id 속성 값 | ||
| colspan | 병합하려는 열의 수 | 1 | |
| rowspan | 병합하려는 행의 수 | 1 |
▪ <caption>
- 표의 제목을 설정
- 열리는 TABLE 태그 바로 다음에 작성해야 함
- <table> 당 하나의 <caption>만 사용 가능.
▪ <colgroup>, <col />
- 표의 열들을 공통적으로 정의하는 컬럼(<col>)과 그의 집합(<colgroup>) (Column, Column Group)
| 속성 | 의미 | 값 | 기본값 |
| span | 연속되는 열의 수 | 숫자 | 1 |
<body>
<table>
<caption>데이터 타입과 값</caption>
<colgroup >
<col>
<col style="background-color: tomato;" span="2">
<col>
</colgroup>
<tr>
<th></th>
<th>타입</th>
<th>값</th>
</tr>
<tr>
<th>1</th>
<td>알파벳</td>
<td>A</td>
</tr>
<tr>
<th>2</th>
<td>숫자</td>
<td>7</td>
</tr>
</table>
</body>
▪ <thead>, <tbody>, <tfoot>
- 표의 머리글(<thead>), 본문(<tbody>), 바닥글(<tfoot>)을 지정
- 기본적으로 테이블의 레이아웃에 영향을 주지 않음.
2. 양식
▪ <form>
- 웹 서버에 정보를 제출하기 위한 양식 범위를 정의
- <form>이 다른 <form>을 자식 요소로 포함할 수 없음
| 속성 | 의미 | 값 | 기본값 |
| action | 전송한 정보를 처리할 웹페이지의 URL | URL | |
| autocomplete | 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 | on, off | on |
| method | 서버로 전송할 HTTP 방식 | GET, POST | GET |
| name | 고유한 양식의 이름 | ||
| novalidate | 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정 | ||
| target | 서버로 전송 후 응답받을 방식을 지정 | _self, _blank | _self |
▪ <input />
- 사용자에게 입력 받을 데이터 양식
- 빈 태그
- 속성이 정말 많으므로, 필요할 때 검색해서 찾아서 쓸 것
▪ <label>
- 라벨 가능 요소(labelable)의 제목(Caption)
- for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함
- 라벨 가능 요소: <button>, <input>, <progress>, <select>, <textarea>
| 속성 | 의미 |
| for | 참조할 라벨 가능 요소의 id 속성 값 |
▪ <button>
- <input> 태그로 대체 가능
- 선택 가능한 버튼을 지정
| 속성 | 의미 | 값 | 특징 |
| autofocus | 페이지가 로드될 때 자동으로 포커스 | 불린(Boolean) | 문서 내 고유해야 함 |
| disabled | 버튼을 비활성화 | 불린(Boolean) | |
| form | <form>의 id 속성 값 | 해당 <form>의 후손이 아닐 경우만 | |
| name | 폼 데이터와 함께 전송되는 버튼의 이름 | ||
| type | 버튼의 타입 | button, reset, submit |
▪ <textarea>
- 여러 줄의 일반 텍스트 양식
▪ <fieldset>, <legend>
- 같은 목적의 양식을 그룹화(<fieldset>)하여 제목(<legend>)을 지정
▪ <fieldset>
- 같은 목적의 양식을 그룹화
| 속성 | 의미 | 값 |
| disabled | 그룹 내 모든 양식 요소를 비활성화 | 불린(Boolean) |
| form | 그룹이 속할 하나 이상의 <form>의 id 속성 값 | |
| name | 그룹의 이름 |
▪ <select>, <datalist>, <optgroup>, <option>
- 옵션(<option>, <optgroup>)의 선택 메뉴(<select>)나 자동완성(<datalist>)을 제공
▪ <select>
- 옵션을 선택하는 메뉴
▪ <datalist>
- <input>에 미리 정의된 옵션을 지정하여 자동완성(Autocomplete) 기능을 제공하는 데 사용
- <input>의 list 속성 바인딩
- <option>을 포함하여 정의된 옵션을 지정
<body>
<input type="text" list="fruits">
<datalist id="fruits">
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
<option>Mango</option>
<option>Fineapple</option>
</datalist>
</body>▪ <optgroup>
- <option>을 그룹화
| 속성 | 의미 | 값 |
| label | (필수)옵션 그룹의 이름 | |
| disabled | 옵션 그룹을 비활성화 | 불린(Boolean) |
▪ <option>
- 선택 메뉴(<select>)나 자동완성(<datalist>)에서 사용될 옵션
- 선택적 빈(Empty) 태그로 사용 가능
| 속성 | 의미 | 값 | 특성 |
| disabled | 옵션을 비활성화 | 불린(Boolean) | |
| label | 표시될 옵션의 제목 | 생략되면 포함된 텍스트를 표시 | |
| selected | 옵션이 선택되었음을 표시 | 불린(Boolean) | |
| value | 양식으로 제출될 값 | 생략되면 포함된 텍스트를 표시 |
▪ <progress>
- 작업의 완료 진행률을 표시
- 자바 스크립트로 더 정교한 구현이 가능
'Develop > HTML & CSS' 카테고리의 다른 글
| Part9. HTML의 전역 속성/특수기호 (0) | 2021.07.16 |
|---|---|
| Part7. HTML 요소 - 멀티미디어 & 내장콘텐츠 & 스크립트 (0) | 2021.07.16 |
| Part6. HTML 요소 - 인라인 텍스트 & 수정 (0) | 2021.07.10 |
| Part5. HTML <body> 요소 - 콘텐츠 구분 & 문자 콘텐츠 (0) | 2021.07.10 |
| Part4. HTML 요소 - 주요범위 & 메타데이터 (0) | 2021.07.10 |