06. [HTML] 표 콘텐츠, 양식

HEROPY Tech 블로그 참고.

🔗<TABLE>

▪<table> 태그는 데이터 표를 작성하기 위해 사용 되는 태그이며 가장 표의 가장 큰 뼈대이고

그 안에 <tr>, <th>, <td> 태그를 사용하여 표를 작성한다.

📺display: table

<table>
  <caption>Fruits</caption>
  <colgroup>
    <col span="2" style="background-color: yellowgreen;">
    <col style="background-color: tomato;">
  </colgroup>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>F123A</td>
      <td>Apple</td>
      <td>$22</td>
    </tr>
    <tr>
      <td>F098B</td>
      <td>Banana</td>
      <td>$19</td>
    </tr>
  </tbody>
</table>

🔗<TR>

▪<tr>태그는 table row의 약자로, 가로줄을 만드는 역할을 한다.

🔗<TH>

▪<th>태그는 table head의 약자로, 표의 제목을 작성하는데 사용한다.

속성	의미	값	기본값
abbr	열에 대한 간단한 설명
headers	종속되어 있는 다른 칸 id 속성 값
colspan	확장하려는(병합) 열의 수		1
rowspan	확장하려는(병합) 행의 수		1
scope	자신이 누구의 '머리글 칸' 인지 명시	col : 자신의 열 colgroup : 모든 열 row : 자신의 행 rowgroup : 모든 행 auto :	auto

🔗<TD>

▪<td> 태그는 table data의 약자로, 일반 칸을 만든다.

속성	의미	값	기본값
header	관련된 하나 이상의 다른 머리글 칸 id 속성 값
colspan	확장하려는(병합) 열의 수		1
rowspan	확장하려는(병합) 행의 수		1

🔗<CAPTION>

▪표의 제목을 설정 한다

▪열리는 <table> 태그 바로 뒤에 작성해야 한다

▪<table> 태그 하나당 1번씩 사용이 가능하다.

<table>
    <caption>표 제목!</caption>
    <tr>
        <th>이름</th>
        <th>나이</th>
        …
        
    </tr>
</table>

🔗<COLGROUP> , 🔗<COL/>

▪표의 열들을 공통적으로 정의하는 컬럼인 <col>과 그의 집합 <colgroup>.

속성	의미	값	기본값
span	연속되는 열 수	숫자(Number)	1

    <table>
        <caption>데이터 타입과 값</caption>
        <colgroup>
            <!-- 첫번째 컬럼(열) 전부 파란색 배경을 갖는다. -->
            <col style="background-color: tomato;">
            <!-- 두, 세번째 컬럼(열) 전부 토마토색 배경을 갖는다. -->
            <col style="background-color: tomato;" span="2">
        </colgroup>
        …
    </table>

🔗<THEAD> , 🔗<TBODY> , 🔗<TFOOT>

▪표의 머리글 <thead>, 본문 <tbody>, 바닥글<tfoot>을 지정.

💡기본적으로 테이블의 레이아웃에 영향을 주지 않는다.

🔗<FORM>

▪<form> 태그는 웹 서버에 정보를 제출하기 위한 양식 범위를 정하는 태그이다.

▪<form>이 다른 <form>를 자식으로 포함할 수 없다.

속성	의미	값	기본값
action	전송한 정보를 처리할 웹페이지 URL	URL
autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부	on, off	on
method	서버로 전송할 HTTP 방식	GET, POST	GET
name	고유한 양식의 이름
novalidate	서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정
target	서버로 전송 후 응답받을 방식을 지정	_self, _blank	_self

🔗<INPUT/>

▪<input/> 태그는사용자에게 입력 받을 데이터 양식(텍스트, 버튼, 페스워드, 이메일, ... )을 지정할 수 있다

📺display : inlin-block;

