HTML 테이블 개요
표는 데이터 테이블로 2차원 행과 열 구조로 되어있다.
표는 90년대와 2000년대 초에 웹 사이트 레이아웃에 사용되었다.
하지만 요즘은 테이블 형식에 적합한 정보를 보여주는 경우에 표를 사용한다.
표 하나에 들어갈 수 있는 아주 많은 요소들이 존재한다.
테이블: TR, TD, TH 요소
table 태그를 사용하여 표를 생성해도 그 안에 다른 요소들을 생성하지 않으면, 브라우저 상에서는 문서에 아무 것도 나타나지 않는다.
td 요소는 table data (cell)의 줄임말으로 표에 단일 셀을 추가한다.
tr 요소는 table row의 줄임말으로 표 안에 셀이 들어갈 수 있는 단일 행을 추가한다.
th 요소는 table header의 줄임말으로 표에 헤더 셀을 추가한다.
<table>
<tr>
<th>Animal</th>
<th>Average mass[kg (lb)]</th>
<th>Flighted</th>
</tr>
<tr>
<td>Ostrich</td>
<td>104 (230)</td>
<td>No</td>
</tr>
<tr>
<td>Somali Ostrich</td>
<td>90 (200)</td>
<td>No</td>
</tr>
<tr>
<td>Wild Turkey</td>
<td>13.5 (29.8)</td>
<td>Yes</td>
</tr>
</table>테이블: Thead, Tbody, Tfoot 요소
thead, tbody, tfoot 요소들은 표를 논리 섹션으로 분리하는 역할을 한다.
thead 요소 안에는 표의 헤더 데이터가 들어간다.
tbody 요소 안에는 표의 주요 데이터가 들어간다.
tfoot 요소 안에는 누계나 평균과 같은 데이터가 들어간다. → 표에 tfoot 요소가 없는 경우도 많다.
<table>
<thead>
<tr>
<th>Animal</th>
<th>Average mass[kg (lb)]</th>
<th>Flighted</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ostrich</td>
<td>104 (230)</td>
<td>No</td>
</tr>
<tr>
<td>Somali Ostrich</td>
<td>90 (200)</td>
<td>No</td>
</tr>
<tr>
<td>Wild Turkey</td>
<td>13.5 (29.8)</td>
<td>Yes</td>
</tr>
</tbody>
</table>테이블: Colspan & Rowspan
colspan 속성을 통해 해당 셀이 차지하는 행 공간을 조절할 수 있다.
rowspan 속성을 통해 해당 셀이 차지하는 열 공간을 조절할 수 있다.
<table>
<thead>
<tr>
<th rowspan="2">Animal</th>
<th colspan="2">Average mass</th>
<th rowspan="2">Flighted</th>
</tr>
<tr>
<th>kg</th>
<th>lb</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ostrich</td>
<td>104</td>
<td>230</td>
<td>No</td>
</tr>
<tr>
<td>Somali Ostrich</td>
<td>90</td>
<td>200</td>
<td>No</td>
</tr>
<tr>
<td>Wild Turkey</td>
<td>13.5</td>
<td>29.8</td>
<td>Yes</td>
</tr>
</tbody>
</table>폼(Form) 요소
폼 요소는 가장 중요하고 유용한 요소 중 하나로, HTML 요소들의 모음이 폼이다.
폼 요소 자체는 사실 눈에 그렇게 잘 띄지 않는다. → 폼 요소는 텍스트 입력란이나 비밀번호 입력란, 버튼 및 체크 박스 등 여러가지 개별 폼 컨트롤을 품는 컨테이너에 가깝다. → 한 곳에 그룹화된 모든 입력들을 담는 상자로, 폼을 제출했을 때 폼 데이터를 어느 곳으로 전송할 지 지시한다.
action 속성은 폼이 제출되었을 때, 데이터를 보낼 위치와 시간을 지정한다.
폼을 제출하면 HTTP 요청이 전송된다. → action 속성을 통해 해당 요청이 어디로 가는지 제어한다. 그리고 method 속성을 통해 어떤 유형의 HTTP 메서드를 사용할 지 제어한다.
<form action="" method="">
</form>일반적인 입력 형식
폼 안에 들어가는 가장 일반적인 요소이자 가장 일반적인 폼 컨트롤은 input 요소이다. → input 요소를 활용하여 20개 이상의 다른 입력란을 만들 수 있다. → type 속성을 변경한다.
input 요소는 닫는 태그가 없다.
placeholder 속성은 입력란의 임시 텍스트를 지정한다.
<form action="">
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<input type="color">
<input type="number" placeholder="enter a number">
</form>가장 중요한 레이블
label 요소는 접근성과 폼을 쓰기 편하게 해주는 중요한 요소다.
label 요소는 폼 컨트롤 요소와 직접적으로 연결되어 있다. → label의 for 속성과 input 태그 안에 id 속성을 통해 label과 input을 연결한다. for 속성과 id 속성에 같은 값을 지정해준다. 페이지에는 한 개의 요소만 지정된 ID를 가져야한다.
label은 인라인 요소이다.
for 속성과 id 속성 없이 label 태그 내부에 input 태그를 중첩시킬 수 있지만, 중첩시키지 않는 것이 표준이다.
<form action="">
<p>
<label for="username">Enter a Username:</label>
<input type="text" placeholder="username" id="username">
</p>
<p>
<label for="password">Enter a Password:</label>
<input type="password" placeholder="password" id="password">
</p>
<p>
<label for="color">Enter a Color:</label>
<input type="color" id="color">
</p>
<p>
<label for="number">Enter a Number:</label>
<input type="number" placeholder="enter a number" id="number">
</p>
</form>HTML 버튼
button 요소는 여는 태그와 닫는 태그가 있고, 그 안에 입력하는 텍스트는 버튼의 레이블을 지정한다.
button 요소를 통해 생성된 버튼을 클릭하면 폼을 제출하여 HTTP 요청을 전송한다.
폼 밖에 있는 버튼은 HTTP 요청을 전송하지 않는다. 아무 일도 생기지 않는다.
input의 속성 type과는 좀 다른 button 요소의 type을 통해 버튼의 기능을 바꿀수 있다. type 속성에 button을 기입하면 버튼은 HTTP 요청을 전송하지 않는 평범한 버튼이 된다. type 속성을 명시하지 않으면 기본 값으로 submit을 가진다.
input 요소의 type 속성을 submit으로 하면 폼을 제출하는 버튼을 생성할 수 있다.
<form>
<button>Submit!!!</button>
<button type="button">Regular button (won't submit)</button>
<input type="submit" value="Click Me!">
</form>
<button>Not Inside Form</button>이름 속성
폼을 제출하면 form 요소의 action 속성에 기재된 곳으로 HTTP 요청을 보낸다. → 폼 컨트롤에 입력한 데이터를 전송할 때, 어떤 폼 컨트롤의 데이터인지를 지칭하기 위해 이름이 필요하다. → 이 이름은 보통 공백이 없고 간결하다. → input 태그에 name 속성으로 이름을 붙인다
<form action="">
<p>
<label for="username">Enter a Username:</label>
<input type="text" placeholder="username" id="username" name="username">
</p>
<p>
<label for="password">Enter a Password:</label>
<input type="password" placeholder="password" id="password" name="password">
</p>
<p>
<label for="color">Enter a Color:</label>
<input type="color" id="color" name="color">
</p>
<p>
<label for="number">Enter a Number:</label>
<input type="number" placeholder="enter a number" id="number" name="number">
</p>
</form>구글과 레딧 검색하기
<form action="https://www.google.com/search">
<label for="google">Google</label>
<input type="text" id="google" name="q">
<button>Search Google</button>
</form>
<form action="https://www.reddit.com/search/">
<label for="reddit">Reddit</label>
<input type="text" id="reddit" name="q">
<button>Search Reddit</button>
</form>라디오 버튼, 체크박스와 선택창
체크박스는 반드시 label 요소와 엮어야한다.
체크박스는 checked 속성을 추가해 처음부터 체크된 상태로 표시할 수 있다.
라디오 버튼은 그룹 중에서 딱 하나만 선택할 수 있는 체크박스다. → 같은 name을 부여해서 같은 그룹으로 묶는다.
라디오 버튼은 value 속성으로 서버에 전송될 값을 지정한다.
select 요소는 option 요소와 함께 드롭다운 메뉴를 생성한다. → select는 상위 요소로 여러 개의 option을 한 그룹으로 묶는다.
select 요소는 name과 id 속성을 가지고, option 요소는 value 속성을 갖는다.
<form>
<input type="checkbox" id="agree" name="agree_tos" checked>
<label for="agree">I agree to everything</label>
<p>
<label for="xs">XS:</label>
<input type="radio" id="xs" name="size" value="xs">
<label for="s">S:</label>
<input type="radio" id="s" name="size" value="s">
<label for="m">M:</label>
<input type="radio" id="m" name="size" value="m">
<label for="l">L:</label>
<input type="radio" id="l" name="size" value="l">
<label for="xl">XL:</label>
<input type="radio" id="xl" name="size" value="xl">
</p>
<p>
<label for="meal">Please Select an Entree</label>
<select id="meal" name="meal">
<option value="" selected>--Please choose an option--</option>
<option value="veg">vegetarian</option>
<option value="fish">fish</option>
<option value="steak">steak</option>
</select>
</form>범위 및 텍스트 영역
range input은 슬라이더를 만들어서 사용자가 그 범위 내에서 값을 선택하게 한다. → 최소값과 최대값은 min과 max 속성으로 조절할 수 있다.
min 속성과 max 속성은 number input에도 적용 가능하다.
textarea 요소는 텍스트를 입력할 수 있는 영역을 만든다. Enter 키를 치면서 타이핑 할 수 있꼬 문단, 에세이 등등 모든 것을 작성할 수 있다. textarea 요소는 여는 태그와 닫는 태그 모두 가진다.
<form>
<p>
<label for="cheese">Amount of Cheese</label>
<input type="range" id="cheese" min="1" max="10" step="0.5" name="cheese_level">
<input type="number" min="0" max="10000" step="2">
</p>
<p>
<label for="requests">Any Special Requests?</label>
<textarea id="requests" name="requests" rows="10" cols="40">
</p>
<button>Sumbint</button>
</form>HTML5 폼의 유효성 검사
유효성 검사는 입력에 제한을 추가하거나 사용자가 입력한 데이터의 유효성을 확인하는 것이다. → 예를 들면 어떤 필드는 절대 비어 있으면 안되거나, 비밀번호는 7-12자리여야 한다거나
required 속성은 input, select, textarea와 같은 요소를 반드시 데이터를 기입해야 하는 필수 요소로 만들 수 있다.
maxlength와 minlength 속성을 추가하여 최대 글자 수 또는 최소 글자 수 조건을 추가 할 수 있다.
또는 정규 표현식을 사용하여 조건을 명시할 수 있다.
input 요소의 type 속성에 email, url을 지정하여 입력을 이메일 형식 또는 주소 형식으로 제한할 수 있다.
