카카오 로그인창 보고 비슷하게 만들어보기
html 페이지 연습을 위해 코드를 보지 않고 내가 눈에 보이는 것들을 따라 만들어 보았습니다
body 부분 코드
<body>
<div class="center">
<div class="head">
<h1><span class="ir_wa">KaKao</span></h1>
</div>
<fieldset id="fieldset">
<div class="main">
<div class="login1">
<form>
<div class="id">
<input type="text" id="id"placeholder="아이디" autocomplete="off" value>
</div>
</form>
</div>
<div class="login2">
<form>
<div class="password">
<input type="password" id="password" placeholder="비밀번호" autocomplete="off" class="tf_g" value ">
</div>
</form>
</div>
<div class="login3" id="login3">
<form class="login3_check" id="login3_check">
<div class="ckid">
<span><input type="checkbox" id="id_2" value></span>
<span>간편로그인</span>
</div>
<div id="newid"><p></p></div>
</form>
</div>
<div class="loginbutton">
<form>
<div>
<button onclick="buttonclick()" id="button1" class="main_button button1 button">로그인</button></div>
<span><hr class="hr_1"></span><span class="middle">또는</span><span><hr class="hr_2"></span>
<div class="button3">
<button id="button2" class="main_button button2 button">QR코드 로그인</button></div>
</form>
</div>
<div class="end1">
<ul class="find">
<li>
<a href="text5.html"
class="account">
회원가입</a>
</li>
<li class="find_id">
<a href="#"
>계정찾기</a>
</li>
<li class="fine_pw">
<a href="#"
>비밀번호 찾기</a>
</li>
</ul>
</div>
</div>
</fieldset>
</div>
</body>
css코드
.center{
width: 300px;
height: 280px;
margin-left: auto;
margin-right: auto;
}
a {
text-decoration: none;
color: black;
}
body {
background-color: rgb(255, 255, 255);
}
fieldset {
width: 300px;
height: 280px;
}
.head {
margin-left: 20px;
text-align: center
}
.id {
margin-top: 15px;
}
.account {
font-size: 12px;
}
.accountm {
margin-top: 10px;
}
#id,#password {
width:280px;
height:20px;
margin: 7px;
}
ul {font-size: 12px;
list-style: none;
margin-left: 0px;
margin-top: 0px;
padding: 0px;
}
li {float: left;
margin: 5px;
font-size: 12px;
}
.find_id {
margin-left: 100px;
}
.ckid {
margin: 7px 0;
}
.button3 {
margin: 0px;
}
.login3{
margin-left: 5px;
}
.loginbutton{
margin-top: 5px;
margin-left: 5px;
}
.middle{
font-size: 12px;
margin-left: 10px;
color: rgb(180,180,180);
}
input[type='checkbox']{
margin: 1px;
width: 13px;
height: 13px;
border-radius: 45%;
border: 1px solid black;
appearance: none;
cursor: pointer;
}
input[type="checkbox"]:checked {
background: rgb(254, 229, 0);
border: none;
}
input[type="text"]{
border-width: 0 0 1px;
}
input[type="password"]{
border-width: 0 0 1px;
}
.button{
width: 295px;
height: 35px;
border: none;
border-radius: 5px;
font-size: 1rem;
}
.button1{
background-color: rgb(250, 217, 4);
}
.button2{
background-color: rgb(240,240,240);
}
.hr_1{
float: left;
width: 125px;
margin-left: 0;
border-top: 1px solid rgb(240,240,240);
}
.hr_2{
float: right;
width: 125px;
margin-left: 0;
border-top: 1px solid rgb(240,240,240);
}
js코드
$(document).ready( function (){
$('#button1').hover(function (){
$(this).css({
background : 'rgb(245, 205, 8)'
});
}, function() {
$(this).css({
background : 'rgb(250, 217, 4)'
});
});
$('#button2').hover(function (){
$(this).css({
background : 'rgb(230,230,230)'
});
}, function() {
$(this).css({
background : 'rgb(240,240,240)'
});
});
});
function buttonclick() {
let value2 = document.getElementById('id').value;
let value3 = document.getElementById('password').value;
if (value2.trim() == "") {
let name= document.getElementById('newid');
name.innerHTML='<p id="pnew">아아디를 입력해주세요</p>';
let pnew=document.getElementById('pnew');
name.style.height ='40px';
pnew.style.color = 'red';
pnew.style.paddingTop = '10px'
pnew.style.margin = '4px';
name.style.backgroundColor = 'rgb(250, 250, 250)';
name.style.fontSize = '0.8rem';
event.preventDefault();
let fieldset = document.getElementById('fieldset');
fieldset.style.width='300px';
fieldset.style.height='330px';
}
else if (value3.trim() == "" && value2.trim()!="") {
let name= document.getElementById('newid');
name.innerHTML='<p id="pnew">비밀번호를 입력해주세요</p>';
let pnew=document.getElementById('pnew');
name.style.height ='40px';
pnew.style.color = 'red';
pnew.style.paddingTop = '10px'
pnew.style.margin = '4px';
name.style.backgroundColor = 'rgb(250, 250, 250)';
name.style.fontSize = '0.8rem';
event.preventDefault();
let fieldset = document.getElementById('fieldset');
fieldset.style.width='300px';
fieldset.style.height='330px';
}
else {
let name= document.getElementById('newid');
name.innerHTML='<p></p>';
name.style.height ='0px';
let fieldset = document.getElementById('fieldset');
fieldset.style.width='300px';
fieldset.style.height='280px';
event.preventDefault();
}
};
아이디 미입력시
비밀번호 미입력시
로그인 버트에 마우스 가져다 두면 조금더 어두워
qr코드 로그인 버트 가져다 두었을때에도 조금더 어두워진다
반응형
'html,css,js 공부' 카테고리의 다른 글
| (2024 03 07) js 15일차 (0) | 2024.03.07 |
|---|---|
| (2024 03 05) js 14일차 (0) | 2024.03.05 |
| (2024 02 29)html,css,js 10일차 (0) | 2024.03.01 |
| (2024 02 28) html,css,js 9일차 (0) | 2024.02.28 |
| (2024 02 27) html,css,js 8일차 (0) | 2024.02.28 |