속성	의미	값	기본값	특징
autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부	on, off	on
autofocus	페이지가 로드될 때 자동으로 포커스	Boolean		문서 내 고유해야 함
checked	양식이 선택되었음을 표시	Boolean		type : radio, checkbox
disabled	양식을 비활성화	Boolean
form	<form>의 id 속성 값			해당 <form>의 후손이 아닐 경우만
list	참조할 <datalist>의 id 속성 값
max	지정 가능한 최대 값	Number		type : number, min 속성보다 큰 값만 허용
min	지정 가능한 최소 값	Number		type : number일 경우만, max 속성보다 작은 값만 허용
maxlength	입력 가능한 최대 문자 수	Number	524288	tpye : text, email, password, tel, url
multiple	둘 이상의 값을 입력 할 수 있는지 여부	Boolean		type : email, file email 일 경우 , 로 구분
name	양식의 이름
placeholder	사용자가 입력할 값의 힌트			type : text, search, tel, url, email
readonly	수정 불가한 읽기 전용	Boolean
step	유효한 증감 숫자의 간격	Number	1	type : number, range
src	이미지의 URL	URL		type : image
alt	이미지의 대체 텍스트			type : image
type	입력 받을 데이터의 종류	별도 정리	text
value	양식의 초기 값

데이터 종류(Type)의 값(Values)

<input type="@@@">에 입력 가능한 값의 목록

값	데이터 종류	특징
button	일반 버튼	<button> 처럼 사용
checkbox	체크박스
color	색상	IE 지원 불가
email	이메일
file	파일
hidden	보이지 않지만 전송할 양식	value 속성으로 값을 지정
image	이미지 제출 버튼	<img /> 처럼 사용
number	숫자
password	비밀	가려지는 양식
radio	라디오 버튼	같은 name 속성 그룹 내 하나만 선택 가능
range	범위 컨트롤	min, max, step, value (기본값) 속성 사용
reset	초기화	해당 <form> 범위 내 모든 양식
search	검색
submit	제출 버튼	해당 <form> 범위 내 고유한 양식
tel	전화번호
text	일반 텍스트
url	절대 URL

🔗<LABEL>

▪<label> 태그는 요소(labelable)의 제목(Caption)이다

▪labelable(라벨 가능 요소) : <button>, <input>, <progress>, <select>, <textarea>

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

<!-- 라벨 가능 요소를 참조 -->
<input type="checkbox" id="user-agreement" />
<label for="user-agreement">동의하십니까?</label>

<!-- 라벨 가능 요소를 포함 -->
<label><input type="checkbox" />동의하십니까?</label>

🔗<BUTTON>

▪<button> 태그는 선택 가능한 버튼을 만드는 태그이다.

📺display : inlin-block;

속성	의미	값	특징
autofocus	페이지가 로드될 때 자동으로 포커스	Boolean	문서 내 고유해야 함
disabled	버튼을 비활성화	Boolean
form	<form>의 id 속성 값		해당 <form> 의 후손이 아닐 경우 만
name	폼 데이터와 함께 전송되는 버튼의 이름
type	버튼의 타입	button, reset, submit

🔗<TEXTAREA>

▪<textarea>는 <input type="text">와 달리 여러 줄의 텍스트를 입력 할 수 있는 태그이다.

📺display : inlin-block;

속성	의미	값	기본값	특징
autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부	on, off	on
autofocus	페이지가 로드될 떄 자동으로 포커스	boolean		문서 내 고유해야 함
disabled	양식을 비활성화	boolean
form	<form>의 id 속성 값			해당 <form> 의 후손이 아닐 경우 만
maxlength	입력 가능한 최대 무자 수	number	무한
name	양식의 이름
placeholder	사용자가 입력할 값의 힌트
readonly	수정 불가한 읽기 전용	boolean
rows	양식의 줄 수	number

🔗<FIELDSET> , 🔗<LEGEND>

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

📺display : bolck;

속성	의미	값
disabled	그룹 내 모든 양식 요소를 비활성화	boolean
form	그룹이 속할 하나 이상의 <form>의 id 속성 값
name	그룹의 이름

