새싹 교육 과정을 통해 2주간 HTML, CSS를 배우고 배운 내용을 토대로 회원가입 창을 만들어 보려고 합니다.
table 태그와 input 태그를 복습할 수 있고 나중에 미니 프로젝트에서 회원가입 창을 만들때 활용해볼 수 있을 것 같아
만들어 보았습니다 :)
1. 먼저 form, table, input 태그를 활용해서 html을 작성해 보았습니다
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="join">
<div class="inner">
<h1>JOIN</h1>
<form>
<fieldset>
<table>
<tr>
<th scope="row"><label for="id">USER ID</label></th>
<td>
<input type="text" id="id" name="id" placeholder="아이디를 입력해 주세요." required />
</td>
</tr>
<tr>
<th scope="row"><label for="pwd1">PASSWORD</label></th>
<td>
<input type="password" name="pwd1" id="pwd1" placeholder="비밀번호를 입력해 주세요." required />
</td>
</tr>
<tr>
<th scope="row">
<label for="pwd2">RE PASSWORD</label>
</th>
<td>
<input type="password" name="pwd2" id="pwd2" placeholder="비밀번호를 재입력 해 주세요." required />
</td>
</tr>
<tr>
<th scope="row">GENDER</th>
<td>
<label for="male">
<input type="radio" name="gender" id="male" value="male" />
MALE
</label>
<label for="female">
<input type="radio" name="gender" id="female" value="female" />
FEMALE
</label>
</td>
</tr>
<tr>
<th scope="row">
<label for="email">E-MAIL</label>
</th>
<td>
<input type="email" id="email" name="email" placeholder="이메일을 입력해 주세요." />
</td>
</tr>
<tr>
<th colspan="2">
<input type="reset" value="CANCEL" />
<input type="submit" value="SUBMIT" />
</th>
</tr>
</table>
</fieldset>
</form>
</div>
</section>
</body>
</html>
2. 테이블 모양을 잡아주기 위해 간단하게 css를 추가해 보았습니다.
table {
width: 70%;
border-top: 2px solid #999;
border-bottom: 2px solid #999;
}
th {
width: 20%;
text-align: left;
font: bold 14px/1 'arial';
color: #666;
padding: 20px 30px;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
background: #eee;
}
th:last-child {
text-align: center;
border-right: none;
background: #fff;
font-size: 0;
}
input[type='text'],
input[type='password'],
input[type='email'] {
width: 200px;
height: 30px;
border: 1px solid #bbb;
background: #eeffff;
padding-left: 10px;
}
input[type='reset'],
input[type='submit'] {
width: 200px;
height: 40px;
border: none;
background: #444;
font: bold 14px/1 'arial';
color: #fff;
margin: 0 10px;
}
td {
width: 80%;
border-bottom: 1px solid #bbb;
padding: 20px 30px;
width: 200px;
height: 30px;
padding-left: 10px;
}
table 태그와 input 태그를 복습해 보기 위해 만든 회원가입 창이라 스타일은 허접하지만
여기에 자바스크립트로 기능을 추가하면 form validation 기능이 있는 회원가입 창을 만들 수 있을 것 같습니다
나중에 자바스크립트 기능을 추가하여 미니 프로젝트에 적용해 볼 생각입니다!!
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅
'새싹' 카테고리의 다른 글
| [새싹 프론트엔드] Styled-Components 기초 배우기 (0) | 2022.11.28 |
|---|---|
| [새싹 프론트엔드] React Router (0) | 2022.11.22 |
| [새싹 프론트엔드] 자바스크립트로 계산기 만들기 (1) | 2022.11.14 |
| [새싹 프론트엔드] for문과 while문은 언제 사용해야 할까? (0) | 2022.11.07 |
| [새싹 프론트엔드] 브라우저 동작 방법 (0) | 2022.10.17 |
