쿠팡 로그인 페이지 css
index.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>쿠팡로그인</title>
<!-- 외부 css랑 js파일 connect -->
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="reset.css" />
<script src="script/script.js"></script>
</head>
<body>
<h1><a href="#"><img src="./image/logo.png" alt="cupang logo"></a></h1>
<main>
<form action="#" method="post" id="loginFrm">
<fieldset>
<legend class="skip">로그인양식</legend>
<ul>
<li>
<span class="id_bg"><!-- 배경이미지(메일) --></span>
<span><input type="text" name="user_id" placeholder="아이디(이메일)"></span>
</li>
<li class="error id_error">아이디(이메일)을 입력해주세요</li>
<li>
<span class="pw_bg"><!-- 배경이미지(비밀번호) --></span>
<span><input type="password" name="user_pw" placeholder="비밀번호"></span>
<span class="pw_show_hide" title="문자보이기"></span>
</li>
<li class="error pw_error">비밀번호를 입력해주세요</li>
</ul>
<div class="btm">
<p>
<label>
<input type="checkbox" name="login_y" id="login_y">
<span>자동로그인</span>
</label>
</p>
<a href="#" class="idpw_search">아이디(이메일)/비밀번호 찾기</a>
</div>
<button type="submit" id="login_btn">로그인</button>
</fieldset>
</form>
<a href="#" class="join_link">회원가입</a>
</main>
<footer>
© ©Coupang Corp. All rights reserved.
</footer>
</body>
</body>
</html>
html 태그를 여러개 만들 경우
<li>
<span class="id_bg"><!-- 배경이미지(메일) --></span>
<span><input type="text" name="user_id" placeholder="아이디(이메일)"></span>
</li>위에 코드처럼 만들때 li>span*2 이런식으로 입력하여 만들면 여러개의 태그를 간단하게 만들 수 있다.
style.css
/* #0074e9 (파랑) | #e7223d (빨강) */
h1 {text-align: center; margin: 50px auto 30px;}
h1 a {}
h1 a img {width: 200px;}
main {width: 500px; margin: 0 auto;}
main #loginFrm {border-bottom: 1px solid #ccc;
margin-bottom: 20px; padding-bottom: 20px;
}
main #loginFrm fieldset {}
main #loginFrm fieldset ul {}
main #loginFrm fieldset ul li {
border:1px solid #ccc; background: #fff;
display: flex; flex-flow: 10px;
margin-bottom: 10px;
position: relative;
}
main #loginFrm fieldset ul .error {
color: #e7223d; padding:10px; display: none;
}
main #loginFrm fieldset ul .id_error {border:0;}
main #loginFrm fieldset ul .pw_error {border:0;}
main #loginFrm fieldset ul li span {}
main #loginFrm fieldset ul li .id_bg {
border-right: 1px solid #ccc;
padding: 20px; width: 10px;
background-color: #f5f5f5;
position: relative;
}
main #loginFrm fieldset ul li .id_bg::after {
content: ''; display: block;
background-image: url(../images/icon.svg);
background-position: 0 0;
width: 21px; height: 21px;
position: absolute; left: 14px; top: 11px;
}
main #loginFrm fieldset ul li .pw_bg {
border-right: 1px solid #ccc;
padding: 20px; width: 10px;
background-color: #f5f5f5;
position: relative;
}
main #loginFrm fieldset ul li .pw_bg::after {
content: ''; display: block;
background-image: url(../images/icon.svg);
background-position: -21px 0;
width: 21px; height: 21px;
position: absolute; left: 14px; top: 11px;
}
main #loginFrm fieldset ul li span input { width: 400px; height: 40px; border: 0; padding-left: 10px;}
main #loginFrm fieldset ul li span input::placeholder {font-size: 0.95rem; color: #aaa;}
main #loginFrm fieldset ul li span input[type=text] {}
main #loginFrm fieldset ul li span input[type=password] {}
main #loginFrm fieldset ul li .pw_show_hide {
background-image: url(../images/icon.svg);
background-position: -105px 0;
width: 21px; height: 21px;
position: absolute;
right: 11px; top: 8px;
}
main #loginFrm fieldset .btm {
display: flex; flex-flow: row nowrap;
padding: 15px 0; justify-content: space-between;
}
main #loginFrm fieldset .btm p {}
main #loginFrm fieldset .btm p label {}
main #loginFrm fieldset .btm p label input[name=login_y] {appearance: none;}
main #loginFrm fieldset .btm p label input[name=login_y] + span::before {
background: #fff;
border: 1px solid #ccc;
content: ''; display: inline-block;
width:17px; height: 17px;
background-image: url(../images/icon.svg);
background-position: -65px -22px;
margin-right: 5px;
}
main #loginFrm fieldset .btm p label input[name=login_y]:checked + span::before {
background-position: -84px -21px;
}
main #loginFrm fieldset .btm p label span {}
main #loginFrm fieldset .btm .idpw_serch {color: #004b96;}
main #loginFrm fieldset .btm .idpw_serch::after{
content: '';
display: inline-block;
width: 8px;
height: 15px;
background-image: url(../images/icon.svg);
background-position: -104px -21px;
margin-left: 5px;
}
main #loginFrm fieldset #login_btn {
background: #0074e9;
width: 100%; color: #fff; padding: 20px 0;
box-shadow:0 2px 0 #004b96;
}
main .join_link {
border: 1px solid #aaa; color: #0074e9; padding: 20px 0; width: 100%;
display: block; text-align: center;
background: #fff;
box-shadow: 0 2px 0 #eee;
}
footer {color: #333; text-align: center; font-size: 0.85rem; margin-top: 20px;}css를 입력할때 id명은 #, class명은 .으로 작성하여야 한다.
queryselector()
name, id, class등 css 선택자를 입력하여 선택자와 일치하는 문서 내 요소를 반환
같은 id, class일 경우 최상단 요소만 로직에 포함.
일치하는 요소가 없는 경우 null 반환
addeventListener()
이벤트를 등록하는 가장 권장되는 방식으로 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다.
