s09_table.html 생성<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테이블</title>
</head>
<body>
<h3>th, td 태그의 사용 및 속성 지정</h3>
<table border="1"> <!-- HTML5에서는 표 전체의 배경색을 지정하는 table 태그의 bgcolor 속성이 deprecated되었으므로, 표 전체의 배경색은 CSS로 처리해야 함 -->
<tr>
<th width="100">서울</th>
<th width="100">인천</th>
<th width="100">광주</th>
</tr>
<tr>
<td>왼쪽</td> <!-- 같은 열의 다른 셀에서 지정한 너비가 자동으로 적용됨; align의 기본값은 left -->
<td align="center">가운데</td>
<td align="right" bgcolor="#f3f3f3">오른쪽</td> <!-- bgcolor 속성으로 한 셀의 색 지정 가능 -->
</tr>
<tr>
<td height="100" valign="top">상단</td>
<td>중앙</td> <!-- 같은 행의 다른 셀에서 지정한 높이가 자동으로 적용됨; valign의 기본값은 middle -->
<td valign="bottom" background="../images/landscape.jpg">하단</td> <!-- background 속성으로 한 셀의 배경 이미지 지정 가능 -->
</tr>
<tr>
<td><img src="../images/landscape.jpg" width="100"></td>
<td><img src="../images/landscape.jpg" width="50"></td>
<td><img src="../images/landscape.jpg" width="100%"></td>
</tr>
</table>
<h3>셀 합치기</h3>
<table border="1">
<tr>
<td width="100">1</td>
<td width="200" colspan="2">2, 3</td> <!-- 같은 행에서 셀을 합칠 때 colspan 사용 -->
</tr>
<tr>
<td rowspan="2">4, 7</td> <!-- 같은 열에서 셀을 합칠 때 rowspan 사용 -->
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
s10_iframe.html 생성<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
Hello World!!<br>
안녕하세요! 오늘은 금요일입니다.</br>
<iframe width="500" height="300" src="s02_character.html"></iframe>
<br>
반갑습니다.<br>
오늘은 날씨가 많이 흐리네요~~
</body>
</html>
name
id
webapp 폴더 오른쪽 클릭하고 새 폴더 ch02-form 생성 후 새 HTML 파일 s01_form.html 생성<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<!--
서버에 데이터를 전송할 때는 form 태그 안에 하위 태그 input, select, textarea 등을 명시하고 태그에 데이터를 입력해서 전송함
form 태그 바깥에 명시한 태그에 입력된 데이터는 전송되지 않음
-->
<form action="a.jsp" method="post"> <!-- action 속성의 값에는 서버 프로그램의 주소를 명시하고, method 속성에는 데이터 전송 방식(post 또는 get)을 명시함 -->
<!--
input : 한 줄 입력 태그; 단독 태그
type : input 태그의 동작 방식
name : 서버에 데이터 전송시 식별할 수 있도록 하는 key
size : input 칸의 크기
maxlength: 최대 입력 가능한 글자 수
-->
이름 <input type="text" name="name" size="10" maxlength="10"><br>
비밀번호 <input type="password" name="password" size="10"><br> <!-- type이 password이면 입력한 내용이 보이지 않고, 한/영 전환이 불가능(영문, 숫자, 특수문자만 입력받게끔 하는 것) -->
파일 업로드 <input type="file" name="image"><br> <!-- type이 file이면 파일을 검색할 수 있음 -->
좋아하는 계절<br>
<!-- checkbox는 다중 선택이 가능 -->
<!-- 입력받는 게 아니라 선택하는 것이므로, 사용자가 체크박스를 선택하면 서버로 전송할 데이터(=value)를 미리 지정해야 함 -->
<input type="checkbox" name="season" value="spring" checked="checked">봄 <!-- checked 속성을 주면 선택된 상태가 기본값이 됨 -->
<input type="checkbox" name="season" value="summer">여름
<input type="checkbox" name="season" value="fall">가을
<input type="checkbox" name="season" value="winter">겨울
<br>
국적<br>
<!-- radio는 같은 식별자(=name)를 갖는 input 태그 중 단일 선택을 강제 -->
<!-- 일단 선택하면 해제 불가 -->
<input type="radio" name="country" value="ROK" checked="checked">대한민국 <!-- checked 속성을 주면 선택된 상태가 기본값이 됨 -->
<input type="radio" name="country" value="US">미국
<input type="radio" name="country" value="UK">영국
<input type="radio" name="radiotest" value="TEST">확인
<input type="radio" name="country" value="DE">독일
<br>
학교<br>
<!-- select는 값 목록 중에서 값 선택 -->
<select name="school">
<option value="es">초등학교</option>
<option value="ms">중학교</option>
<option value="hs" selected="selected">고등학교</option> <!-- selected 속성을 주면 첫 번째 option 태그 대신 해당 태그가 기본값으로 선택됨 -->
<option value="학부">대학교</option>
</select>
<br>
직업<br>
<select name="job">
<optgroup label="전문직"> <!-- optgroup 태그는 옵션들을 묶어줌 -->
<option value="의사">의사</option>
<option value="프로그래머">프로그래머</option>
<option value="헤어 디자이너">헤어 디자이너</option>
</optgroup>
<optgroup label="스포츠 선수">
<option value="basketball">농구 선수</option>
<option value="baseball">야구 선수</option>
<option value="soccer">축구 선수</option>
</optgroup>
</select>
<br>
내용<br>
<!-- textarea : 여러 줄 입력 태그; 쌍 태그 -->
<textarea rows="5" cols="50" name="content"></textarea>
<br>
읽기 전용 <input type="text" name="level" value="일반 회원" readonly="readonly"> <!-- readonly 속성을 주면 value 속성의 값이 화면에 표시만 되고 사용자가 그 값을 수정할 수 없게 됨 -->
<br>
비활성화 <input type="button" value="전 페이지로 이동" disabled="disabled"> <!-- type이 button이면 버튼이 생성되고 value의 값이 버튼에 표시됨; disabled 속성을 주면 사용자가 버튼을 누를 수 없게 됨; 버튼을 눌렀을 때의 동작은 javascript를 이용하여 별도로 구현해야 함 -->
<br>
<input type="submit" value="전송"> <!-- type이 submit이면 form 태그 내에서 입력했던 내용을 서버로 전송하는 버튼이 생성됨; value의 값이 버튼에 표시되며, 현재 form 태그에 잘못된 서버 주소를 입력했기 때문에 누르면 톰캣 에러 페이지가 나타남 -->
<input type="reset" value="초기화"> <!-- type이 reset이면 form 태그 내에서 입력했던 내용을 모두 기본값으로 초기화하는 버튼이 생성됨; value의 값이 버튼에 표시됨 -->
</form>
</body>
</html>
s02_form.html 생성<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="a.jsp" method="post" oninput="result.value=parseInt(priority.value)"> <!-- oninput 이벤트 속성을 이용하여 range 필드에서 얻은 값을 output 태그로 복사; 이벤트 속성을 form 태그에 줄 경우 여러 태그로부터 정보를 받아 사용할 수 있지만, input 태그에 줄 경우 해당 태그의 정보만 사용 가능 -->
<!--
fieldset : 외곽선을 만들어 form을 그룹핑하는 역할
legend : 제목 지정
-->
<fieldset>
<legend>프로젝트 정보</legend>
<ul>
<li>
<!-- label : 입력 창 앞에 '아이디', '비밀번호'처럼 붙여 놓은 텍스트를 말함; label 태그를 사용하면 form 요소와 label 텍스트가 서로 연결되어 있다는 것을 브라우저가 알 수 있음 -->
<!--
autofocus : 페이지 로드시 포커스(=해당 input 태그에 커서를 위치시키는 것) 지원
required : 입력 필수 지정
-->
<label for="writer">이름</label> <!-- for 속성에 (label 태그와 연결할) input 태그의 id 값을 명시 -->
<input type="text" name="username" id="writer" required autofocus> <!-- id 속성은 input 태그를 unique하게 식별하는 값을 가져야 함; 속성명에서 선택할 수 있는 속성값이 하나뿐인 경우 값 지정을 생략 가능 -->
</li>
<li>
<!--
range : 슬라이드 막대로 표시하는 숫자 필드; input 태그의 type에 명시하는 속성값을 필드라고 함
-->
<label for="priority">중요도</label>
<input type="range" name="importance" id="priority" min="0" max="10" value="0"> <!-- 슬라이드로 선택한 값을 화면에 표시하려면 별도로 output 태그와 JavaScript 이벤트를 사용해야 함 -->
<!--
output : 계산의 결과를 삽입; for 속성에 (output 태그와 연결할) input 태그의 id 값을 명시
-->
<output id="result" for="priority"></output>
</li>
<li>
<!--
number : 숫자 필드
-->
<label for="hours">예상 시간</label>
<input type="number" name="hours" id="hours" min="0" max="24"> <!-- min, max 속성을 주면 지정한 범위를 벗어나는 값을 입력할 수는 있어도 전송할 수는 없음 -->
</li>
<li>
<!--
date : 날짜 필드
-->
<label for="start_date">시작 날짜</label>
<input type="date" name="start_date" id="start_date">
</li>
<li>
<!--
email : 이메일 필드; @와 .를 포함하여 형식에 맞는 입력 강요
-->
<label for="email">이메일</label>
<input type="email" name="email" id="email">
</li>
<li>
<!--
url : URL 필드; 프로토콜을 포함하여 형식에 맞는 입력 강요
-->
<label for="url">웹 사이트 주소</label>
<input type="url" name="url" id="url">
</li>
<li>
<!--
search : 검색 필드; text 필드와 유사하지만, 입력을 취소하는 기능을 지원
-->
<label for="search">검색</label>
<input type="search" name="search" id="search">
</li>
<li>
<input type="submit" value="전송">
</li>
</ul>
</fieldset>
</form>
</body>
</html>