<form>
  <fieldset>
    <legend>Coffee Size</legend>
    <label>
        <input type="radio" name="size" value="tall" />
        Tall
    </label>
    <label>
        <input type="radio" name="size" value="grande" />
        Grande
    </label>
    <label>
        <input type="radio" name="size" value="venti" />
        Venti
    </label>
  </fieldset>
</form>

<select>, <datalist>, <optgroup>, <option>

▪옵션(<option>, <optgroup>)의 선택 메뉴(<select>)나 자동완성(<datalist>)을 제공.

<select>
  <optgroup label="Coffee">
    <option>Americano</option>
    <option>Caffe Mocha</option>
    <option label="Cappuccino" value="Cappuccino"></option>
  </optgroup>
  <optgroup label="Latte" disabled>
    <option>Caffe Latte</option>
    <option>Vanilla Latte</option>
  </optgroup>
  <optgroup label="Smoothie">
    <option>Plain</option>
    <option>Strawberry</option>
    <option>Banana</option>
    <option>Mango</option>
  </optgroup>
</select>

🔗<SELECT>

▪옵션을 선택하는 메뉴

속성	의미	값	기본값
autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부	on, off	on
disabled	선택 메뉴를 비활성화	boolean
form	선택 메뉴가 속할 하나 이상의 <form>의 id 속성 값
multiple	다중 선택 여부	boolean
name	선택 메뉴의 이름
size	한 번에 볼 수 있는 행의 개수	number	0 ( 1 과 같음)

🔗<DATALIST>

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

<input>의 list 속성 바인딩.
<option>을 포함하여 정의된 옵션을 지정.

<input type="text" list="fruits">

<datalist id="fruits">
  <option>Apple</option>
  <option>Orange</option>
  <option>Banana</option>
  <option>Mango</option>
  <option>Fineapple</option>
</datalist>

🔗<OPTGROUP>

▪<option>을 그룹화.

속성	의미	값
label	(필수)옵션 그룹의 이름
disabled	옵션 그룹을 비활성화	boolean

🔗<OPTION>

▪선택 메뉴(<select>)나 자동완성(<datalist>)에서 사용될 옵션.

선택적 빈(Empty) 태그로 사용 가능.

속성	의미	값	특성
disabled	옵션을 비활성화	boolean
label	표시될 옵션의 제목		생략되면 포함된 텍스트를 표시
selected	옵션이 선택되었음을 표시	boolean
value	양식으로 제출될 값		생략되면 포함된 텍스트를 값으로 사용

🔗<PROGRESS>

▪작업의 완료 진행률을 표시.

속성	의미	값	특징
max	작업의 총량	number
value	작업의 진행량	number	max 속성을 생략할 경우 0 ~ 1 사이의 숫자여야 함

<progress value="70" max="100">70 %</progress>

개발일기

06. [HTML] 표 콘텐츠, 양식

🔗<TABLE>

🔗<TR>

🔗<TH>

🔗<TD>

🔗<CAPTION>

🔗<COLGROUP> , 🔗<COL/>

🔗<THEAD> , 🔗<TBODY> , 🔗<TFOOT>

🔗<FORM>

🔗<INPUT/>

데이터 종류(Type)의 값(Values)

🔗<LABEL>

🔗<BUTTON>

🔗<TEXTAREA>

🔗<FIELDSET> , 🔗<LEGEND>

<select>, <datalist>, <optgroup>, <option>

🔗<SELECT>

🔗<DATALIST>

🔗<OPTGROUP>

🔗<OPTION>

🔗<PROGRESS>

댓글

티스토리툴바

06. [HTML] 표 콘텐츠, 양식

🔗<COLGROUP> , 🔗<COL/>

🔗<THEAD> , 🔗<TBODY> , 🔗<TFOOT>

데이터 종류(Type)의 값(Values)

🔗<FIELDSET> , 🔗<LEGEND>

<select>, <datalist>, <optgroup>, <option>

관련글

댓글

티스토리툴바