diff --git a/11-login/css/login.css b/11-login/css/login.css new file mode 100644 index 0000000..0bc596f --- /dev/null +++ b/11-login/css/login.css @@ -0,0 +1,278 @@ +@font-face { + font-family: "SpoqaHanSansNeo-Regular"; + src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff") + format("woff"); + font-weight: normal; + font-style: normal; +} + +/* reset */ + +* { + margin: 0; + padding: 0; +} + +h1, +h2 { + font-weight: normal; +} + +label { + cursor: pointer; +} + +a { + text-decoration: none; + color: inherit; + cursor: pointer; +} + +button { + border: 0; + background: none; + color: inherit; +} + +button:enabled { + cursor: pointer; +} + +hr { + border: 0; +} + +ul, +li { + list-style: none; +} + +svg { + cursor: pointer; +} + +button { + border: 0; + background: none; + font: inherit; +} + +/* CSS 시작 */ +body { + background-color: #eee; + font-family: "SpoqaHanSansNeo-Regular"; +} + +.wrapper { + margin: 50px auto; + width: 520px; + background-color: #fff; + border: 1px solid #c4c4c4; + border-radius: 10px; + position: relative; +} + +/* 로그인 창 상단 */ +.login-top { + display: flex; + align-items: center; + justify-content: center; + border-bottom: 1px solid #c4c4c4; +} + +.login-top h1 { + margin: 20px 0 18px; + font-size: 16px; +} + +.login-top svg { + width: 16px; + height: 16px; + position: absolute; + right: 24px; +} + +/* 로그인 창 form */ +.login-form { + padding: 0 24px; +} + +.login-form h2 { + margin: 26px 0 24px; + font-size: 20px; + font-weight: 500; +} + +[class^="user"] { + padding: 0 16px; + width: 472px; + height: 50px; + font-size: 16px; + border-radius: 5px; + box-sizing: border-box; +} + +.user-id { + border: 2px solid #f4492e; +} + +.user-pw { + border: 1px solid #c4c4c4; +} + +.warning-id, +.warning-pw { + color: #f4492e; + font-size: 14px; +} + +.warning-id { + margin: 6px 0 10px 3px; +} + +.warning-pw { + margin: 10px 0 13px 3px; +} + +.a11y-hidden { + /* 말 숨김 처리 */ + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; + clip-path: polygon(0 0, 0 0, 0 0); +} + +/* 로그인 상태 유지 */ +.keep-wrap { + margin-bottom: 21px; +} + +.txt-hide { + /* 기본 체크박스 숨김 처리 */ + width: 1px; + height: 1px; + overflow: hidden; + clip-path: inset(50%); +} + +.lable-hold { + position: relative; + color: #767676; + font-size: 16px; + font-weight: 500; +} + +.lable-hold::before { + content: ""; + display: inline-block; + width: 22px; + height: 22px; + background: url(../img/check-box.svg) no-repeat; + margin-right: 10px; + vertical-align: bottom; +} + +.lable-hold::after { + content: ""; + position: absolute; + top: -1px; + left: 20px; + width: 22px; + height: 22px; + background: url(../img/checked-box.svg) no-repeat; + opacity: 0; +} + +.inphold:checked + .lable-hold::after { + left: 0; + opacity: 1; +} + +/* 로그인 버튼 */ +.btn-login { + width: 100%; + height: 50px; + background-color: #2f80ed; + border-radius: 5px; + color: #fff; + font-size: 18px; + font-weight: 700; +} + +/* 아이디/비밀번호 찾기 */ +.find-wrap { + margin: 20px 0 30px; + display: flex; + gap: 12px; + justify-content: center; + color: #767676; + font-size: 14px; +} + +.or { + display: flex; + align-items: center; + justify-content: center; +} + +.or hr { + width: 210px; + height: 1px; + background-color: #c4c4c4; +} + +.or span { + margin: 0 13px; + color: #767676; +} + +/* 소셜 로그인 */ +.login-sns-group { + margin: 20px 0 25px; + display: flex; + gap: 10px; + flex-direction: column; + align-items: center; + justify-content: center; + color: #767676; +} + +.login-sns-group li { + width: 472px; + height: 50px; + border-radius: 5px; +} + +.login-sns-group button { + height: 50px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; +} + +.icon-gl { + background: url(../img/google-logo.png) no-repeat; + background-position: 12px; + border: 1px solid #767676; +} + +.icon-fb { + background: url(../img/facebook-logo.png) no-repeat; + background-position: 12px; + border: 1px solid #2d9cdb; +} + +.icon-naver { + background: url(../img/naver-logo.png) no-repeat; + background-position: 11px 12px; + border: 1px solid #00bf18; +} + +.icon-kakao { + background: url(../img/kakao-logo.png) no-repeat; + background-position: 11px 12px; + border: 1px solid #f2c94c; +} diff --git a/11-login/img/check-box.svg b/11-login/img/check-box.svg new file mode 100644 index 0000000..79a8b3b --- /dev/null +++ b/11-login/img/check-box.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/11-login/img/checked-box.svg b/11-login/img/checked-box.svg new file mode 100644 index 0000000..f1d0906 --- /dev/null +++ b/11-login/img/checked-box.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/11-login/img/close.svg b/11-login/img/close.svg new file mode 100644 index 0000000..6564003 --- /dev/null +++ b/11-login/img/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/11-login/img/facebook-logo.png b/11-login/img/facebook-logo.png new file mode 100644 index 0000000..2b271bd Binary files /dev/null and b/11-login/img/facebook-logo.png differ diff --git a/11-login/img/google-logo.png b/11-login/img/google-logo.png new file mode 100644 index 0000000..b39f551 Binary files /dev/null and b/11-login/img/google-logo.png differ diff --git a/11-login/img/kakao-logo.png b/11-login/img/kakao-logo.png new file mode 100644 index 0000000..cdb05c4 Binary files /dev/null and b/11-login/img/kakao-logo.png differ diff --git a/11-login/img/naver-logo.png b/11-login/img/naver-logo.png new file mode 100644 index 0000000..911c2a3 Binary files /dev/null and b/11-login/img/naver-logo.png differ diff --git a/11-login/login.html b/11-login/login.html new file mode 100644 index 0000000..0d230a2 --- /dev/null +++ b/11-login/login.html @@ -0,0 +1,77 @@ + + + + + + + login + + + + +
+ +
+

로그인 또는 회원가입

+ + + + +
+ + +
+

위니브에서 여러분의 궁금증을 해결하세요! :)

+
+ + +

아이디를 입력해 주세요.

+ + +

아이디 혹은 비밀번호가 일치하지 않습니다.

+
+ + +
+ +
+
+ 회원가입 + | + 아이디/비밀번호 찾기 +
+
+ +
+
+ 또는 +
+
+ +
+ +