[CSS] css(벤치마킹-회원가입)
<!-- 1페이지 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>식신회원가입 메인</title>
<link rel="stylesheet" type="text/css"
href="../siksinMemberCss/siksinmember02.css">
</head>
<body>
<div class="member">
<form action="./siksinmember02-2.html" method="post"
enctype="application/x-www-form-urlencoded">
<fieldset>
<div align="center">
<img class="a" src="../image/식신 회원가입을 환영합니다.PNG" width="600"
height="300"><br> <br>
</div>
<div align="center">
사용하시는 SNS계정으로 서비스에 가입하세요.<br> <br>
</div>
<div align="center">
<a href="https://www.naver.com/"><img class="a"
src="../image/고양이사진.png" width="100" height="100"></a>
<a href="https://www.kakaocorp.com/"><img class="a"
src="../image/고양이사진.png" width="100" height="100"></a>
<a href="https://www.naver.com/"><img class="a"
src="../image/고양이사진.png" width="100" height="100"></a>
<a href="https://www.naver.com/"><img class="a"
src="../image/고양이사진.png" width="100" height="100"></a><br> <br>
</div>
<div align="center">
휴대폰번호만으로 간편하게 가입도 가능합니다.<br> <br>
</div>
<div align="center">
<button type="submit">휴대폰번호로 가입</button>
</div>
</fieldset>
</form>
</div>
</body>
</html>
<!-- 2페이지 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>식신 회원가입</title>
<link rel="stylesheet" type="text/css"
href="../siksinMemberCss/siksinmember02.css">
</head>
<body class="center">
<div id="contentsArea">
<div id="titlename">
<div class="member">
<form action="https://www.siksinhot.com" method="post"
enctype="application/x-www-form-urlencoded">
<fieldset class="member2">
<!-- 그룹화한 범위의 이름을 캡션으로 표시한다. -->
<h1>회원정보</h1>
<hr color="black">
<div class="font">
<p>
<label for="memberName"> 이름 </label> <input class="input"
type="text" name="memberName" id="memberName"
placeholder="이름을 입력해주세요"><br> <br>
</p>
<p>
<label for="nickName">닉네임 </label> <input class="input" type="text"
name="nickName" id="nickName"
placeholder="닉네임을 입력해주세요"><br>
<div class="fontA">
* 2~30자<br> <br>
</div>
</p>
<p>
<label for="password"> 비밀번호 </label> <input class="input"type="password"
name="password" id="password" required
pattern="[A-Za-z0-9]{2,20}" placeholder="비민번호를 입력해주세요">
<div class="fontA">
* 2~20자 영문문자, 숫자, 특수문자를 사용하세요<br> <br>
</div>
</p>
<p>
<label for="memberBirth">생년월일 </label> <input class="input" type="date"
name="memberBirth" id="memberBirth"><br>
<br>
</p>
<p>
<label for="gender"> 성별 </label> 여자 <input class="input2" type="radio"
name="gender" id="gender" checked> 남자 <input
type="radio" name="gender" id="gender"><br>
<br>
</p>
<p>
<label for="phoneNum"> 휴대폰 인증 </label> <select name="phoneNum"
id="phoneNum">
<option value="대한민국">한국
<option value="미국">미국
<option value="일본">일본
<option value="중국">중국
<option value="가나">가나
<option value="그리스">그리스
<option value="독일">독일
</select> <input type="text" size="30" name="phoneNum" id="phoneNum"
pattern="[0-9]" placeholder="전화 번호를 입력해주세요(기호제외)"
title="숫자만 작성해주세요"> <input class="button11" type="button"
onclick="alert('인증번호를 발송하였습니다.')" value="인증번호 발송"> <br>
<!-- -->
<input type="text" size="20" name="phoneNum2" id="phoneNum2"
placeholder="인증번호를 입력해주세요"> <input class="button1" type="button"
value="확인"><br> <br>
<!-- style="color: white; background-color: #969696; border: 0; padding: 2px10px;"-->
</p>
<p>
<label for="memberArea"> 사는지역 </label>
<!-- <input type="" size="60" name="memberArea" id="memberArea"><br><br> -->
<select name="memberArea" id="memberArea">
<option value="서울">서울
<option value="경기도">경기도
<option value="강원도">강원도
<option value="전라북도">전라북도
<option value="전라남도">전라남도
<option value="충청북도">충청북도
<option value="충청남도">충천남도
</select><br> <br>
</p>
</div>
</fieldset>
<p>
<!-- <label for="gender"> 전체동의 </label><br> -->
<input type="checkbox" name="Allagree" id="Allagree" checked>전체동의<br>
</p>
<hr color="#ccc">
<p>
<input type="checkbox" name="agree1" id="agree1">[필수] 이용약관
동의 <br>
<input type="checkbox" name="agree2" id="agree2">[필수]
개인정보 수집 및 이용에 동의<br>
<input type="checkbox" name="agree3"
id="agree3">[필수] 만 14세 이상 <br>
<input
type="checkbox" name="agree4" id="agree4">[선택]위치기반 서비스
이용약관에 동의<br>
<input type="checkbox" name="agree5" id="agree5">[선택]
마케팅/홍보 정보제공을 위한 개인정보 수집<br>
</p>
<fieldset>
<div class="jjjj">
<input type="checkbox" name="agree1" id="agree1">이메일 <input
type="checkbox" name="agree2" id="agree2">문자<br> -
광고 정보 수신동의를 하시면 상품 및 이벤트 정보를 받으실 수 있습니다.<br> - 서비스의 중요 안내사항
정보는 위 수신 여부와 상관없이 발송됩니다.
</div>
<br> <br>
</fieldset>
<div>
<p align="center">
<input class="button2" type="submit" value="가입하기">
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
@charset "UTF-8";
html, body, div, header, ul, ol, li, dl, dt, dd, h2, h3, h4, h5, h6,
p, fieldset {
margin: 50;
padding: 500;
}
fieldset {
border: 0;
}
body {
color: #000;
background-color: #ffffff;
font-size: 0.75em;
line-height: 1.2;
font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
}
.fontA {
color: #797979;
font-size: 0.5em;
line-height: 1.2;
font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
}
.font {
color: #797979;
font-size: 1.3em;
line-height: 1.2;
font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
background-color: #f8f8f8;
font-size: 0.70em;
line-height: 1.2;
font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
}
#contentsArea {
width: 800px;
margin: 0auto;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
min-height: 400px;
padding: 3px 03px 3px;
background-color: #ffffff;
}
.member {
background-color: #ffffff
}
#usefulArea {
float: inherit;
width: 300px;
margin-right: 30px;
}
#infoArea {
background-color: #ffffff;
}
.member2 {
}
.member2 h1 {
color: #797979;
font-size: 20px;
font-weight: bold;
padding: 0010px 1px;
}
.member input2 {
width: 200px;
height: 400px;
padding: 0px 0px 0px 0px;
border: 1px solid #ccc;
}
.button1 {
position: absolute;
width: 70px;
height: 20px;
color: #ffffff;
font-size: 12px;
font-weight: bold;
border: 0;
border-radius: 0;
background-color: #797979;
}
.button11 {
position: absolute;
width: 140px;
height: 20px;
color: #ffffff;
font-size: 12px;
font-weight: bold;
border: 0;
border-radius: 0;
background-color: #797979;
}
.button2 {
width: 300px;
height: 50px;
color: #ffffff;
font-size: 15px;
font-weight: bold;
border: 0;
border-radius: 5px;
text-align: center;
background-color: #ff8000;
margin: auto;
}
.member fieldset {
border-bottom: 1px solid #797979;
padding: 0010px 20;
}
.jjjj {
font-size: 11px;
border: 1px solid #ccc;
padding: 7px 30px 7px 30px;
}
댓글남기기