반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<style>
body {
background: gray;
}
.container {
width: 960px;
margin : 0 auto;
}
#signup {
box-shadow: 2px 2px 2px #222;
background:#fff;
border:1px solid #222;
border-radius: 5px;
padding: 20px;
width: 400px;
margin:30px auto;
}
#signup fieldset {
border: 1px solid #ccc;
margin-bottom: 30px;
}
#signup legend {
font-size: 16px;
font-weight: bold;
padding-left:5px;
padding-bottom: 10px;
}
#signup div li {
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
#signup fieldset:first-of-type label {
float: left;
font-size: 13px;
font-weight: bold;
width: 100px;
}
#signup fieldset:last-of-type label {
float: left;
font-size: 13px;
font-weight: bold;
width: 100px;
}
#signup input {
border: 1px solid red;;
border-radius: 3px;
padding: 5px;
width: 200px;
}
#signup input:hover {
border-color: black;
}
#signup input:checked + label { /* input 요소에 checked 속성이 추가되었을 때 label 요소의 스타일 */
color:red; /* 글자색 */
font-weight:bold; /* 글자 굵게 */
}
#signup button {
border: 1px solid #222;
border-radius: 20px;
display: block;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
}
</style>
</head>
<body>
<div class="container">
<form id="signup">
<fieldset>
<legend>로그인 정보</legend>
<div>
<li>
<label for="user_id">아이디</label>
<input id="user_id" name="user_id" type="text" required>
</li>
<li>
<label for="password">비밀번호</label>
<input id="password" name="password" type="password" required>
</li>
<li>
<label for="password2">비밀번호 확인</label>
<input id="password2" name="password2" type="password" required>
</li>
<li>
<label>회원등급</label>
<label>준회원</label>
</li>
</div>
</fieldset>
<fieldset>
<legend>개인 정보</legend>
<div>
<li>
<label for="fullname">이름</label>
<input id="fullname" name="fullname" type="text" placeholder="5자미만 공백없이" required>
</li>
<li>
<label for="email">메일 주소</label>
<input id="email" name="email" type="text" placeholder="abcd1234@gmail.com">
</li>
<li>
<label for="tel">연락처</label>
<input id="tel" name="tel" type="tel">
</li>
</div>
</fieldset>
<button type="submit"> 제출 </button>
</form>
</div>
</body>
</html>반응형
'HTML&CSS' 카테고리의 다른 글
| [HTML&CSS] 포스터 만들기 (0) | 2023.04.06 |
|---|---|
| [HTML] INPUT 태그 연습 (0) | 2023.04.05 |
| [HTML] INPUT (0) | 2023.04.05 |
| HTML 테이블 생성 (0) | 2023.04.04 |
| HTML 태그 종류 (1) | 2023.04.04 |