EX_01. <hr>태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실습</title>
</head>
<body>
<hr width="150" color="red" size="140">
<hr width="150" color="orange" size="120">
<hr width="150" color="yellow" size="100">
<hr width="150" color="green" size="80">
<hr width="150" color="blue" size="60">
<hr width="150" color="indigo" size="40">
<hr width="150" color="purple" size="20">
</body>
</html>
EX_02. <a>태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--필수 속성 herf(hypertext referenece)-->
<a href="https://www.naver.com/">네이버로 이동</a>
<a href="https://smhrd.or.kr/"> <img src="img/KakaoTalk_20220425_153848398.png" width="500"></a>
</body>
</html>
EX_03. 회원가입 폼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<table align ="center" width="400" >
<tr bgcolor="gray" height="50">
<th colspan="2" align="left" >step1 : 아이디/비번 입력</th>
</tr>
<tr heigt="50" bgcolor="whitesmoke">
<td align="right">아이디</td>
<td bgcolor="whitesmoke" ><input type="text"></td>
</tr>
<tr bgcolor="whitesmoke">
<td align="right">비밀번호</td>
<td bgcolor="whitesmoke"><input type="password"></td>
</tr>
<tr bgcolor="whitesmoke">
<td align="right">비밀번호 확인</td>
<td bgcolor="whitesmoke"><input type="password"></td>
</tr>
<tr bgcolor="gray" height="50">
<th colspan="2" align="left" >step2 : 아이디/비번 입력</th>
</tr>
<tr>
<td bgcolor="whitesmoke" align ="right">성별 : </td>
<td bgcolor="whitesmoke">남<input type="radio" name="gender"> 여<input type="radio" name="gender"></td>
</tr>
<tr><td bgcolor="whitesmoke" align ="right">혈액형 : </td><td bgcolor="whitesmoke"><select>
<option>A</option>
<option>B</option>
<option>O</option>
<option>AB</option>
</select></td></tr>
<tr>
<td bgcolor="whitesmoke" align ="right">생일 : </td><td bgcolor="whitesmoke"><input type="date"></td>
</tr>
<tr bgcolor="gray" height="50">
<th colspan="2" align="left" >step3 : 선호도</th>
</tr>
<tr>
<td bgcolor="whitesmoke" align ="right">
취미 : </td><td bgcolor="whitesmoke">축구<input type="checkbox"> 야구<input type="checkbox"> 농구<input type="checkbox">
</td>
</tr>
<tr>
<td bgcolor="whitesmoke" align ="right">좋아하는 색깔 : </td><td bgcolor="whitesmoke"><input type="color"></td>
</tr>
<tr bgcolor="gray" height="50">
<th colspan="2" align="left" >step4 : 적고 싶은 말</th>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="whitesmoke">
<textarea rows="10" cols="52" ></textarea>
</td>
</tr>
<tr>
<td align = "center" colspan="2"><input type="submit"><input type="reset"></tr></td>
</table>
</form>
</body>
</html>
'FRONT-END > HTML CSS' 카테고리의 다른 글
CSS 예제 (0) | 2022.07.14 |
---|---|
HTML /CSS 환경 구축 (0) | 2022.07.06 |