Display 속성 50202340baa7420389b8413f505772dd.pdf
0.18MB
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<link rel="stylesheet" href="회원가입.css">
</head>
<body>
<div class="container">
<h2>회원가입</h2>
<p>원활한 서비스를 이용을 위해 회원가입을 해주세요</p>
<div class="group">
<label for="username" class="label">아이디</label>
<input type="text" id="username" name="username" class="input">
</div>
<div class="group">
<label for="email" class="label">이메일</label>
<input type="email" id="email" name="email" class="input">
</div>
<div class="group">
<label for="password" class="label">비밀번호</label>
<input type="password" id="password" name="password" class="input">
</div>
<div class="group">
<label for="nickname" class="label">닉네임</label>
<input type="text" id="nickname" name="nickname" class="input">
</div>
<div class="group">
<label class="label">성별</label>
<div class="g2">
<input type="radio" id="male" name="gender" value="남성">
<label for="male" class="label">남성</label>
<input type="radio" id="female" name="gender" value="여성">
<label for="female" class="label">여성</label>
<input type="radio" id="none" name="gender" value="선택 안함">
<label for="none" class="label">선택 안함</label>
</div>
</div>
<div class="group">
<label class="label">사용 기술</label>
<div class="g1">
<input type="checkbox" id="html" name="skills" value="HTML">
<label for="html" class="label">HTML</label>
<input type="checkbox" id="css" name="skills" value="CSS">
<label for="css" class="label">CSS</label>
<input type="checkbox" id="javascript" name="skills" value="JavaScript">
<label for="javascript" class="label">JavaScript</label>
<input type="checkbox" id="python" name="skills" value="Python">
<label for="python" class="label">Python</label>
<input type="checkbox" id="django" name="skills" value="Django">
<label for="django" class="label">Django</label>
<input type="checkbox" id="github" name="skills" value="GitHub">
<label for="github" class="label">GitHub</label>
<input type="checkbox" id="postgresql" name="skills" value="PostgreSQL">
<label for="postgresql" class="label">PostgreSQL</label>
</div>
</div>
<div class="z">
<button type="submit">회원가입</button>
</div>
</div>
</body>
</html>
.container {
width: 450px;
height: auto;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
p {
font-size: 15px;
text-align: center;
margin-bottom: 40px;
color: grey;
}
.group {
width: 100%;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.label {
font-size: 14px;
width: 25%;
}
.input {
display: flex;
border: 1px solid antiquewhite;
border-radius: 5px;
width: 90%;
padding: 5px;
margin-left:5px ;
}
.g1 {
display:grid;
grid-template-columns: repeat(8, 1fr);
width: 100%;
position: relative;
flex-wrap: wrap;
left : 5px;
align-items: center;
gap: 2px;
}
.g2{
display:flex;
width: 100%;
position: relative;
flex-wrap: wrap;
left : 5px;
align-items: center;
gap: 2px;
}
.z button {
text-align: center;
margin-top: 30px;
background-color: green;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
width: 100%;
}
.z {
text-align: center;
}
'html' 카테고리의 다른 글
| 24. 07.02 7일차. git기초 , js자바배열 (0) | 2024.07.02 |
|---|---|
| 24.07.01>6일차.js)함수연습 (0) | 2024.07.01 |
| 24.06.26 CSS 3일차)회원가입,로그인창 margin,border (0) | 2024.06.26 |
| 24.06.25 > html 2일차. 회원가입,로그인창(input,fieldset,css) (0) | 2024.06.25 |
| 빅데이터 보고서 양식 (0) | 2024.06.24 |