어제 회원가입폼을 만들었는데 그것도 업그레이드 한것이지만
너무 조잡한 느낌이 강하게 나서
오늘 배운것과 합쳐 더 세련된 "회원가입" 폼을 만들었다.
회원가입3
이것또한 구글랑 하여 나온 회원가입 폼을 보고 최대한 비슷하게 따라한 것이다.
그 블로그의 코드를 본것은 아니고 이미지만 보고
필요한 태그들이 무엇인지 구글링하여 만들었다.
어제 만든 회원가입 폼과 다른점은 border-radius로 입력창 모서리를 둥글게 바꿔주고
box-shadow로 그림자 효과를 조금 준것
class를 지정하여 style 태그에서 한번에 처리할수 있는 것들은 한번에 처리 한것
그리고 *을 span태그로 잡아 색깔을 넣어준 것 등이 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
/>
<style>
* {
font-family: "Noto Sans KR", sans-serif;
}
.container {
width: 30%;
margin: auto;
margin-top: 40px;
border: 2px solid rgb(255, 255, 255);
padding: 5px;
border-radius: 5px;
background-color: white;
box-shadow: 2px 3px 5px 0px rgb(21, 21, 22);
}
.label {
text-align: center;
}
td,
input {
padding: 4px;
}
.body1 {
background-color: rgb(215, 250, 238);
}
h2.title1 {
border: 2px solid rgb(255, 255, 255);
padding: 5px;
border-radius: 5px;
}
input {
border: 1px solid rgb(212, 212, 212);
border-radius: 5px;
background-color: white;
}
label {
font-weight: bold;
}
span {
color: red;
}
</style>
</head>
<body class="body1">
<div class="container">
<h2 class="title1">회원 가입</h2>
<form action="/" method="get">
<table>
<tr>
<td>
<label for="id">아이디<span>(*)</span></label>
</td>
<td>
<input
type="text"
name="userid"
id="id"
size="20"
class="id1"
placeholder="아이디 입력(6~20자)"
required
/>
</td>
</tr>
<br /><br />
<tr>
<td>
<label for="pw">비밀번호<span>(*)</span></label>
</td>
<td>
<input
type="text"
name="userpassword"
id="pw"
placeholder="비밀번호 입력"
required
/>
</td>
</tr>
<tr>
<td>
<label for="checkpw">비밀번호 재입력<span>(*)</span></label>
</td>
<td>
<input
type="text"
name="checkpassword"
id="checkpw"
placeholder="비밀번호 재확인"
required
/>
</td>
</tr>
<tr>
<td>
<label for="uname">이름<span>(*)</span></label>
</td>
<td>
<input
type="text"
name="username"
id="uname"
size="20"
placeholder="이름을 입력해주세요"
/>
</td>
</tr>
<tr>
<td><label for="gender">성별</label></td>
<td>
<input
type="radio"
name="gender"
id="female"
value="female"
/>여성
<input type="radio" name="gender" id="male" value="male" />남성
</td>
</tr>
<tr>
<td>
<label for="email">이메일<span>(*)</span></label>
</td>
<td>
<input
type="email"
name="emailadd"
id="emil"
placeholder="이메일을 입력해 주세요"
/>
</td>
</tr>
<tr>
<td>
<label for="pnumber">전화번호<span>(*)</span></label>
</td>
<td>
<input
type="tel"
name="phonenumber"
id="pnumber"
placeholder="01088887777(-제외)"
/>
</td>
</tr>
<tr>
<td><label for="introduce">자기소개</label></td>
<td>
<textarea
name="introduce"
cols="25"
rows="5"
style="
border: 1px solid rgb(212, 212, 212);
border-radius: 5px;
background-color: white;
"
></textarea>
</td>
</tr>
</table>
<div style="padding-left: 35%; margin-top: 20px">
<input
type="submit"
value="회원가입"
style="
border: 1px solid rgb(212, 212, 212);
border-radius: 5px;
background-color: #43abd8;
color: white;
width: 70px;
height: 50px;
"
/>
<input
type="reset"
value="가입취소"
style="
border: 1px solid rgb(212, 212, 212);
border-radius: 5px;
background-color: #ffce55;
color: #ffffff;
width: 70px;
height: 50px;
"
/>
</div>
</form>
<p style="text-align: right; opacity: 0.7">
(<span>*</span>) 는 필수 항목입니다.
</p>
<p></p>
</div>
</body>
</html>
지금 코드를 올려놓고 잠시 보니 필요없는 코드들이 있는게 눈에 보인다
어제와 바뀐것들을 조금 설명 하자면
.container {
width: 30%;
margin: auto;
margin-top: 40px;
border: 2px solid rgb(255, 255, 255);
padding: 5px;
border-radius: 5px;
background-color: white;
box-shadow: 2px 3px 5px 0px rgb(21, 21, 22);
}
일단 회원가입 폼에 자연스러운 테두리를 만들어 줬다는 것이다.
일단 body에 배경컬러를 지정해 줬고
그다음 background-color: white 로
그리고 살짝 떠있는 느낌을 주기 위해서 box-shadow: 태그를 썻다.
이렇게 하여 깔끔한 베이스를 만들었다.
또 중요한 태그는 border-radius: 이다.
radius는 모서리를 둥글게 하여 더 세련된 느낌을 줄수있다.
어떻게 보면 회원가입 폼에서 가장 중요한 태그 일지도 ?
input {
border: 1px solid rgb(212, 212, 212);
border-radius: 5px;
background-color: white;
}
input 태그가 무언가 타이핑 하는 박스가 만들어지는 태그이기 때문에
input 박스들
input 태그 전체에 border-radius 태그로 모서리를 둥글게 하는 효과를 주고
테두리는 1px solid 블랙컬러로
background-color:는 white로 깔끔한 폼을 만들기 위해 노력했다.
이정도만 해도 어제 만든 회원가입 폼보다 훨신 나아진다.
그다음은
*를 직접 타이핑하고
span태그 안에 잡은뒤
한번에 red 컬러로 바꾸어서 쉽게 처리 하였다.
어제였으면 못했을거지만 오늘 span 태그 div 태그 등등에 대해서 배웠기 때문에
쉽게 처리 하였다.
*강조
알고보면 쉬운데 모르고 보면 어려웠던 일정부분 글자색 바꾸기 ㅎㅎ
다음은 회원가입과 가입취소 버튼의 세팅 !
<div style="padding-left: 35%; margin-top: 20px">
<input
type="submit"
value="회원가입"
style="
border: 1px solid rgb(212, 212, 212);
border-radius: 5px;
background-color: #43abd8;
color: white;
width: 70px;
height: 50px;
"
/>
<input
type="reset"
value="가입취소"
style="
border: 1px solid rgb(212, 212, 212);
border-radius: 5px;
background-color: #ffce55;
color: #ffffff;
width: 70px;
height: 50px;
"
/>
</div>
설명할 포인트가 딱히 없다. 이미 위에서 다 설명했기 때문에 !
자기가 원하는 크기로 만들고 색깔을 주면 끝이다.
최대한 깔끔하게 하려고 노력했지만 역시 최악의 미적감각을 가진 본인 이기에
이정도가 한계엿다 ..
는 사실 시간이 있다면 더 업그레이드 할수 있는게 회원가입 폼이다.
그런데 아직 배우지 않은 코드들과 개념들을 막 사용해야 해서
내가 배운것들과 내 수준에 맞는 태그들을 사용하여 만들어 보았다.
며칠 더 배운다면 네이버 회원가입폼 정도는 만들지도 ^^
그날까지 열심히 해 보겠습니다.