[HTML/CSS/JS] 로그인(login)화면 만들기
2024. 1. 8. 17:06ㆍHTML + CSS+JS/Practice
반응형
<!DOCTYPE html>
<html>
<head>
<title>로그인</title>
<link rel="stylesheet" href="./login.css">
</head>
<body>
<h2 id="login_title">로그인</h2>
<div id="login_box">
<div class="member-login-container">
<span class="member-title">
MEMBER
<span>LOGIN</span>
</span>
<span class="member-description">로그인을 하시면 회원을 위한 다양한 서비스와 혜택을 누리실 수 있습니다.</span>
</div>
<ul id="login">
<li id="left">
<img src="./images/lock_key.PNG">
</li><!-- left -->
<li id="right">
<ul id="input_button">
<li id="id_pass">
<ul>
<li>
<span>아 이 디</span>
<input class="id-input" type="text" size="12">
</li> <!-- id -->
<li id="pass">
<span>비밀번호</span>
<input type="password" size="12">
</li> <!-- pass -->
</ul>
</li> <!-- id_pass -->
<li id="login_btn">
<button type="button" onclick="alert('클릭')">로그인</button>
</li>
</ul> <!-- input_button -->
<div id="auto_login">
<input id="auto_login_check" type="checkbox">
<label for="auto_login_check">자동 로그인</label>
</div>
<ul id="join_find">
<li>아직 회원이 아니세요?</li>
<li>아이디 또는 비밀번호를 잊으셨나요?</li>
</ul>
</li> <!-- right -->
</ul> <!-- login -->
</div> <!-- login_box -->
</body>
</html>
body {
margin: 0;
padding: 0;
color: #444444;
font-size: 12px;
font-family: '돋움', 'Dotum';
}
li {
list-style-type: none;
}
#login_title {
width: 585px;
margin: 50px;
padding: 10px;
border: 5px solid #e6e2d7;
/*font-size: 50px;*/
}
#login_box {
width: 610px;
height: 283px;
margin-top: 20px;
margin-left: 50px;
border: 2px solid #cccccc;
border-radius: 20px;
}
.member-login-container {
margin-top: 20px;
margin-left: 50px;
display: flex;
flex-direction: column;
}
.member-title {
font-size: 28px;
}
.member-title > span {
font-weight: bold;
}
.member-description {
color: darkgray;
font-weight: bold;
letter-spacing: -2px;
}
#login {
display: flex;
}
#input_button {
margin-top: 36px;
margin-left: 40px;
padding-left: 0;
display: flex;
}
.id-input {
margin-left: 4px;
}
#pass {
margin-top: 4px;
}
#login_btn {
margin-left: 4px;
}
#login_btn > button {
width: 100px;
padding: 13px;
border: none;
border-radius: 4px;
background-color: #5f6366;
color: white;
font-size: 16px;
cursor: pointer;
}
#auto_login {
margin-top: 20px;
margin-left: 100px;
display: flex;
align-items: center;
}
#auto_login > label {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
#join_find {
margin-top: 28px;
margin-left: 64px;
}
#join_find > li {
list-style-type: disc;
}반응형
'HTML + CSS+JS > Practice' 카테고리의 다른 글
| [HTML/CSS/JS] 회원가입화면 만들기 (0) | 2024.01.08 |
|---|---|
| [HTML/CSS/JS] 달력 (calendar) 만들기 (0) | 2024.01.08 |
| [HTML/CSS/JS] table 생성 (0) | 2024.01.08 |
| [HTML/CSS/JS] text 출력 실습 (0) | 2024.01.08 |