1. 테이블1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 1</title>
</head>
<body>
<h2>테이블 1</h2>
<table>
<tr>
<td>첫번째 셀</td>
</tr>
</table>
<hr>
<table border="1" width="300">
<tr>
<td>첫번째 셀</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<td>첫번째 셀</td><td>두번째 셀</td>
</tr>
<tr>
<td>세번째 셀</td><td>네번째 셀</td>
</tr>
<tr>
<td>다섯번째 셀</td><td>여섯번째 셀</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<td colspan="2">첫번째 셀</td>
</tr>
<tr>
<td>세번째 셀</td><td>네번째 셀</td>
</tr>
<tr>
<td>다섯번째 셀</td><td>여섯번째 셀</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<td>첫번째 셀</td><td>두번째 셀</td>
</tr>
<tr>
<td rowspan="2">세번째 셀</td><td>네번째 셀</td>
</tr>
<tr>
<td>여섯번째 셀</td>
</tr>
</table>
</body>
</html>
2. 테이블2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 2</title>
</head>
<body>
<h2>테이블 2</h2>
<table>
<caption><p><b>KDT 수강생 리스트</b></p></caption>
<colgroup>
<col style="width: 100px; background-color: pink;">
<col style="width: 200px; background-color: skyblue;">
<col style="width: 300px; background-color: yellowgreen;">
</colgroup>
<tr>
<th>이름</th>
<th>연락처</th>
<th>주소</th>
</tr>
<tr>
<td>김사과</td>
<td>010-1111-1111</td>
<td>서울시 서초구 양재동</td>
</tr>
<tr>
<td>반하나</td>
<td>010-2222-2222</td>
<td>서울시 강남구 역삼동</td>
</tr>
<tr>
<td>오렌지</td>
<td>010-3333-3333</td>
<td>서울시 동작구 사당동</td>
</tr>
</table>
</body>
</html>
3. 아이프레임
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아이프레임</title>
</head>
<body>
<h2>아이프레임</h2>
<p><a href="./2. 테이블2.html">테이블 연습 페이지(현재창)</a></p>
<p><a href="./2. 테이블2.html" target="_blank">테이블 연습 페이지(새탭)</a></p>
<p><a href="./2. 테이블2.html" target="korea">테이블 연습 페이지(아이프레임)</a></p>
<p><a href="http://www.koreaisacademy.com" target="korea">코리아IT아카데미(아이프레임)</a></p>
<p><iframe src="http://www.koreaisacademy.com" style="width: 100%; height: 600px; border: 3px dashed red;" name="korea"></iframe></p>
</body>
</html>
4. 폼태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼태그</title>
</head>
<body>
<h2>폼태그</h2>
<form action="#" method="post">
<input type="hidden" name="hdd" value="서버로 전달될 값">
<p>
아이디 :
<input type="text" maxlength="20" placeholder="아이디를 입력하세요" name = 'userid' id="userid" required>
</p>
<p>
비밀번호 :
<input type="password" maxlength="20" placeholder="비밀번호를 입력하세요" name = 'userpw' id="userpw" required>
</p>
<p>
성별 :
<label for="male">남자</label><input type="radio" name="gender" value="남자" id="male" checked>
<label for="female">여자</label><input type="radio" name="gender" value="여자" id="female">
</p>
<p>
취미 :
<label for="hobby1">게임</label><input type="checkbox" name="hobby1" id="hobby1" value="게임" checked>
<label for="hobby2">술</label><input type="checkbox" name="hobby2" id="hobby2" value="술">
<label for="hobby3">다꾸</label><input type="checkbox" name="hobby3" id="hobby3" value="다꾸">
<label for="hobby4">배드민턴</label><input type="checkbox" name="hobby4" id="hobby4" value="배드민턴">
<label for="hobby5">드라마시청</label><input type="checkbox" name="hobby5" id="hobby5" value="드라마시청">
</p>
<p>첨부파일 : <input type="file" name="file"></p>
<p>이메일 : <input type="email" name="email"></p>
<p>웹사이트 : <input type="url" name="url" value="http://www.naver.com" readonly></p>
<p>전화번호 : <input type="tel" name="tel" disabled></p>
<p>생년월일 : <input type="date" name="birthday"></p>
<p>좋아하는숫자 : <input type='number' min='1' max='10' step='1'></p>
<p>쿠폰번호 : <input type="search" name="search"></p>
<p>좋아하는 색상 : <input type="color" name="color"></p>
<p>프로그래밍 능력 : <input type='range' min='0' max='10' value='3'></p>
<p>
직업 :
<select name="job" id="job">
<option value="프로그래머">프로그래머</option>
<option value="공무원">공무원</option>
<option value="의사">의사</option>
<option value="법조인">법조인</option>
<option value="취준생">취준생</option>
</select>
</p>
<p>자기소개 : </p>
<p>
<textarea name="content" id="content" cols="50" rows="5"></textarea>
</p>
<p>
<input type="button" value="클릭하세요" onclick="alert('안녕?')">
<input type="reset" value="초기화">
<input type="submit" value="회원가입">
<!-- submit은 form action="" 쌍따옴표 부분에서 입력된 경로로 이동을 시키는 것.-->
</p>
</form>
</body>
</html>
5. 디스플레이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>디스플레이</title>
</head>
<body>
<h2>디스플레이</h2>
1. <span style="font-size: 30px; color: deeppink;">span 태그 영역</span>입니다.
<div style="width: 600px; height: 300px; background-color: gold;">2. div 태그 영역</div>
</body>
</html>
