<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<style>
@font-face {
font-family: 'BagelFatOne-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_JAMO@1.0/BagelFatOne-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Ownglyph_Dailyokja-Rg';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403@1.0/Ownglyph_Dailyokja-Rg.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'BagelFatOne-Regular';
font-size: 50px;
color: brown;
}
body {
background-color: hwb(0 71% 5%);
text-align: center;
}
input[type='text']{
box-sizing: border-box;
width: 100%;
padding: 10px 30px;
border: none;
border-radius: 15px;
}
input[type='password']{
box-sizing: border-box;
width: 100%;
padding: 10px 30px;
border: none;
border-radius: 15px;
}
input[type='submit'] {
border: none;
background-color: #b6344a;
padding: 10px 50px;
color: white;
}
.login {
font-family: 'Ownglyph_Dailyokja-Rg';
color: brown;
}
@media screen and (min-width: 768px) {
body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
</style>
</head>
<body>
<form action="./index.html" name="index" method="post">
<h1>로그인</h1>
<p><input type="text" maxlength="15" placeholder="아이디를 입력하세요" name="id" id="id" ></p>
<p><input type="password" maxlength="15" placeholder="비밀번호를 입력하세요" name="pw" id="pw" ></p>
<p class="login"><input type="checkbox" name="login" value="로그인 상태 유지" id="login">로그인 상태 유지</p>
<p><input type="submit" value="로그인"></p>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<script>
function goClick(){
alert('회원가입 완료!!');
location.href = './index.html'
}
</script>
<style>
@font-face {
font-family: 'BagelFatOne-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_JAMO@1.0/BagelFatOne-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Ownglyph_Dailyokja-Rg';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403@1.0/Ownglyph_Dailyokja-Rg.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
body {
background-color: hwb(0 71% 5%);
font-family: 'Ownglyph_Dailyokja-Rg';
color: brown;
padding: 20px;
}
h1 {
font-family: 'BagelFatOne-Regular';
font-size: 50px;
color: brown;
}
input[type='reset'], [type='button'], [type='submit'] {
border: none;
background-color: #b6344a;
padding: 10px 50px;
color: white;
}
input[type='text'],[type='password'], [type='email'] {
box-sizing: border-box;
width: 40%;
padding: 10px 30px;
border: none;
border-radius: 15px;
}
input[type='tel']{
box-sizing: border-box;
width: 20%;
padding: 10px 30px;
border: none;
border-radius: 15px;
}
select {
box-sizing: border-box;
width: 18%;
padding: 10px 30px;
border: none;
border-radius: 15px;
}
@media screen and (min-width: 768px) {
body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
</style>
</head>
<body>
<form action="./login.html" id="member" name="member" method="post">
<div class="member">
<h1>회원가입</h1>
<p>아이디: <input type="text" maxlength="12" placeholder="아이디를 입력하세요" name="userid" id="userid">
*4~12글자까지만 입력하세요</p>
<p>비밀번호: <input type="password" maxlength="15" placeholder="비밀번호를 입력하세요" name="userpw" id="userpw"> *4~12글자까지만 입력하세요</p>
<p>비밀번호 확인: <input type="password" maxlength="15" placeholder="비밀번호를 입력하세요" name="userpwcheck" id="userpwcheck"> *4~12글자까지만 입력하세요</p>
<p>이름: <input type="text" maxlength="15" placeholder="이름을 입력하세요" name="username" id="username"></p>
<p>생년월일: <input type="date" name="userdate" id="birthdate"></p>
<p>이메일: <input type="email" placeholder="이메일을 입력하세요" name="email" id="email"></p>
<p>주소: <input type="text" placeholder="우편번호"> <button type="button">주소검색</button></p>
<p><input type="text" placeholder="기본주소"> <input type="text" placeholder="상세주소"></p>
<p>전화번호: <select>
<option value="02"> 02 </option>
<option value="031"> 031 </option>
<option value="032"> 032 </option>
<option value="033"> 033 </option>
<option value="041"> 041 </option>
<option value="042"> 042 </option>
<option value="043"> 043 </option>
<option value="044"> 044 </option>
<option value="051"> 051 </option>
<option value="052"> 052 </option>
<option value="053"> 053 </option>
<option value="054"> 054 </option>
<option value="055"> 055 </option>
<option value="061"> 061 </option>
<option value="062"> 062 </option>
<option value="063"> 063 </option>
<option value="064"> 064 </option>
</select>-<input type="tel" name="hp1" id="hp1" maxlength="4">-<input type="tel" name="hp2" id="hp2" maxlength="4"></p>
<p><input type="checkbox" name="agree" value="약관 동의" id="agree">약관 동의</p>
<p><input type="reset" value="취소"> <input type="button" onclick="location.href='./index.html'" value="이전으로"> <input type="submit" value="회원가입" id="join" onclick="goClick()"></p>
</div>
</form>
</body>
</html>
과제.
'닷홈' 페이지의 회원가입, 로그인 페이지를 CSS 폼을 적용하여 완성
http://zmwaexp.dothome.co.kr/
