개발 공부/HTML + CSS
[HTML/CSS] 회원가입 폼 만들기
sngynhy
2021. 8. 4. 19:10
요즘 진행중인 항공권 예매 프로젝트를 기반으로 만들어 본
항공권 예매 사이트 회원가입 폼
[사이트 메인화면 코드]
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HG AIR</title>
<link rel="icon" href="image/airplane_icon.ico">
<!-- 내부 스타일 시트 -->
<style type="text/css">
h1{
margin: 10px;
padding: 10px;
}
a:hover{
color: #ffc045;
}
.signup{
font-size: 40px;
text-decoration: none;
}
</style>
</head>
<body>
<div align="center">
<h1>HG Airline <img src="image/airplane_icon.ico" style="width:30px"></h1>
</div>
<div style="width: 100%">
<div align="right">
<a href="SignUp2.html" target="_blank" class="signup">
Sign Up
</a>
</div>
<br>
<img alt="비행기이미지" src="image/jet-3473061_1920.jpg" style="width:100%;">
</div>
</body>
</html>
코드 실행 시 뜨는 메인 화면
[마우스 오버 기능]
a:hover{ color: #ffc045; }
위 코드를 이용하여 Sign Up 텍스트 위에 마우스 커서를 올리면 텍스트 컬러가 설정한 RGB로 변경됨
[회원가입 화면으로 이동하는 코드]
<div align="right">
<a href="SignUp.html" target="_blank" class="signup">Sign Up</a>
</div>
[회원가입 화면 코드]
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HG_AIR</title>
<link rel="icon" href="image/airplane_icon.ico">
<style type="text/css">
@import url("NewFile2.css"); /* 외부 스타일 시트 import */
</style>
</head>
<body>
<div align="center">
<h1>HG Airline <img src="image/airplane_icon.ico" style="width:30px"></h1>
<h2>Sign Up</h2>
<form method="post">
<table>
<tr>
<td class="left">*ID</td>
<td><input type="text" placeholder="아이디입력" required></td>
</tr>
<tr>
<td class="left">*PW</td>
<td><input type="password" placeholder="비밀번호입력" required></td>
</tr>
<tr>
<td class="left">*PW</td>
<td><input type="password" placeholder="비밀번호확인" required></td>
</tr>
<tr>
<td class="left">Name</td>
<td><input type="text" placeholder="이름입력"></td>
</tr>
<tr>
<td class="left">Birth</td>
<td><input type="date"></td>
</tr>
<tr>
<td class="left">*Phone</td>
<td><select name="phonenumber">
<option selected>010</option>
<option>011</option>
<option>016</option>
<option>019</option>
</select> <input type="text" style="width: 50px; height: 15px;" required> - <input type="text" style="width: 50px; height: 15px;" required></td>
</tr>
<tr>
<td class="left">*E-mail</td>
<td><input type="text" placeholder="이메일입력"required></td>
</tr>
</table>
<br>
<div class="agree">
<input type="checkbox" name="agreeCheck"><span id="agreecheck"> 이용약관 및 개인정보수집 및 이용, 쇼핑정보 수신(선택)에 동의합니다.</span><br><br>
<p><textarea style="width: 550px; height: 150px;" readonly>1. 수집하는 개인정보 항목
HG_AIR에서 수집하는 개인정보는 다음과 같습니다.
가. 회원 관리
1) 회원가입 시(필수) : 아이디(ID), 비밀번호, 성명(한글 및 영어), 생년월일, 성별, 휴대전화번호, 이메일, 이메일 수신여부, SMS 수신여부, 연계정보(CI), 중복가입확인정보(DI)), 국적, 거주국가
2) 회원가입 시(선택) : 주소, 유선전화번호, 기업우대프로그램 회원가입여부
3) 만 14세 미만의 소아 회원 가입 시(필수) : 법정대리인의 성명 및 관계, 추가 정보(연락처) 등
4) 대리점 및 여행사 담당자 가입 시(필수) : 공식상호, 공식상호(영문), 대표자명, 주소, 대리점 대표전화, 법인번호, 사업자 등록번호, 업태 및 업종, 비밀번호, 입금은행, 계좌번호, 이메일
5) SNS 로그인 시(선택) : SNS 로그인 계정 Key값(비식별화 처리)
6) 비회원(필수) : 휴대전화번호 또는 이메일</textarea></p>
<br>
<table>
<tr>
<td><span>SMS 수신을 동의하십니까? </span></td>
<td><span class="recive"><input type="radio" name="check1">동의함</span>
<input type="radio" name="check1" checked>동의안함</td>
</tr>
<tr>
<td><span>이메일 수신을 동의하십니까? </span></td>
<td><span class="recive"><input type="radio" name="check1">동의함</span>
<input type="radio" name="check1" checked>동의안함</td>
</tr>
</table>
</div>
<br>
<div style="width: 100%">
<div align="center">
<button class="signup">
<img src="image/sign_up.png" style="width:100px">
</button>
</div>
</div>
</div>
</body>
</html>
[CSS]
@charset "UTF-8";
/* 외부 스타일 시트 */
*{
margin: 0;
padding: 0;
}
h1{
margin: 10px;
padding: 10px;
}
h2{
margin: 10px;
padding: 10px;
}
table{
margin: 10px;
padding: 2px;
/*border: 1px solid black; /* 표 바깥 테두리 선 */
}
tr{
height: 20px;
}
input {
height: 20px;
}
textarea {
width: 80%;
height: 100px;
}
.left{
background-color: lightblue;
}
.agree{
margin: 10px;
}
#agreecheck {
color: #042AaC;
}
.recive{
font-weight: bold;
}
.signup{
margin: 20px;
background-color:transparent;
border: 0px;
outline: 0px;
}
/*
선택자(selector): UI의 어느 부분을 디자인할지, 표현의 대상이 되는 부분
선택자 {
속성: 값;
} == 선언
*/
버튼을 이미지로 만든 뒤 배경 및 테두리 없애는 코드
[CSS]
.signup{
margin: 20px;
background-color:transparent;
border: 0px;
outline: 0px;
}
개인정보처리방침은 사용자가 작성할 수 없으므로 readonly로 작성 --> 댓글로 활용할 경우 readonly는 지우기
[HTML]
<textarea style="width: 550px; height: 150px;" readonly>
[느낀점]
프로그래밍과는 확연히 다른 느낌이다.
코드를 작성할때마다 바로 화면에 반영되는 것을 눈으로 확인할 수 있기에 흥미롭기는 하지만
디자인이나 다양한 요소를 생각해야하는 작업이라 쉽지는 않다.
공부해야할게 산더미....