코딩 이야기
과제진행 본문
728x90
로그인폼
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: rgba(0, 0, 0, 0.1);
}
.login_id {
margin-top: 70px;
width: 500px;
}
.login_id input {
width: 500px; /* 길이 */
height: 60px; /* 높이 */
border-radius: 30px; /* 아이디박스 둥글게 */
margin-top: 10px; /* 라벨과 input 칸사이의 거리 */
padding: 0px 20px; /* 아이디박스안에 지워지는 글씨 간격 */
border: 1px solid lightgray;
outline: none; /* 클릭시 테두리 안생기게 함 */
}
.login_pw {
margin-top: 20px;
width: 500px;
}
.login_pw input {
width: 500px;
height: 60px;
border-radius: 30px;
margin-top: 10px;
padding: 0px 20px;
border: 1px solid lightgray;
outline: none; /* 클릭시 테두리 안생기게 함 */
}
.submit {
margin-top: 50px;
width: 500px;
}
.submit input {
width: 500px;
height: 50px;
border: 0;
outline: none; /* 클릭시 테두리 안생기게 함 */
border-radius: 40px; /* 테두리 둥글게 */
background: linear-gradient(to left, rgb(84, 46, 255), rgb(47, 172, 255)); /* 버튼색깔 그라데이션 */
color: white;
font-size: 1.2em;
letter-spacing: 2px; /* 버튼안에 글씨 간격 */
}
</style>
</head>
<body>
<div class="wrap">
<img src="/03/images/책이미지.png" ><h1>코딩정보에 오신것을 환영합니다.</h1>
<p>코딩 정보 공유 사이트</p>
<div class="login_id">
<label>아이디</label><br>
<input type="text" placeholder="아이디"><br>
</div>
<div class="login_pw">
<label>비밀번호</label><br>
<input type="passwoad" placeholder="비밀번호"><br>
</div>
<div class="submit">
<input type="submit" value="login">
</div>
<span>아직 회원이 아니신가요?<a href="#">회원가입</a></span>
</div>
</body>
</html>회원가입
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.1);
}
.form_id {
margin-top: 20px;
width: 500px;
}
.form_id input {
width: 500px;
/* 길이 */
height: 60px;
/* 높이 */
border-radius: 30px;
/* 아이디박스 둥글게 */
margin-top: 10px;
/* 라벨과 input 칸사이의 거리 */
padding: 0px 20px;
/* 아이디박스안에 지워지는 글씨 간격 */
border: 1px solid lightgray;
outline: none;
/* 클릭시 테두리 안생기게 함 */
}
.form_pw {
margin-top: 20px;
width: 500px;
}
.form_pw input {
width: 500px;
/* 길이 */
height: 60px;
/* 높이 */
border-radius: 30px;
/* 아이디박스 둥글게 */
margin-top: 10px;
/* 라벨과 input 칸사이의 거리 */
padding: 0px 20px;
/* 아이디박스안에 지워지는 글씨 간격 */
border: 1px solid lightgray;
outline: none;
/* 클릭시 테두리 안생기게 함 */
}
.form_email {
margin-top: 20px;
width: 500px;
}
.form_email input {
width: 500px;
/* 길이 */
height: 60px;
/* 높이 */
border-radius: 30px;
/* 아이디박스 둥글게 */
margin-top: 10px;
/* 라벨과 input 칸사이의 거리 */
padding: 0px 20px;
/* 아이디박스안에 지워지는 글씨 간격 */
border: 1px solid lightgray;
outline: none;
/* 클릭시 테두리 안생기게 함 */
}
.form_name {
margin-top: 20px;
width: 500px;
}
.form_name input {
width: 500px;
/* 길이 */
height: 60px;
/* 높이 */
border-radius: 30px;
/* 아이디박스 둥글게 */
margin-top: 10px;
/* 라벨과 input 칸사이의 거리 */
padding: 0px 20px;
/* 아이디박스안에 지워지는 글씨 간격 */
border: 1px solid lightgray;
outline: none;
/* 클릭시 테두리 안생기게 함 */
}
.form_submit {
margin-top: 50px;
width: 500px;
}
.form_submit input {
width: 500px;
height: 50px;
border: 0;
outline: none;
/* 클릭시 테두리 안생기게 함 */
border-radius: 40px;
/* 테두리 둥글게 */
background: linear-gradient(to left, rgb(84, 46, 255), rgb(47, 172, 255));
/* 버튼색깔 그라데이션 */
color: white;
font-size: 1.2em;
letter-spacing: 2px;
/* 버튼안에 글씨 간격 */
}
</style>
</head>
<body>
<div class="wrap">
<img src="/03/images/책이미지.png"><h1>코딩정보에 오신것을 환영합니다.</h1>
<p>코딩 정보 공유 사이트</p>
<div class="form_id">
<label>아이디</label><br>
<input type="text" placeholder="아이디"><br>
</div>
<div class="form_pw">
<label>비밀번호</label><br>
<input type="password" placeholder="비밀번호"><br>
</div>
<div class="form_email">
<label>이메일</label><br>
<input type="email" placeholder="이메일"><br>
</div>
<div class="form_name">
<label>닉네임</label><br>
<input type="text" placeholder="닉네임"><br>
</div>
<div class="form_submit">
<input type="submit" value="회원가입"><br>
</div>
<span>이미 회원이신가요<a href="#">로그인</a></span>
</div>
</body>
</html>728x90
Comments