728x90
table태그로 큰 틀을 짜서 실습을 했다!
<!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 method="get" action="#">
<table width="400px">
<!-- step 1 : 아이디/비번 입력 -->
<!-- (tr>td*2)*4 식을 활용하면 한번에 윤곽이 잡힘 -->
<tr bgcolor="gray" height="50px">
<th colspan="2">Step1 : 아이디/비번 입력</th>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td>아이디</td>
<td>
<input type="text">
</td>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td>비밀번호</td>
<td>
<input type="password">
</td>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td>비밀번호 확인</td>
<td>
<input type="password">
</td>
</tr>
<!-- step 2 : 개인정보 -->
<tr bgcolor="gray" height="50px">
<th colspan="2">Step2 : 개인정보</th>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td>성별</td>
<td>
남 <input type="radio" name="gender" value="man">
여 <input type="radio" name="gender" value="woman">
</td>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td>혈액형</td>
<td>
<select>
<option>A형</option>
<option>B형</option>
<option>O형</option>
<option>AB형</option>
</select>
</td>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td>생일</td>
<td>
<input type="date">
</td>
</tr>
<!-- step 3 : 선호도 -->
<tr bgcolor="gray" height="50px">
<th colspan="2">Step 3 : 선호도</th>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td>취미</td>
<td>
축구 <input type="checkbox" name="hobby" value="sc">
야구 <input type="checkbox" name="hobby" value="bs">
농구 <input type="checkbox" name="hobby" value="bk">
</td>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td>좋아하는 색깔</td>
<td>
<input type="color">
</td>
</tr>
<!-- step 4 : 하고싶은 말 -->
<tr bgcolor="gray" height="50px">
<th colspan="2">Step 4 : 하고싶은 말</th>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td colspan="2">
<textarea cols="56" rows="5"></textarea>
</td>
</tr>
<!-- 제출 & 초기화 -->
<tr height="35px" bgcolor="whitesmoke">
<td align="center" colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
실습으로 하나하나 디자인을 했지만
이제 CSS를 배우면 이 코드보다 짧고, 간단하고, 더 감각있게 디자인을 할 수 있다는 것!
728x90
'HTML - CSS > 기초정리' 카테고리의 다른 글
| CSS 기초 - 계층선택자 / 반응선택자 / 그룹선택자 (0) | 2023.01.06 |
|---|---|
| CSS 기초 - 선택자와 선언 / 선택자의 종류 (0) | 2023.01.05 |
| HTML 기초 - form 태그 (0) | 2023.01.05 |
| HTML 기초 - a 태그 / 테이블 태그 (0) | 2023.01.04 |
| HTML 기초 - 리스트 태그 / 이미지 태그 (0) | 2023.01.04 |