<8> HTML & CSS

[표 콘텐츠]

<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(기본값)

<td>: '일반 칸'을 지정

         속성

         headers: 관련된 하나 이상의 다른 머리글 칸 id 속성 값

         colspan: 확장하려는(병합) 열의 수(기본값: 1)

         owspan: 확장하려는(병합) 행의 수(기본값: 1)

<caption>: 표의 제목을 설정

                  열리는 TABLE 태그 바로 다음에 작성해야함. <table> 하나 당 하나의 <caption>만 사용가능

<colgroup>, <col />: 표의 열들을 공통적으로 정의하는 컬럼(<col>)과 그의 집합(<colgroup>)

                                 속성

                                 span: 연속되는 열 수

                                           값: 숫자(Number), 기본값: 1

                                 colspan: 확장하려는(병합) 열의 수(기본값: 1)

                                 owspan: 확장하려는(병합) 행의 수(기본값: 1)

<thead>, <tbody>, <tfoot>: 표의 머리글(<thead>), 본문(<tbody>), 바닥글(<tfoot>)을 지정

                                           기본적으로 테이블의 레이아웃에 영향을 주지 않음

 

[양식]

<form>: 웹 서버에 정보를 제출하기 위한 양식 범위를 정의

             <form>이 다른 <form>을 자식 요소로 포함할 수 없음

             속성

             action: 전송한 정보를 처리할 웹페이지의 URL

                         값: URL

             autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부

                         값: on(기본값), off

             method: 서버로 전송할 HTTP 방식

                         값: GET(기본값), POST

             name: 고유한 양식의 이름

             target: 서버로 전송 후 응답받을 방식을 지정

                         값: _self(기본값), _blank

 

