HTML CSS JS
DAY 28 - HTML 연습 (2024.08.09)
summ.n
2024. 8. 9. 11:57
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>나의 셀카</title>
</head>
<body>
<h3>나의 셀카</h3>
<hr>
<table>
<caption>나의 셀카</caption>
<tr>
<td>
<img src="../image/짱구1.webp" width="200" height="200" alt=""/>
</td>
<td>
<img src="../image/철수.webp" width="200" height="200" alt=""/>
</td>
<td>
<img src="../image/훈이.webp" width="200" height="200" alt=""/>
</td>
</tr>
</table>
</body>
</html>
alt 꼭 써주기 !!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>신체 검사</title>
</head>
<body>
<h3>신체 검사</h3>
<hr>
<table border="1" width="300">
<caption>학생 신체 검사 표</caption>
<thead>
<tr>
<th>이름</th>
<th>키</th>
<th>체중</th>
<th>시력</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>홍길동</td>
<td>179</td>
<td>67</td>
<td>1.0</td>
</tr>
<tr align="center">
<td>고길동</td>
<td>177</td>
<td>77</td>
<td>2.0</td>
</tr>
<tr align="center">
<td>김철수</td>
<td>165</td>
<td>57</td>
<td>1.2</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>평균</th>
<th>173</th>
<th>67</th>
<th>1.4</th>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>과일 수입</title>
</head>
<body>
<h3>과일 수입</h3>
<hr>
<table border="2">
<caption>과일 수입 표</caption>
<thead>
<tr align="center">
<th>사과</th>
<th>복숭아</th>
<th>수박</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="../image/사과.jpg" width="100" height="100" alt=""/>
</td>
<td>
<img src="../image/복숭아.jpg" width="100" height="100" alt=""/>
</td>
<td>
<img src="../image/수박.jpg" width="100" height="100" alt=""/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>한국</th>
<th>짱</th>
<th>최고</th>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>>웹 프로그래밍 참조 사이트</title>
</head>
<body>
<h3>웹 프로그래밍 참조 사이트</h3>
<hr>
<ul>
<li><a href="https://html5.validator.nu/" target="_blank">HTML5 태그 검사 사이트</a></li>
<li><a href="http://www.css-validator.org/validator.html.ko" target="_blank">CSS3 스타일 시트 검사 사이트</a></li>
<li><a href="http://www.html5.org" target="_blank">HTML5 표준</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>버튼이 있는 입력 폼</title>
</head>
<body>
<h3>버튼을 만들자</h3>
<hr>
<input type="button" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/><br>
<input type="button" value="4"/>
<input type="button" value="5"/>
<input type="button" value="6"/><br>
<input type="button" value="7"/>
<input type="button" value="8"/>
<input type="button" value="9"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>버튼이 있는 입력 폼</title>
</head>
<body>
<h3>버튼을 만들자</h3>
<hr>
<p>
<input type="button" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
</p>
<p>
<input type="button" value="4"/>
<input type="button" value="5"/>
<input type="button" value="6"/>
</p>
<p>
<input type="button" value="7"/>
<input type="button" value="8"/>
<input type="button" value="9"/>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>버튼이 있는 입력 폼</title>
</head>
<body>
<h3>버튼을 만들자</h3>
<hr>
<form action="#">
<div>
<input type="button" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
</div>
<div>
<input type="button" value="4"/>
<input type="button" value="5"/>
<input type="button" value="6"/>
</div>
<div>
<input type="button" value="7"/>
<input type="button" value="8"/>
<input type="button" value="9"/>
</div>
</form>
</body>
</html>
추가 공부할거 : form 태그 쓴 이유랑 div 이것도 뭔 차이인지