Table
ํ
์ด๋ธ ์ด๋ ํ์ ์ฐ๋ฆฌ๊ฐ ๋ง์ด ์ฌ์ฉํ๋ Excel ์ํธ์ฒ๋ผ ํ๊ณผ ์ด๋ก ๊ตฌ์ฑ๋ ํ๋ฅผ ๋งํ๋ค.
์์ ์๋ ์น ํ์ด์ง์ ์ ์ฒด ๋ ์ด์์์ ๊ตฌ์ฑํ๋๋ฐ ํ
์ด๋ธ์ด ๋ง์ด ์ฌ์ฉ๋์์ผ๋ฉฐ ์ด๊ณผ ํ ํํ์ ๊ฒ์ํ๊ณผ
๊ฐ์ ํ์ด์ง๋ฅผ ์ ์ํ ๋ ์์ง๋ ๋ง์ด ์ฌ์ฉ๋๊ธด ํ์ง๋ง
์ค๋๋ ์๋ฉํฑ ์น(Semantic Web)์ด ๊ฐ์กฐ๋๊ณ HTML5์ ์ด์ ๊ด๋ จ๋ ์๋ฉํฑ ํ๊ทธ๋ค์ด
์๋กญ๊ฒ ์ถ๊ฐ๋๋ฉด์ ํ ์ด๋ธ์ ํตํด ์น ํ์ด์ง์ ๋ ์ด์์์ ๊ตฌ์ฑํ๊ฑฐ๋
์๋ฏธ ์๋ ํ ์ด๋ธ์ ์ฌ์ฉํ์ง ์๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด๋ค.
HTML 4.01์์ ์ฌ์ฉ๋๋ ํ ์ด๋ธ๊ณผ ๊ด๋ จ๋ ๋ง์ ์์ฑ๋ค์ CSS์์ ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ๋ฏ๋ก
HTML5์์๋ ํ ์ด๋ธ ํ๊ทธ์ ๊ด๋ จ๋ ์์ฑ๋ค์ ๋๋ถ๋ถ ์ฌ์ฉ๋์ง ์์ผ๋ฉฐ ์์ฆ์ CSS์์ ์ฒ๋ฆฌ๋๋ ๊ฒฝ์ฐ๊ฐ ์ผ๋ฐ์ ์ด๋ค.
์๋ฉํฑ ์น(Semantic Web) ์ด๋?
์๋ฉํฑ(Semantic)์ ์ฌ์ ์ ์๋ฏธ๋ ‘์๋ฏธ์, ์๋ฏธ๋ก ์ ์ธ’์ด๋ ๋ป์ ๊ฐ์ง๊ณ ์๋ค.
์ด ์๋ฉํฑ์ด๋ ๋จ์ด์ ์น์ด ๊ฒฐํฉ๋์ด ์๋กญ๊ฒ ์๊ธด ๋จ์ด๋ก ์น์์ ์ ๋ณด๋ฅผ ์ฌ๋๋ฟ๋ง์ด ์๋๋ผ
์ปดํจํฐ๋ ์ดํดํ ์ ์๋๋ก ํด์ฃผ๋ ๊ธฐ์ ์ ๋งํ๋ค.
๊ทธ๋ฌ๊ธฐ ์ํด์๋ ์ปดํจํฐ๊ฐ ์ดํดํ ์ ์๋๋ก ํน์ ๊ท์น์ ๋ง๋ ์๋ฏธ ์ ๋ณด๋ฅผ ์ด์ฉํด ์น ๋ฌธ์๊ฐ ์ ์๋์ด์ผ ํ๋ค.
์ฆ ์ปจํ
์ธ ์ ์ญํ ๊ณผ ๊ธฐ๋ฅ์ ๋ง๋ ์์๋ฅผ ์ ํํด ๋งํฌ์
ํด์ผ ํ๋ค๋ ๊ฒ์ด๋ค.
์๋ฅผ ๋ค์ด ์น ๋ฌธ์์ ํน์ ์ซ์๊ฐ ์ํ์ ๊ฐ๊ฒฉ์ ๋ํ ์ ๋ณด์ธ์ง
ํน์ ์ฌ๋์ ๋์ด์ ๋ํ ์ ๋ณด์ธ์ง ๋๋ ๋ ์ง ์ ๋ณด์ธ์ง๋ฅผ
์ปดํจํฐ๊ฐ ์ฝ๊ฒ ์ดํดํ๊ณ ์ฐพ์ ์ ์๋๋ก ์๋ฏธ์ ์ธ ์์๋ฅผ ์ถ๊ฐํ์ฌ ์น ๋ฌธ์๋ฅผ ์ ์ํ์๋ ๊ฒ์ด๋ค.
์น ๋ฌธ์์ ํ ์ด๋ธ ๋ฃ๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {width: 800px; border: 1px solid black; border-collapse: collapse;}
th {font-size: 20px; border: 1px solid black;}
tr {height: 30px; border: 1px solid black;}
td {text-align: center; border: 1px solid black;}
</style>
</head>
<body>
<h2>์น ๋ฌธ์์ ํ
์ด๋ธ ๋ฃ๊ธฐ</h2>
<table>
<tr>
<th>Java Script</th>
<th>Java</th>
</tr>
<tr>
<td>์๋ฐ์คํฌ๋ฆฝํธ ๋ง์คํฐ ๋ถ</td>
<td>์๋ฐ์ ์ ์</td>
</tr>
<tr>
<td>์๋ฐ์คํฌ๋ฆฝํธ ์๋ฒฝ ๊ฐ์ด๋</td>
<td>์๋ฐ ํ๋ก๊ทธ๋๋ฐ ๋ฐ์ด๋ธ</td>
</tr>
</table>
</body>
</html>
- <table> ํ๊ทธ ์์ <tr>(Table Row) ํ๊ทธ์ <td>(Table Data) ํ๊ทธ๋ฅผ ์ฌ์ฉํด
ํ ์ด๋ธ์ ์ด๊ณผ ํ์ ์๋์ ๊ฐ์ด ์์ฑํด์ผ ํ๋ค.
<table> ์์ฉ ์์
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ํ๋ฐฐ ์๊ธํ</title>
<style>
table {
border-collapse: collapse;
}
caption {
padding: 50px 0 20px 0;
font-size: 24px;
font-weight: bold;
}
th,td {
border: 1px solid gray;
padding: 10px;
}
thead {
background-color: #f2f2f2;
}
thead,tbody {
text-align: center;
}
ul {
font-size: 13px;
list-style-image: url(images/list_type01.jpg);
padding-left: 30px;
}
.width150 {width: 150px;}
.width300 {width: 300px;}
.qwe {background-color: #fcf6f6;}
</style>
</head>
<body>
<table>
<caption>ํ๋ฐฐ ์๊ธํ</caption>
<thead>
<tr>
<th rowspan="2" class="width200">๊ตฌ ๋ถ</th>
<th rowspan="2" class="width300">์ค๋/๊ท๊ฒฉ<br>(๊ฐ๋ก,์ธ๋ก,๋์ด์ ํฉ๊ณ)</th>
<th colspan="2" class="width300">๊ฐ ๊ฒฉ</th>
</tr>
<tr>
<th class="width150">ํ์</th>
<th class="width150">๋นํ์</th>
</tr>
</thead>
<tbody>
<tr>
<td class="qwe">CJ ๋ํํต์ด</td>
<td>20kg ์ดํ/160cm ์ดํ</td>
<td>๊ธฐ๋ณธ 3,700์</br>(ํ์ ํ ์ธ : 300์</br>๋จ,1์ผ 1ํ ํํจ)</td>
<td>์ต์ 4,000์</td>
</tr>
<tr>
<td class="qwe">ํ์งํ๋ฐฐ</td>
<td>20kg ์ดํ/ 140cm ์ดํ</td>
<td colspan="2">๊ธฐ๋ณธ 4,000์</td>
</tr>
<tr>
<td class="qwe">ํ์ฌ๋ก์ง์คํฑ์ค</td>
<td>20kg ์ดํ/ 140cm ์ดํ</td>
<td>๊ธฐ๋ณธ 3,700์</br>(ํ์ ํ ์ธ : 300์</br>๋จ,1์ผ 1ํ ํํจ)</td>
<td>์ต์ 4,000์</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<ul>
<li>๊ตฐ๋ถ๋ ๋ฐ ์ฌ์ํจ์ ์ด์ฉํ ์ฃผ์๋ ์งํ ๋ฐ ๋ฐฐ์ก์ด ๋์ง ์์ต๋๋ค.</li>
<li>์ฐฉ๋ถ๋ก๋ ํ๋ฐฐ์์ฝ์ด ๋์ง ์์ต๋๋ค.</li>
<li>๋ฐฐ์ก์ฌ์์ด ํ๋ฐฐ ๋ฌผํ ์๋ น ๋ฐฉ๋ฌธ ์, ์ํ ์ข
๋ฅ์ ๋ฐ๋ผ ์ ํฉํ๊ฒ ๋ฌผํ์ด ํฌ์ฅ ๋์ด ์์ด์ผ ์ ์๊ฐ ๊ฐ๋ฅํฉ๋๋ค.</li>
<li>๋ฐํ์ ๊ฒฝ์ฐ ์ ์ ๋ถ๊ฐํฉ๋๋ค.</li>
<li>ํ์ํ ์ธ์ 1์ผ 1ํ์ ํํฉ๋๋ค. (์ผ๋ถ ํ๋ฐฐ์ฌ ์ ์ธ)</li>
</ul>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
Form
์น ํ์ด์ง์์ ์๋น์ค์ ํ์ํ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ์ ์๋๋ก ํ๊ณ ์ ๋ ฅ๋ ๋ฐ์ดํฐ๋ฅผ ๋ถ์ํ์ฌ
์ฌ์ฉ์๊ฐ ํ์๋ก ํ๋ ์๋น์ค๋ฅผ ์ ๊ณตํ๊ฑฐ๋ ํ์ํ ๋ฐ์ดํฐ๋ฅผ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ ์ํธ์์ฉ์ด๋ผ๊ณ ํ๋ค.
์ด๋ ๊ฒ ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ๋ฐ์ดํฐ๋ฅผ ์๋ฒ๋ก ์ ์กํ๊ธฐ ์ํด์๋ ์ ๋ ฅ์์ ํ๊ทธ๋ค์ด <form> ํ๊ทธ์์ ์์นํด์ผ ํ๋ค.
๋ฌผ๋ก <form> ํ๊ทธ ๋ฐ์ ์์นํ ์ ๋ ฅ์์๋ ํ๋ฉด์ ์ด์ ์์ด ์ ํํ๋์ง๋ง ์ ๋ ฅ๋ ๋ฐ์ดํฐ๋ฅผ ์๋ฒ๋ก ์ ์กํ๊ธฐ ์ํด์๋ ๋ฐ๋์ <form> ํ๊ทธ๋ก ๊ฐ์ธ ์ค์ผ ํ๋ค. ๋ค์์ <form> ํ๊ทธ์ ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ๊ณผ ์์ฑ์ ์ค๋ช ํ ๊ฒ์ด๋ค.
<form name=“ํผ์ ๊ตฌ๋ถํ ์ด๋ฆ” action=“ํผ์ ์ ์กํ url”
method=“์ ์ก๋ฐฉ์” enctype=“์๋ฒ๋ก ๋ณด๋ผ ํผ ๋ฐ์ดํฐ์ ์ธ์ฝ๋ฉ ํ์”>
์ฌ๊ธฐ์ ์ฌ๋ฌ ๊ฐ์ง ์ ๋ ฅ ์์์ ์ด์ฉํด ํผ์ ๊ตฌ์ฑํ๋ค
</form>
ํ ์คํธ ์ ๋ ฅ์์ ๋ง๋ค๊ธฐ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>ํ
์คํธ ์์ ๋ง๋ค๊ธฐ</h2>
<form name="form1" action="http://192.168.0.16:8080/TestProject/server01.jsp" method="post">
์์ด๋ : <input type="text" name="name" maxlength="10" placeholder="ID" /><br>
๋น๋ฐ๋ฒํธ : <input type="password" name="pass" maxlength="10" placeholder="password"/><br>
ํ๊ณ ์ถ์ ๋ง : <br>
<textarea name="text" rows="10" cols="50"
placeholder="์ ๋ง ํ๊ณ ์ถ์ ๋ง๋ง ์ ์ด์ฃผ์ธ์."></textarea>
<br><input type="submit" value="์ ์ก" />
</form>
</body>
</html>
<input type=“text” name=“id” size=“20” maxlength=“10” value=“ํ๊ธธ๋” />
<input type=“password” name=“id” size=“20” maxlength=“10” value=“” />
<textarea name=“content” cols=“50” rows=“10”>
์คํ๋๋ฉด์ ์ด๊ธฐ์ ํ๋ฉด์ ๋ณด์ฌ์ง ํ ์คํธ๋ฅผ ์ฌ๊ธฐ์ ์ ๋ ฅํ ์ ์๋ค.
</textarea>
๋ผ๋์ค ๋ฒํผ๊ณผ ์ฒดํฌ๋ฐ์ค
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>๋ผ๋์ค ๋ฒํผ๊ณผ ์ฒดํฌ๋ฐ์ค</h2>
<form name="form1">
<p>์ด๋ฆ : <input type="text" name="name" maxlength="5" size="20" /></p>
<p>๋์ด : <input type="text" name="age" maxlength="3" size="20" /></p>
<p>ํฌ๋ง ์ฐ๋ด : <br/>
<label><input type="radio" name="salary" value="3000" checked>3000๋ง์</label>
<label><input type="radio" name="salary" value="4000">4000๋ง์</label>
<label><input type="radio" name="salary" value="5000">5000๋ง์</label>
</p>
<p>ํฌ๋ง ์ง์ญ : <br/>
<input type="checkbox" name="area" value="1" checked>์๋๊ถ<br>
<input type="checkbox" name="area" value="2">์ค๋ถ์ง์ญ<br>
<input type="checkbox" name="area" value="3">๋จ๋ถ์ง์ญ<br>
</p>
<input type="submit" value="์ ์ก">
</form>
</body>
</html>
์ ํ ์์ ๋ง๋ค๊ธฐ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>์ ํ์์ ๋ง๋ค๊ธฐ</h2>
<form name="form1"">
<p>์์ฃผ ์ด์ฉํ๋ ์์ : <br>
<select name="book_store">
<option value="yes24">์์ค24</option>
<option value="kyobobook">๊ต๋ณด๋ฌธ๊ณ </option>
<option value="aladin">์๋ผ๋</option>
<option value="ypbooks">์ํ๋ฌธ๊ณ </option>
<option value="etc">๊ธฐํ</option>
</select>
</p>
<input type="submit" value="์ ์ก">
</form>
</body>
</html>
submit ๋ฒํผ๊ณผ reset ๋ฒํผ์ ํน์ง
- input
<input type="submit" value="์ ์กํ๊ธฐ">
<input type="reset" value="๋ค์์ฐ๊ธฐ">
<input type="button" value="์ฐํธ๋ฒํธ ์ฐพ๊ธฐ" onclick="findZipcode('22333')">
- button
<button type="submit">์ ์กํ๊ธฐ</button>
<button type="reset">๋ค์์ฐ๊ธฐ</button>
<button type="button" onclick="findZipcode('55577')">์ฐํธ๋ฒํธ ์ฐพ๊ธฐ</button>
๋ช ๋ น ๋ฒํผ์ ๋ฒํผ์ด ํด๋ฆญ๋์์ ๋ ํน์ ๋ช ๋ น์ ์คํ ํ ์ ์๋ ๋ฒํผ์ผ๋ก ํธ์ฌ๋ฒํผ(Push Button) ์ด๋ผ๊ณ ๋ ํ๋ค.
์ฃผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฒํผ์ ์ด๋ฒคํธ ์์ฑ์ ํน์ ๋์์ ์ ์ํ ํจ์๋ฅผ ์ฐ๊ฒฐํ๋ฉด
๊ทธ ์ด๋ฒคํธ๊ฐ ๋ฐ์ ํ์ ๋ ์ฐ๊ฒฐ๋ ํจ์๊ฐ ์คํ๋๋ค.
HTML์์๋ ๋น๋ก ์ ๋ ฅ์์์ ์๋์ง๋ง ์ ๋ ฅ์์์ ๋ฒํผ๋ค๊ณผ ๋์ผํ
๋ชจ์๊ณผ ๋์์ ํ ์ ์๋ ํ๊ทธ๋ฅผ ๋ฐ๋ก ์ ๊ณตํ๋๋ฐ ์ด ํ๊ทธ๊ฐ ๋ฐ๋ก <button> ํ๊ทธ์ด๋ค.
์ด <button> ํ๊ทธ์ type ์์ฑ์ ์ง์ ํ์ฌ submit, reset, push ๋ฒํผ์ ๋ง๋ค ์ ์๋ค.
<button> ํ๊ทธ๋ ๋ด์ฉ์ ๊ฐ์ง ์ ์์ผ๋ฏ๋ก ์ฌ๋ ํ๊ทธ์ ๋ซ๋ ํ๊ทธ ์ฌ์ด์ ๋ด์ฉ์ ๊ธฐ์ฌํด์ผ ๋๋ค.
<button> ํ๊ทธ์ ๋ด์ฉ์ผ๋ก ํ ์คํธ๋ฟ๋ง ์๋๋ผ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง ๋ฒํผ๋ ๋ง๋ค ์ ์๋ค.
๋ช ๋ น ๋ฒํผ๊ณผ <button> ํ๊ทธ ์ฌ์ฉ๋ฒ์ ์๋์ ๊ฐ๋ค.
<button type="submit" name="btn_submit">์ ์กํ๊ธฐ</button>
<button type="reset" name="btn_reset">๋ค์์ฐ๊ธฐ</button>
<button type="button" name="btn_click"
onclick="clickAlert('ํ๊ธธ๋')">ํด๋ฆญ</button>
<input type="button" value="ํด๋ฆญํด ๋ณด์ผ" onclick="clickAlert('ํ๊ธธ๋')" />
ํ์ผ ์ ํ ๋ฒํผ๊ณผ ์จ๊ฒจ์ง ์ ๋ ฅ ์์
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>ํ์ผ ์ ํ ๋ฒํผ๊ณผ ์จ๊ฒจ์ง ์
๋ ฅ์์</h2>
<form name="form1" method="post" enctype="multipart/form-data">
<input type="hidden" name="customer" value="midastop" />
<table>
<tr>
<th>์ ๋ชฉ : </th>
<td><input type="text" name="title" size="30"></td>
</tr>
<tr>
<th>์ฌ์ง : </th>
<td><input type="file" name="file" accept="image/*" /></td>
</tr>
<tr>
<th>๋ฉ๋ชจ : </th>
<td>
<textarea name="memo" rows="5" cols="30"></textarea>
</td>
</tr>
<tr>
<td colspan="2" id="buttons">
<input type="submit" value="๋ฑ๋กํ๊ธฐ" style="margin-right: 10px;"/>
<input type="reset" value="์ทจ์ํ๊ธฐ" style="margin-left: 10px;"/>
</td>
</tr>
</table>
</form>
</body>
</html>
- input type์ผ๋ก file์ ๋ฃ์ผ๋ฉด file์ ์๋ฒ๋ก ๊ฐ์ ธ๊ฐ ์ ์๋ค.
- accept="image/*" ๋ ์ด๋ฏธ์ง ํํ์ ๋ชจ๋ ํ์ผ์ ๋ปํ๋ค.
'๐จ๏ธ Language > HTML, CSS, JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [CSS] ์คํ์ผ ์์ฑ (0) | 2024.08.12 |
|---|---|
| [CSS] ๋จ์์ ์ ํ์ (0) | 2024.08.12 |
| [HTML] ํ๊ทธ์ Style (0) | 2024.08.07 |
| [HTML] ๋ฌธ์์ ๊ธฐ๋ณธ ๊ตฌ์กฐ (0) | 2024.08.07 |
| Web์ ์ญ์ฌ์ ์น ํ์ค์ ํ์ํ ๊ธฐ์ (0) | 2024.08.07 |
