HTML 표 컨텐츠

<table>, <tr>, <th>, <td>

데이터 표(table)의 행(줄, tr), 열(칸, th(제목), td) 생성

테이블 <= 기본적으로 블록요소

 

<th>

머리글 칸 지정

 

속성	의미	값	기본값
abbr	열에 대한 간단한 설명
headers	다른 th부분과 연결 되어져 있는 내용이라면 해당 th의 id 속성 값과 연결해서 사용
colspan	확장하려는(병합) 열의 수		1 (열까지 병합)
rowspan	확장하려는(병합)  행의 수		1
scope	자신이 누구의 머리글 칸인지 명시	col : 자신의 열 colgroup : 모든 열 row : 자신의 행 rowgroup : 모든 행 auto	auto

 

<td>

일반 칸 지정

 

<caption>

표의 제목 설정

 

- 열리는 table 태그 바로 다음에 작성해야 함

- <table>당 하나의 <caption>만 사용 가능

 

<colgroup>, <col>

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

 

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

 

<thead>, <tbody>, <tfoot>

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

 

- 기본적으로 테이블 레이아웃에 영향을 주지 않음(의미만 가짐)

 

<form>

여러 입력 양식들의 정보를 form으로 랩핑해 특정 주소로 전송

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

블럭요소

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

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

• method에 GET 사용시 주소창에 그대로 노출되므로 보안에 좋지 않음 -> POST 사용
• POST 사용시 form data(양식 데이터)에서 확인됨 -> 완벽하게 숨길 수 없어서 암호화 해서 전송함

 

<input />

사용자에게 입력받을 데이터 양식

빈태그

속성	의미	값	기본값	특징
autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능 사용할 것인지 여부	on, off	on
autofocus	페이지가 로드될 때 자동으로 포커스	boolean		문서 내 고유해야 함
checked	양식이 선택되었음 표시	boolean		type 속성 값이 radio, checkbox인 경우만
form	<form>의 id 속성값			해당 <form>의 후손이 아닐 경우만
name	양식의 이름	_self, _blank	_self
type	입력 받을 데이터의 종료	button, checkbox, file, text 등등	text

• autocomplete는 input 태그 하나에서만 적용됨
• form 속성은 form 태그 밖에서 작성된 경우에도 연결해서 쓸 수 있음 (form 태그에 id 이용)
• 양식의 이름(name)에 따라서 서버에 전송될 때 데이터가 가지는 이름 지정됨
• 서버에 전송하기 위해서 id 사용
• form 안에 input type=image를 넣으면 image 클릭시 action에 적은 url 페이지로 이동 (제출 버튼으로 활용 가능)

 

 

<label>

라벨 가능 요소(labelable)의 제목(Caption)

• for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함.
• 라벨 가능 요소 : <button>, <input>, <progress>, <select>, <textarea>

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

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

• 참조하는 경우 for를 제거하면 동의하십니까?의 텍스트를 클릭해도 체크박스가 체크되지 않음

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

 

<button>

 

선택 가능한 버튼 지정 - JS붙여서 사용

인라인블럭요소

        <button onclick="doit()">클릭하세요!</button>

        <script>
            function doit() {
                alert('클릭했습니다!');
            }
        </script>

 

<textarea>

 

여러 줄의 일반 텍스트 양식

속성	의미	값	기본값
rows	양식의 줄 수	숫자(number)	2

• placeholder을 자주 씀

<fieldset>, <legend>

 

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

 

<fieldset>

 

같은 목적의 양식을 그룹화

속성	의미	값
disabled	그룹 내 모든 양식 요소를 비활성화	불린(boolean)

 

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

 

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

 

<select>

 

옵션 선택하는 메뉴

 

속성	의미	값	기본값
multiple	다중 선택 여부	불린(boolean)
size	한 번에 볼 수 있는 행의 개수	숫자(number)	0(1과 같음)

 

<optgroup>

 

<option>을 그룹화

속성	의미	값
label	(필수) 옵션 그룹의 이름

 

<option>

 

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

• 선택적 빈 태그로 사용 가능

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

 

<datalist>

 

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

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

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

    <datalist id="fruits">
        <option label="Apple" value="Apple"></option>
        <option>Orage</option>
        <option>Banana</option>
        <option>Mango</option>
        <option>Pineapple</option>
    </datalist>

• datalist의 id값과 input의 list값이 동일해야함
• JS없이도 자동완성 기능을 만들 수 있다

 

<progress>

 

작업의 완료 진행율 표시(=로딩바)

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

• value는 JS 이용해서 사용하는 편

<예제>

    <progress value="0" max="100">70%</progress>
    <script>
        const progress = document.querySelector('progress');
        const interval = setInterval(function () {
            progress.value += 10;
            if (progress.value >= 100) clearInterval(interval);            
        }, 1000)
    </script>