$$config title: [HTML] 표 콘텐츠 & 양식 keywords: - IT - html $$ # 표 콘텐츠 - table - tr - th, td - table > tr+td 영역>줄>행 - table: 표 영역 - tr: 행(줄) table row - th,td : 열(칸) table header, table data ```css table {display: table;} tr {display: table-row;} th, td {display: table-cell;} ``` ```css table { border-collapse: collapse; /*셀과 셀 사이의 공백 없애기*/ } ``` - table header : 데이터들의 헤더부분 th -> blod 처리 됨 - th의 속성 / 머리글 칸을 지정 - abbr="" 열에 대한 간단한 설명 - headers="" 관련된 하나 이상의 다른 머리글 칸 id 속성 값 - -> id와 연결 - colspan="" 표 병합 확장하려는 열의 수 - rowspan="" 확장하려는 행의 수 - scope="" 자신이 누구의 '머리글 칸'인지 명시 - -> col, colgroup, row, rowgroup, auto - 가장 상위개념의 id="th-data" - 하위 개념의 속성에 header="th-data" - 머리글 왼쪽에 넣기~~ - td rowspan="2" - 웹의 레이아웃을 표로 잡을때가 있었다. table로 레이아웃을..!! - -> table로 레이아웃을 만들어선 절대 안됨.. - td의 속성 / 일반 칸을 지정 - headers="" 해당하는 상위 개념의 th의 id 값을 연결하는 것이다!! 어느 th에 종속된 개념이냐~ㄴ - colspan - rowspan ## caption - 표의 제목을 설정하는 태그이다 - table>caption ## colgroup, col - 표의 열들을 공통적으로 정의하는 컬럼과 그의 집합 - 속성 span 연속되는 열의 수 -> 일괄처리, span 영역만큼 뒷 col 생략해야함 - ->col span="2" (1번 2번 컬럼 의미) - 전체 열을 한번에 제어해줄 수 있는 태그 - table > caption - table > col/ - table > tr>td ```html

데이터 타입과 값
	타입	값
1	알파벳	A
2	숫자	7

