점점 수월해지나
아직 멀었다
꾸준히 하자
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<title>log-in</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="loginpage.css">
</head>
<body>
<section class="login">
<h2>타쿠네 로그인</h2>
<ul>
<li><input type="text" placeholder="아이디" title="아이디입력"></li>
<li><input type="password" placeholder="비밀번호" title="비밀번호입력"></li>
<li><input type="checkbox" id="chk_id"><label for="chk_id">아이디저장</label></li>
<li><button>로그인</button></li>
</ul>
<div>
<ul>
<li><a href="#">회원가입</a></li>
<li><a href="#">아이디 찾기</a></li>
<li><a href="#">비밀번호 찾기</a></li>
</ul>
</div>
<a href="#">비회원 주문하기</a>
</section>
</body>
</html>
CSS
.login { width: 410px; position:absolute; left:50%; top: 50%;
transform: translate(-50%, -50%); text-align: center;}
.login h2 { padding: 0 0 20px; border-bottom: 2px solid #111;text-align: center;
line-height: 1; font-size: 33px; color: #111; }
.login > ul { padding: 40px 0 33px;}
.login > ul li { padding: 0 0 12px; text-align: left;}
.login > ul li input { width: 100%; height: 46px; box-sizing: border-box; text-indent: 16px;}
.login > ul li input::-webkit-input-placeholder {font-size: 16px; color: #9fa19f;
text-indent: 16px;} /* placeholder 잡는법 / text-indent = 들여쓰기*/
.login > ul li input[type="checkbox"] { position: absolute; left: -3000px;}
.login > ul li input[type="checkbox"]:checked + label{ color:purple; font-weight: bold;}
.login > ul li input[type="checkbox"] + label {height: 36px; line-height: 36px;}
.login > ul li input[type="checkbox"] + label:before {content: ""; display:inline-block;
margin: 0 10px 0 0 ; vertical-align: -5px; width:18px; height:18px; border: 1px solid #333; background: #fff;}
.login li input[type="checkbox"]:checked + label:before { background: url(checkicon.png) no-repeat center #333; border-color:#333;}
.login button {width:100%; height:56px; font-size:18px; color: #fff; background: #ed1c24;}
/*버튼은 세로 가운데 정렬 자동이기 떄문에 line-height:56px; 안줘도 된다. 높이만 주면
텍스트가 알아서 가운데 정렬 들어감*/
.login div { padding: 0 0 45px;}
.login div ul { display:flex; justify-content: center;}
.login div ul li { position:relative; padding: 0 18px;}
.login div ul li ~ li:after {content:""; position:absolute; left:0; top:3px; height: 14px;; width:1px; background: #111; transform: rotate(15deg);} /*물결표시를하게되면 퍼스트차일드를 제외한 나머지
들이 선택됨*/
.login div ul li a { font-size: 14px; color:#111; }
.login > a { padding: 0 0 2px; font-size: 14px; color: #666; border-bottom: 1px solid #666;}
/* 언더라인 긋는 3가지 방법 :
.login > a { font-size: 14px; color: #666; text-decoration: underline;}
.login > a { position: relative; font-size: 14px; color: #666;}
.login > a:after { content:""; position:absolute; left:0; bottom:0; width: 100%;
height: 1px; background: #666; \}
.login > a { padding: 0 0 2px; font-size: 14px; color: #666; border-bottom: 1px solid #666;}
주변에 다른 컨텐츠가 있으면 padding을 쓰면 안된다. 주변에 영향을 미치기 때문! 주의하자~!*/
도움 : 유튜브 리베하얀님
https://www.youtube.com/watch?v=BQ8Qq1gx7wE&list=PL_6yF2upGJYtE8CWiTRu7qvRSSzFy4Hzd&index=5
728x90
반응형
'프로젝트 및 실습 > 웹 따라 만들기' 카테고리의 다른 글
| 실무실습) 탭 메뉴 만들기 (0) | 2020.05.17 |
|---|---|
| 실무실습) 간단한 카테고리 만들기 (0) | 2020.05.15 |
| 실무실습) 조직도 만들기 (0) | 2020.05.13 |
| 실무실습) 이벤트 게시판 (0) | 2020.05.09 |
| 실무실습) 연혁표 만들기 (2) | 2020.05.07 |