[HTML/CSS/JS] 회원가입화면 만들기
2024. 1. 8. 17:10ㆍHTML + CSS+JS/Practice
반응형
🔵 실습 1
<!DOCTYPE html>
<html>
<head>
<title>회원 가입 양식</title>
<link rel="stylesheet" href="./join_form.css">
</head>
<body>
<section>
<header>
<h3>회원 가입 양식</h3>
</header>
<article>
<table>
<tbody>
<tr>
<td>- 아이디</td>
<td>
<input type="text" name="id"/>
</td>
</tr>
<tr>
<td>- 비밀번호</td>
<td>
<input type="password" name="password"/>
</td>
</tr>
<tr>
<td>- 비밀번호 확인</td>
<td>
<input type="password" name="password_confirm"/>
</td>
</tr>
<tr>
<td>- 이름</td>
<td>
<input type="text" name="name"/>
</td>
</tr>
<tr>
<td>- 성별</td>
<td>
<input type="radio" id="female" name="gender" value="female"/>
<label for="female">여성</label>
<input type="radio" id="male" name="gender" value="male"/>
<label for="male">남성</label>
</td>
</tr>
<tr>
<td>- 전화번호</td>
<td>
<select name="area_code">
<option value="02" selected>02</option>
<option value="032">032</option>
<option value="042">042</option>
<option value="051">051</option>
<option value="052">052</option>
<option value="053">053</option>
<option value="062">062</option>
<option value="064">064</option>
<option value="031">031</option>
<option value="033">033</option>
<option value="041">041</option>
<option value="043">043</option>
<option value="054">054</option>
<option value="055">055</option>
<option value="061">061</option>
<option value="063">063</option>
</select>
-
<input type="number" name="tel_middle_number"/>
-
<input type="number" name="tel_last_number"/>
</td>
</tr>
<tr>
<td>- 이메일</td>
<td>
<input type="text" name="email"/>
@
<select name="email_suffix">
<option value="" selected>선택</option>
<option value="gmail.com">gmail.com</option>
<option value="hanmail.net">hanmail.net</option>
<option value="naver.com">naver.com</option>
</select>
</td>
</tr>
<tr>
<td>- 자기소개</td>
<td>
<textarea class="introduce-textarea" name="introduce"></textarea>
</td>
</tr>
</tbody>
</table>
</article>
</section>
</body>
</html>input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
appearance: none;
}
.introduce-textarea {
min-width: 360px;
min-height: 90px;
}
🔵 실습 2
<!DOCTYPE html>
<html>
<head>
<title>회원가입정보</title>
<meta charset="utf-8">
<link rel="stylesheet" href="member.css">
</head>
<body>
<div id="mem_title">
<img src="./images/title_icon_10.png">
<span style="margin-left: 4px;">회원가입정보</span>
</div>
<form>
<ul id="mem_form">
<li class="row">
<ul class="item">
<li class="col1">
<img src="images/star_icon_4.png">
<span style="margin-left: 4px;">아이디</span>
</li>
<li class="col2">
<ul>
<li>
<input type="text">
</li>
<li>
<button class="duplication-button" type="button" onclick="alert('클릭')">중복확인</button>
</li>
<li style="margin-left: 4px;">영문, 숫자 조합으로 4~12자 이내</li>
</ul>
</li>
</ul>
</li>
<li class="row">
<ul class="item">
<li class="col1">
<img src="images/star_icon_4.png">
<span style="margin-left: 4px;">비밀번호</span>
</li>
<li class="col2">
<ul>
<li>
<input type="password">
<li style="margin-left: 4px;">영문, 숫자 조합으로 4~12자 이내</li>
</li>
</ul>
</li>
</ul>
</li>
<li class="row">
<ul class="item">
<li class="col1">
<img src="images/star_icon_4.png">
<span style="margin-left: 4px;">비밀번호 확인</span>
</li>
<li class="col2">
<ul>
<li>
<input type="password">
</li>
</ul>
</li>
</ul>
</li>
<li class="row" id="name">
<ul class="item">
<li class="col1">
<img src="images/star_icon_4.png">
<span style="margin-left: 4px;">이름</span>
</li>
<li class="col2">
<ul>
<li>
<input type="text">
</li>
</ul>
</li>
</ul>
</li>
<li class="row" id="birthday">
<ul class="item">
<li class="col1">
<img src="images/star_icon_4.png">
<span style="margin-left: 4px;">생년월일</span>
</li>
<li class="col2">
<ul>
<li>
<input style="width: 40px;" type="text">
</li>
<li>년 </li>
<li>
<input style="width: 20px;" type="text">
</li>
<li>월 </li>
<li>
<input style="width: 20px;" type="text">
</li>
<li>일 </li>
<li style="display: flex; align-items: center;">
<input style="width: 10px;" type="radio" name="year" checked>
</li>
<li style="margin-left: 4px;">음력 </li>
<li style="display: flex; align-items: center;">
<input style="width: 10px;" type="radio" name="year">
</li>
<li style="margin-left: 4px;">양력 </li>
</ul>
</li>
</ul>
</li>
<li class="row" id="email">
<ul class="item">
<li class="col1">
<img src="images/star_icon_4.png">
<span style="margin-left: 4px;">이메일</span>
</li>
<li class="col2">
<ul>
<li>
<input type="text">
</li>
</ul>
</li>
</ul>
</li>
<li class="row">
<ul class="item">
<li class="col1">
<img src="images/star_icon_4.png">
<span style="margin-left: 4px;">휴대전화</span>
</li>
<li class="col2">
<ul>
<li>
<input style="width: 30px;" type="text">
</li>
<li>-</li>
<li>
<input style="width: 40px;" type="text">
</li>
<li>-</li>
<li>
<input style="width: 40px;" type="text">
</li>
</ul>
</li>
</ul>
</li>
<li class="row" id="job">
<ul class="item">
<li class="col1">
<span>직업</span>
</li>
<li class="col2">
<ul>
<li>
<select>
<option>직업선택</option>
<option>직장인</option>
<option>사업가</option>
<option>학생</option>
<option>기타</option>
</select>
</li>
</ul>
</li>
</ul>
</li>
<li class="row" id="target">
<ul class="item">
<li class="col1">
<span>영어수강목적</span>
</li>
<li class="col2">
<ul>
<li>
<input style="width: 10px;" type="checkbox">
</li>
<li style="margin-left: 4px; margin-right: 8px;">시험대비</li>
<li>
<input style="width: 10px;" type="checkbox">
</li>
<li style="margin-left: 4px; margin-right: 8px;">업무상</li>
<li>
<input style="width: 10px;" type="checkbox">
</li>
<li style="margin-left: 4px; margin-right: 8px;">취미</li>
<li>
<input style="width: 10px;" type="checkbox">
</li>
<li style="margin-left: 4px; margin-right: 8px;">기타</li>
</ul>
</li>
</ul>
</li>
</ul><!-- mem_form -->
<div id="buttons">
<button type="button" onclick="alert('클릭')">
<img style="margin-right: 4px;" src="images/circle_right_arrow_icon_12.png">
가입취소
</button>
<button class="ok-button" type="button" onclick="alert('클릭')">
<img style="margin-right: 4px;" src="images/circle_right_arrow_icon_12.png">
가입완료
</button>
</div>
</form>
</body>
</html>* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
input {
width: 80px;
height: 16px;
border: 1px solid #cccccc;
}
input[type="checkbox"] {
margin-top: 1px;
}
select {
width: 80px;
height: 20px;
border: 1px solid #cccccc;
font-size: 12px;
}
#mem_title {
width: 700px;
height: 25px;
margin-top: 10px;
margin-left: 20px;
border-bottom: 2px solid #1b894d;
display: flex;
align-items: center;
}
#mem_form {
width: 700px;
margin-left: 20px;
padding-top: 5px;
color: #888888;
font-size: 12px;
font-family: '돋움', 'Dotum';
}
.row {
height: 30px;
margin-top: 10px;
border-bottom: 1px solid #cccccc;
}
.item {
display: flex;
align-items: center;
}
.col1 {
width: 120px;
display: flex;
align-items: start;
justify-content: end;
}
.col2 {
margin-left: 10px;
}
.col2 > ul {
display: flex;
align-items: center;
}
.duplication-button {
margin-left: 4px;
padding: 2px 8px 3px 8px;
border: none;
background-color: #396781;
color: white;
font-size: 8px;
cursor: pointer;
}
#buttons {
width: 700px;
margin-top: 20px;
display: flex;
justify-content: center;
}
#buttons > button {
padding: 4px 8px 4px 8px;
border: 1px solid #cccccc;
border-radius: 4px;
background: white;
font-size: 12px;
display: flex;
align-items: center;
cursor: pointer;
}
.ok-button {
margin-left: 8px;
}반응형
'HTML + CSS+JS > Practice' 카테고리의 다른 글
| [HTML/CSS/JS] 로그인(login)화면 만들기 (2) | 2024.01.08 |
|---|---|
| [HTML/CSS/JS] 달력 (calendar) 만들기 (0) | 2024.01.08 |
| [HTML/CSS/JS] table 생성 (0) | 2024.01.08 |
| [HTML/CSS/JS] text 출력 실습 (0) | 2024.01.08 |