<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<link href="3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>로그인</h1>
<p class = "a">아이디와 비밀번호를 입력하고 로그인 하세요</p>
<form id="signupForm" method="post" action="/signup">
<div class ="c">
<label for="username"><strong>아이디</strong></label>
<input type="text" id="username" name="username" class="b">
<div>
<label for="password"><strong>비밀번호</strong></label>
<input type="password" id="password" name="password" class="b">
</div>
<div class="d">
<input type="checkbox" >
<label for="id">아이디 저장</label>
</div>
<p class="e">로그인</p>
</body>
</html>
h1 {
color: black; /* 텍스트 색상 */
font-size: 36px; /* 폰트 크기 */
text-align: center; /* 텍스트 정렬 */
}
.a {
text-align: center;
font-size: 15px;
color: #8d8c8c;
}
.b {
margin: 5px 5px 5px 20px; /* 외부 여백 (상, 우, 하, 좌) */
border-radius: 5px; /* 테두리 둥글기 */
border: 2px solid #bdb6b6d0; /* 테두리 */
}
.c {
margin: 0px; /* 외부 여백 */
text-align: left;
width: 100%; /* 너비 설정 */
}
.d {
margin: 30px 20px 20px 0; /* 외부 여백 (상, 우, 하, 좌) */
}
.e {
color: white; /* 텍스트 색상 */
font-size: 15px; /* 폰트 크기 */
text-align: center; /* 텍스트 정렬 */
border: 2px solid #4CAF50; /* 테두리 */
border-color: blue;
padding: 10px; /* 내부 여백 */
background-color: blue; /* 배경 색상 */
border-radius: 5px; /* 테두리 둥글기 */
}
#username{
width: 60%; /* 너비를 80%로 설정 */
height: 20px; /* 높이를 40px로 설정 */
font-size: 16px; /* 폰트 크기 */
padding: 5px; /* 내부 여백 */
margin: 10px,0,10px,36px; /* 외부 여백 */
}
#password {
width: 60%; /* 너비를 80%로 설정 */
height: 20px; /* 높이를 40px로 설정 */
font-size: 16px; /* 폰트 크기 */
padding: 5px; /* 내부 여백 */
margin: 10px,0,10px,10px; /* 외부 여백 */
}
<!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="3.css">
</head>
<body>
<h2>회원가입</h2>
<p>원활한 서비스를 이용을 위해 회원가입을 해주세요</p>
<div class="group">
<label for="username"class="a">아이디</label>
<input type="text" id="username" name="username" class="s">
</div>
<div class="group">
<label for="email"class="a">이메일</label>
<input type="email" id="email" name="email"class="s">
</div>
<div class="group">
<label for="password">비밀번호</label>
<input type="password" id="password" name="password">
</div>
<div class="group">
<label for="nickname"class="a">닉네임</label>
<input type="text" id="nickname" name="nickname"class="s">
</div>
<div class="g">
<label>성별</label>
<div class = "g1">
<input type="radio" id="male" name="gender" value="남성">
<label for="male">남성</label>
<input type="radio" id="female" name="gender" value="여성">
<label for="female">여성</label>
<input type="radio" id="none" name="gender" value="선택 안함">
<label for="none">선택 안함</label>
</div>
</div>
<div class="sk">
<div class="sk2">
<label>사용 기술</label><br>
</div>
<div class="sk1">
<input type="checkbox" id="html" name="skills" value="HTML">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="skills" value="CSS">
<label for="css">CSS</label>
<input type="checkbox" id="javascript" name="skills" value="JavaScript">
<label for="javascript">JavaScript</label>
<input type="checkbox" id="python" name="skills" value="Python">
<label for="python">Python</label>
<input type="checkbox" id="django" name="skills" value="Django">
<label for="django">Django</label>
<input type="checkbox" id="github" name="skills" value="GitHub">
<label for="github">GitHub</label>
<input type="checkbox" id="postgresql" name="skills" value="PostgreSQL">
<label for="postgresql">PostgreSQL</label>
</div>
</div>
<div class="z">
<button type="submit" >회원가입</button>
</div>
</body>
</html>
body {
font-family: Arial, sans-serif;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
p {
font-size: 15px;
text-align: center;
margin-bottom: 40px;
color :grey
}
.a{
margin-bottom:10px;
}
#password{
margin-left: 5px;
width: 70%;
margin-bottom: 10px;
width: 80%;
height: 30px;
border-color: grey;
border-radius: ;
border-radius: 5px ;
}
.s{
margin-left: 20px;
margin-bottom: 10px;
width: 80%;
height: 30px;
border-color: grey;
border-radius: 5px ;
}
.g{
display: flex;
margin-bottom : 10px;
margin-top : 10px;
}
.g1{
margin-top : 20px;
margin-left : 40px;
margin-bottom : 20px;
}
.sk{
display: flex;
}
.sk1{
margin-left : 0px;
font-size: 19px;
}
.sk2{
width: 30%;
}
.z button{
background-color: green; /* 초록색 배경 */
text-align: center;
margin-top: 30px;
font-size: 50px;
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.01>6일차.js)함수연습 (0) | 2024.07.01 |
|---|---|
| 24.06.27> css4일차. display,postition (0) | 2024.06.27 |
| 24.06.25 > html 2일차. 회원가입,로그인창(input,fieldset,css) (0) | 2024.06.25 |
| 빅데이터 보고서 양식 (0) | 2024.06.24 |
| 24.06.24 html 1일차>시멘틱 태그 와 구성요소 (0) | 2024.06.24 |