basic/HTML, CSS
day 22 실습(2) - 회원가입 from 만들기
못지(Motji)
2021. 5. 25. 22:02
CSS 활용하여 회원가입 from 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
<style>
#wrapper {
width: 55%;
margin: auto
}
h1 {text-align: center; background-color: }
table {
border: 1px solid #444444;
width: 100%;
}
th, td {
border: 1px solid #444444;
padding: 15px;
}
a:hover {background-color: yellowgreen;}
</style>
</head>
<body>
<div id="wrapper">
<h1>회원가입</h1>
<form>
<table>
<tr>
<td>아이디</td>
<td colspan="3"><input type="text" required> <br/></td>
</tr>
<tr>
<td>비밀번호</td>
<td colspan="2"><input type="password" required> <br/></td>
</tr>
<tr>
<td>비밀번호확인</td>
<td colspan="2"><input type="password" required> <br/></td>
</tr>
<tr>
<td palceholder="">이름</td>
<td colspan="2"><input type="text" required> <br/></td>
</tr>
<tr>
<td>휴대전화</td>
<td>
<input type="text" />
<input type="text" />
<input type="text" />
</td>
<td>
<select name="telecom">
<option value="SKT"> SKT </option>
<option value="LGU+"> LGU+ </option>
<option value="KT"> KT </option>
</select>
</td>
</tr>
<tr>
<td>성별</td>
<td colspan="2">
<input type="radio" name="gender" value="male"/> 남자
<input type="radio" name="gender" value="female"/> 여자
</td>
</tr>
<tr>
<td>생년월일</td>
<td colspan="2">
<input type="date" name="date" />
</td>
</tr>
<tr>
<td colspan="4">
<input type="checkbox"> 개인정보 활용 동의 <br/>
<input type="checkbox"> 마케팅 활용 동의</td>
</tr>
<tr>
<td colspan="4">
<input type="submit" value="가입">
<input type="reset" value="다시작성">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>🔎 미리보기
회원가입
💬 style은 코드블럭도 같이 적용이 되서 뺌!