<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.9 user-scalable=no">
<title>로그인 페이지</title>
<style>
*{
user-select: none;
outline: none;
}
body{
width: 800px;
height: 800px;
background-repeat: no-repeat;
background-image:url(https://i.postimg.cc/MGf0fQNT/0.png);
}
.login_box{
width: 80%;
background: #F8F8F8;
padding-bottom: 20px;
margin: 0 auto;
}
.login_title{
padding: 15px 0px 15px 0px;
font-size: 50px;
font-weight: bold;
font-family: Georgia, serif;
color: #444444;
text-align: center;
margin-bottom: 1em;
}
.login_id, .login_pwd{
width: 100%;
text-align: center;
}
.inp{
width: 80%;
font-size: 17px;
background: none;
border: 0px;
border-bottom: 1px solid #777;
outline: none;
margin-top: 1em;
margin: 10px 0px 10px 0px;
padding-top: 10px;
padding-bottom: 10px;
}
.inp:focus{
border-bottom: 1px solid #4a4a4a;
}
.inp::placeholder{
color:#3F3F3F;
}
.login_input{
margin-bottom: 3em;
}
.btn_login{
text-align: center;
}
.btn_login > button{
width: 80%;
padding: 10px 0px 10px 0px;
border: 0px;
background: #343434;
font-size: 17px;
color: #F8F8F8;
font-weight: bold;
}
.others{
text-align: center;
}
.others ul{
padding-left: 0px;
}
.others ul > span{
color: #DEDEDE;
}
.others ul > li{
display: inline-block;
}
.others ul > li a{
color: #4A4A4A;
text-decoration: none;
font-size: 15px;
}
</style>
</head>
<body>
<div class="login_box">
<div class="login_title">
Haven
</div>
<div class="login_input">
<div class="login_id">
<input class="inp" type="text" placeholder="아이디">
</div>
<div class="login_pwd">
<input class="inp" type="password" placeholder="비밀번호">
</div>
</div>
<div class="btn_box">
<div class="btn_login">
<button type="로그인" onclick="alert('로그인이 필요합니다')">로그인</button>
</div>
<div class="others">
<ul>
<li>
<a>회원가입</a>
</li><span> |</span>
<li>
<a>아이디 찾기</a>
</li>
<span>|</span>
<li>
<a>비밀번호 재설정</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>시험삼아 만들어뒀는데... 수정해야 될 부분이 많네요 ㅋㅋ
'컴퓨터 이야기' 카테고리의 다른 글
| Actto PD 60W 충전기 MTA-22 제품 설명서 (1) | 2024.01.27 |
|---|---|
| 공공 정보시스템 한글 처리 가이드라인 (0) | 2023.10.09 |
| 삼성전자, 스마트폰 시장 침체 극복 키워드는 'FE' (1) | 2023.10.04 |
| Adobe Photoshop 2022의 반지의 제왕 아트워크 (0) | 2023.09.29 |
| 이미지 해상도와 동영상 해상도 (0) | 2023.09.27 |
댓글