나만의 웹 사이트 꾸미기 세 번째!!
이번에 꾸며볼 페이지는 로그인, 회원가입 페이지이다.
예전 로그인 페이지
이번에 꾸민 로그인 페이지
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 페이지</title>
<style>
h2 {
text-align: center;
color: white;
}
body {
background-image: url(./login배경.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
/* background: url(./login배경.jpg) fixed no-repeat center/cover; */
}
#login {
margin: 100px auto;
}
input[type='text'] {
border-radius: 10px;
box-sizing: border-box;
width: 100%;
padding: 10px 20px;
margin: 5px 0;
}
input[type='text']:focus {
background-color: aqua;
border: 3px dotted black;
}
input[type='password']:focus {
background-color: aqua;
border: 3px dotted black;
}
input[type='password'] {
border-radius: 10px;
box-sizing: border-box;
width: 100%;
padding: 10px 20px;
margin: 5px 0;
}
.submit {
text-align: center;
}
button {
background-color: rgb(0, 0, 0);
color: white;
padding: 10px 10px;
cursor: pointer;
}
p.input {
color: white;
text-align: center;
}
</style>
</head>
<body>
<h2>로그인</h2>
<form action="./index.html" method="">
<div id="login">
<p class="input">아이디 <input type="text" maxlength="20" placeholder="아이디를 입력하세요." name="userid" id="userid"></p>
<p class="input">비밀번호 <input type="password" maxlength="20" placeholder="비밀번호를 입력하세요" name="userpw" id="userpw"></p>
<p class="submit"><button>로그인</button> <button>아이디, 비밀번호 찾기</button></p>
</div>
</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>
<style>
@font-face {
font-family: 'TTLaundryGothicB';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403-2@1.0/TTLaundryGothicB.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
body {
background-image: url(./regist배경.png);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
font-family: 'TTLaundryGothicB';
}
input[type="text"] { border-radius: 10px; }
input[type="password"] { border-radius: 10px; }
input[type="name"] { border-radius: 5px; }
input[type="date"] { border-radius: 5px; }
input[type="tel"] { border-radius: 5px; }
input[type="email"] { border-radius: 5px; }
input[type="reset"] {
background-color: black;
color: white;
}
button {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>회원가입</h2>
<p><strong>아래의 정보를 입력하세요.</strong></p>
<form action="./index.html" method="">
<p>· 아이디 : <input type="text" maxlength="20" placeholder="아이디를 입력하세요." name="userid" id="userid"></p>
<p>· 비밀번호 : <input type="password" maxlength="20" placeholder="비밀번호를 입력하세요." name="userpw" id="userpw"></p>
<p>· 이름 : <input type="name" maxlength="10" placeholder="이름을 입력하세요." name="name" id="name"></p>
<p>· 생년월일 : <input type="date"></p>
<p>· 성별을 선택하세요.</p>
<p><label for="male"> 남자</kabel><input type="radio" name="gender" value="남자" id="male" checked> <label for="female">여자</label><input type="radio" name="gender" value="여자" id="female"></p>
<p>전화번호 : <input type="tel" placeholder="000-0000-0000"></p>
<p>이메일 : <input type="email" placeholder="이메일을 입력하세요."></p>
<p><input type="reset" value="모두 지우기"> <button>회원가입</button></p>
</form>
</body>
</html>
나름 열심히 꾸며봤지만... 디자인 감각은 없는 것으로...
회원가입 페이지는 후에 추가할 계획..
'Web' 카테고리의 다른 글
| 나만의 웹 사이트 꾸미기..? 5 (0) | 2024.04.14 |
|---|---|
| 나만의 웹 사이트 꾸미기..? 4 (0) | 2024.04.14 |
| 나만의 웹 사이트 꾸미기..? 2 (2) | 2024.04.10 |
| 나만의 웹 사이트 꾸미기..? 1 (0) | 2024.04.05 |