<input />: 사용자에게 입력 받을 데이터 양식

                속성

                autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부

                                        값: on(기본값), off

                autofocus: 페이지가 로드될 때 자동으로 포커스, 문서 내 고유해야 함

                                        값: 불린(Boolean)

                checked: 양식이 선택되었음을 표시, type 속성 값이 radio, checkbox일 경우만

                                        값: 불린(Boolean)

                disabled: 양식을 비활성화

                                        값: 불린(Boolean)

                form: <form>의 id 속성 값, 해당 <form>의 후손이 아닐 경우만

                list: 참조할 <datalist>의 id 속성 값

                max, min: 지정 가능한 최대값과 최소값, type 속성 값이 number일 경우만

                                        값: 숫자(Number)

                maxlength: 입력 가능한 최대 문자 수

                                   type 속성 값이 text, email, password, tel, url일 경우만

                                        값: 숫자(Number), 기본값: 524288

                multiple: 둘 이상의 값을 입력 할 수 있는지 여부

                              type 속성 값이 email, file일 경우만,email일 경우 ,로 구분

                                        값: 불린(Boolean)

                name: 양식의 이름, type 속성 값이 text, search, tel, url, email일 경우만

                placeholder: 사용자가 입력할 값의 힌트, type 속성 값이 text, search, tel, url, email일 경우만

                readonly: 수정 불가한 읽기 전용

                                        값: 불린(Boolean)

                step: 유효한 증감 숫자의 간격, type 속성 값이 number, range일 경우만

                                        값: 숫자(Number), 기본값: 1

                src: 이미지의 URL, type 속성 값이 image일 경우만

                                        값: URL

                alt: 이미지의 대체 텍스트, type 속성 값이 image일 경우만

                value: 양식의 초기 값

                autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부

                                        값: on(기본값), off

                type: 입력 받을 데이터의 종류

                                        값: button - 일반 버튼(<button>처럼 사용가능)

                                             checkbox - 체크박스

                                             color - 색상(IE 지원 불가)

                                             email - 이메일

                                             file - 파일

                                             hidden - 보이지 않지만 전송할 양식(value 속성으로 값을 지정)

                                             image- 이미지 제출 버튼(<img />처럼 사용)

                                             number - 숫자

                                             password - 비밀(가려지는 양식)

                                             radio - 라디오 버튼(같은 name 속성 그룹 내 하나만 선택 가능)

                                             range - 범위 컨트롤(min, max, step, value(기본값) 속성 사용)

                                             reset - 초기화(해당 <form> 범위 내 모든 양식)

                                             search - 검색

                                             tel - 전화번호

                                             text - 일반 텍스트(기본값)

                                             url - 절대 URL

                                             button - 일반 버튼(<button>처럼 사용

 

<label>: 라벨 가능 요소(labelable)의 제목(Caption)

              for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함

              라벨 가능 요소: <button>, <input>, <progress>, <select>, <textarea>

              속성

              for: 참조할 라벨 가능 요소의 id 속성 값

 

<button>: 선택 가능한 버튼을 지정

                속성

                autofocus: 페이지가 로드될 때 자동으로 포커스, 문서 내 고유해야 함

                                  값: 불린(Boolean)

                disabled: 버튼을 비활성화

                                  값: 불린(Boolean)

                form: <form>의 id 속성 값, 해당 <form>의 후손이 아닐 경우만

                type: 버튼의 타입

                                  값: button, reset, submit

 

<textarea>: 여러 줄의 일반 텍스트 양식

                   속성

                  autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부

                                          값: on(기본값), off

                  autofocus: 페이지가 로드될 때 자동으로 포커스, 문서 내 고유해야 함

                                          값: 불린(Boolean)

                  disabled: 양식을 비활성화

                                          값: 불린(Boolean)

                  form:<form>의 id 속성 값, 해당 <form>의 후손이 아닐 경우만

                  maxlength: 입력 가능한 최대 문자 수

                                          값: 숫자(Number) 기본값: 무한

                  name: 양식의 이름

                  placeholder: 사용자가 입력할 값의 힌트

                  readonly: 수정 불가한 읽기 전용

                                          값: 불린(Boolean)

                  rows: 입양식의 줄 수

                                          값: 불린(Boolean), 기본값: 2

 

<fieldset>, <legend>: 같은 목적의 양식을 그룹화(<fieldset>)하여 제목(<legend>)을 지정

<fieldset>: 같은 목적의 양식을 그룹화

                  속성

                  disabled: 그룹 내 모든 양식 요소를 비활성화

                                 값: 불린(Boolean)

                  form: 그룹이 속할 하나 이상의 <form>의 id 속성 값

                  name: 그룹의 이름

 

<select>, <datalist>, <optgroup>, <option>: 옵션(<option>, <optgroup>)의 선택 메뉴(<select>)나

                                                                      자동완성(<datalist>)을 제공

<select>: 옵션을 선택하는 메뉴

                속성

                autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부

                                        값: on(기본값), off

                disabled: 선택 메뉴를 비활성화

                                        값: 불린(Boolean)

                form: 선택 메뉴가 속할 하나 이상의 <form>의 id 속성 값

                multiple: 다중 선택 여부

                                        값: 불린(Boolean)

                name: 선택 메뉴의 이름

                size: 한 번에 볼 수 있는 행의 개수

                                        값: 숫자(Number), 기본값: 0(1과 같음)

<datalist>: <input>에 미리 정의된 옵션을 지정하여 자동완성(Autocomplete) 기능을 제공하는 데 사용

                  <input>의 list 속성 바인딩

                  <option>을 포함하여 정의돈 옵션을 지정

<optgroup>: <option>을 그룹화

                    속성

                    label: (필수)옵션 그룹의 이름

                    disabled: 옵션 그룹을 비활성화

                                    값: 불린(Boolean)

<option>: 선택 메뉴(<select>)나 자동완성(<datalist>)에서 사용될 옵션, 선택적 빈(Empty) 태그로 사용 가능

                속성

                disabled: 옵션을 비활성화

                                값: 불린(Boolean)

                label: 표시될 옵션의 제목, 생략되면 포함된 텍스트를 표시

                selected: 옵션이 선택되었음을 표시

                                값: 불린(Boolean)

                value: 양식으로 제출될 값, 생략되면 포함된 텍스트를 값으로 사용

 

<progress>: 작업의 완료 진행률을 표시

                    속성

                    max: 작업의 총량

                             값: 숫자(Number)

                    value: 작업의 진행량, max 속성을 생략할 경우 0~1 사이의 숫자여야 함

                             값: 숫자(Number)