``` # thead, tbody, tfoot - 표의 머리글, 본문, 바닥글 지정하는 것 - 기본적으로 테이블의 레이아웃에 영향을 주지 않음 - table > caption - table > thaed > tr > th - table > tbody > tr > td # form (매우 중요) - 웹 서버에 정보를 제출하기 위한 양식 범위를 정의 - 속성 - action="전송한 정보를 처리할 웹페이지의 url" - autocomplate="on/off" 이전에 입력한 값으로 자동완성 사용할 것인가? - method="GET/POST" 서버로 전송할 Http 방식 기본값:GET - -> 주소창에 입력한 정보 노출(get 담겨져서 전송)/ 안노출(post 하지만 뜯어보면 보이긴 한다 -> 암호화 후 전송하는 경우가 대부분임) - name="고유한 양식의 이름" - novalidate 서버로 전송시 양식 데이터의 '유효성을 검사'하지 않도록 지정 - ->이메일 양식을 지정했는데 이메일 양식으로 작성하지 않았을 때 경고창이 뜬다 - ->속성 적용하면 따로 뜨지 않는다. - target="" 서버로 전송 후 응답받을 방식을 설정 _self, _blank - form > form 안된다. - form {display:block} ```html ``` # input - 사용자에게 입력 받을 데이터 양식 / 빈태그임 - 속성이 많음 - autocomplate="on/off" 이전 입력 값으로 자동완성기능 사용 여부 - autofocus 페이지가 로드될 때 자동으로 포커스 / 문서 내 고유해야 함 이 속성은 하나만 적용할 수 있는것임. - checked 양식이 선택되었음을 표시 / type이 radio, checkbox일 경우만 - form form의 id 속성 값 form 바깥쪽에서도 연결해서 쓰는 것임. - name 양식의 이름 서버로 데이터 전송될 때 해당 데이터의 이름이 무엇인지 지정해주는 것 - type 입력 받을 데이터의 종류 - button -> 자바스크립트와 함께 구현 - checkbox 동의 - email - file - password - submit - text - ... - maxlanght="6" 글자수 제한 - form>input - form+input << 같이 전송되지 않는 것임. - input form="form의 id 값"로 연결 ```html ```
- name 속성 추가하는 이유 - -> 전송하는 데이터의 이름 (type-데이터 name-이름) ```html ```
```html ``` - -> value: 초기값 - -> readonly: 읽기 전용 수정 못함 / 포커스는 된다 - -> disabled: 비활성화 / 포커스조차 되지 않음 - -> placeholder: 사용자에게 제공하는 힌트
```html ``` - max="8" min="1" - -> max: 최대값 - -> min: 최소값
```html ``` - -> step: 증가 단위 (4단위로 증감함)
```html ``` - 기본값-> 체크가 안되어있는 상태 - ->checked 체크되어있게 한다
```html ``` - ->multiple: 여러개의 파일을 입력 받겠다.
```html ``` - -> 버튼으로 만들기
```html ``` - -> form 안에 집어넣으면 submit이 되어 제출버튼이 된다
```html ``` - 택 1 할때 쓰는 태그 - -> checked 기본적으로 선택되어 있게 한다 - -> name으로 묶는 것이다.
```html ``` - -> form 안에 있는 input만 초기화 한다. # laber - 라벨 가능 요소의 제목 - 라벨 가능 요소: button, input, progress, select ```html 동의하십니까? 동의하십니까? ``` - 텍스트를 클릭해도 체크박스가 선택된다. label의 특징이라고 한다. - id와 for 속성으로 연결한다 - 인라인 요소이다 ```html 검색 ``` - -> label로 묶었기 때문에 텍스트 클릭해도 input창 포커스 된다 # button - 선택 가능한 버튼을 지정 - 속성 - autofocus - disabled - form - name 폼 데이터와 함께 전송되는 버튼의 이름 - type="" button, reset, submit ```html ``` # textarea - 여러 줄의 일반 텍스트 양식 - 속성 많다 - autocomplete - rows 양식의 줄 수 / 기본값 2 ```html ``` - 오른쪽 하단에 확대축소 할 수 있는 영역이 있음 # fieldset, legend - 같은 목적의 양식을 그룹화 하여 제목을 지정 - fieldset(그룹) > legend(제목) - 속성 - disabled 그룹 내 모든 양식 요소를 비활성화 - form 그룹이 속할 하나 이상의 form의 id 속성 값 - name 그룹의 이름 ```html

coffee size tall grande venti

``` # select, datalist, optgroup, option - 옵션의 선택 메뉴나 자동완성을 제공 - select > optgroup > option - 속성 - select : 옵션을 선택하는 메뉴 - autocomplete="off" - disabled - form - multiple 다중 선택 여부 - name 선택 메뉴의 이름 - size="0" 한 번에 볼 수 있는 행의 개수 / 기본값 0 (1과 같음) ```html ``` ## optgroup - option을 그룹화 - 속성 - label (필수)옵션 그룹의 이름 - disabled ## option - 선택 메뉴(select)나 자동완성(datalist)에서 사용될 옵션 - 선택적 빈태그로 사용 가능. - 속성 - disabled - label 표시될 옵션의 제목 -> 생략시 포함된 텍스트를 값으로 사용 - selected 옵션이 선택되었음을 표시 - value 양식으로 제출될 값 -> 생략시 포함된 텍스트를 값으로 사용 ```html ``` ## datalist - input에 미리 정의된 옵션을 지정하여 자동완성(autocomplete)기능을 제공하는 데 사용 - input의 list 속성 바인딩. - option을 포함하여 정의된 옵션을 지정. ```html ``` # progress - 작업의 완료 진행률을 표시 - 로딩바 - 속성 - max 작업의 총량 - value 작업의 진행량 ```html 70% 70% 70%