diff --git a/README.md b/README.md deleted file mode 100644 index 0fea0ca..0000000 --- a/README.md +++ /dev/null @@ -1,28 +0,0 @@ -# 멋쟁이사자처럼 프론트엔드 스쿨 7기 - 코드리뷰 스터디 - -## 🛠 Branch name 컨벤션 - -**branch 목록을 볼 때 가독성을 위하여 컨벤션을 지정합니다.** - -``` -branch 이름은 '이슈 번호-본인 이름' 으로 작성합니다. -본인 이름은 카멜 케이스로 작성합니다. -카멜 케이스 -- 첫 글자는 소문자 -- 중간 글자는 대문자 -예시) 1-byeongMin -``` - -## ⭐️ Pull request title 컨벤션 - -``` -pull request의 제목은 '이슈 이름-본인 이름' 으로 작성합니다. -예시) 구현 과제 - 로그인/회원가입 모달 - 병민 -``` - -## ✏ Commit 컨벤션 - -``` -Commit을 할 때 '[이슈 번호] 구현 내용' 으로 작성합니다. -예시) [#1] 로그인 모달 및 기능 구현 -``` diff --git a/css/common.css b/css/common.css new file mode 100644 index 0000000..96cb773 --- /dev/null +++ b/css/common.css @@ -0,0 +1,62 @@ +/* Reset CSS */ +body { + margin: unset; +} +ul { + padding: unset; + margin: unset; + list-style: none; +} +h1, +p { + margin: unset; + font: unset; +} +a { + color: unset; + text-decoration: unset; + outline: unset; +} +input { + padding: unset; +} +button { + font: inherit; + border: none; + background: none; + padding: unset; + cursor: pointer; +} + +img { + vertical-align: top; +} + +fieldset { + margin: unset; + border: unset; + padding: unset; +} + +/* CSS */ +@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; +} + +body { + background: #f2f2f2; + font-family: "SpoqaHanSansNeo-Regular"; +} + +.a11y-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; + clip-path: polygon(0 0, 0 0, 0 0); +} diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..21f0ef0 --- /dev/null +++ b/css/index.css @@ -0,0 +1,40 @@ +/* CSS */ + +.container { + min-width: 0; + max-width: 500px; + padding: 30px; + margin: 280px auto 0; + border: 1px solid #c4c4c4; + border-radius: 5px; + + background: #fff; + + text-align: center; +} + +.header { + margin-bottom: 28px; +} +.text { + margin-bottom: 32px; +} + +.login-button { + display: block; + + padding: 17px 0 15px; + + border-radius: 5px; + background: #2f80ed; + + color: #fff; + font-size: 22px; + font-weight: 700; +} + +.login-button:hover, +.login-button:focus-visible { + outline: 3px solid #2668be; + outline-offset: 1px; +} diff --git a/css/login.css b/css/login.css new file mode 100644 index 0000000..a176469 --- /dev/null +++ b/css/login.css @@ -0,0 +1,246 @@ +body { + display: flex; + height: 100vh; +} + +.login-container { + position: relative; + + min-width: 0; + width: 520px; + margin: auto; + + border: 1px solid #c4c4c4; + border-radius: 10px; + + background: #fff; +} + +/* 로그인 헤더 */ +.login-header { + padding: 20px 0 18px; + border-bottom: 1px solid #c4c4c4; + + text-align: center; + font-weight: 500; +} + +/* 로그인 메인 */ +.login-main { + padding: 26px 24px 30px; +} +.login-main > p { + font-size: 20px; + font-weight: 500; + margin-bottom: 24px; +} + +/* 아이디,비밀번호 input */ +.login-input-group { + margin: 10px 0 16px; +} +.login-input { + width: 100%; + padding: 15px 16px; + + border: 1px solid #c4c4c4; + border-radius: 5px; + + font-size: 16px; + + box-sizing: border-box; +} + +/* 아이디,비밀번호 경고 */ +[class^="warnning"] { + display: none; + + color: #f4492e; + font-size: 14px; + font-weight: 400; +} +.warnning-id { + margin: 6px 0 0 4px; +} +.warnning-user { + margin: 10px 0 0 4px; +} + +/* 로그인 상태 유지 */ +.login-state { + margin: 0 0 20px 4px; + + color: #767676; + font-weight: 500; +} + +/* 로그인 상태 유지 체크박스 */ +.login-state label { + cursor: pointer; +} +.login-state input[type="checkbox"] + label::before, +.login-state input[type="checkbox"]:checked + label:before { + content: ""; + + display: inline-block; + + width: 22px; + height: 22px; + margin-right: 8px; + + background-repeat: no-repeat; + background-position: 50%; + + vertical-align: bottom; +} +.login-state input[type="checkbox"] + label:before { + background-image: url("../imgs/login-checkbox.svg"); +} +.login-state input[type="checkbox"]:checked + label:before { + background-image: url("../imgs/login-checked.svg"); +} + +/* focus-visible */ +.login-state input[type="checkbox"]:focus-visible + label::before { + border-radius: 50%; + box-shadow: 0 0 0 2px #2668be; +} +.login-state input[type="checkbox"]:focus-visible:checked + label:before { + border-radius: 50%; + box-shadow: 0 0 0 2px #10315c; +} + +/* 로그인 버튼 */ +.login-button { + width: 100%; + padding: 14px 0; + margin-bottom: 20px; + + border-radius: 5px; + background: #2f80ed; + + color: #fff; + font-size: 18px; + font-weight: 700; +} +.login-button:hover, +.login-button:focus-visible { + outline: 3px solid #2668be; + outline-offset: 1px; +} + +/* 회원가입,아이디/비밀번호 찾기 */ +.find-user-button-box { + text-align: center; +} +.find-user-button-box a { + color: #767676; + font-size: 14px; +} +.find-user-button-box span { + display: inline-block; + color: #767676; + margin: 0 12px; +} +.find-user-button-box a:hover { + text-decoration: underline; + text-underline-offset: 3px; +} +.find-user-button-box a:focus-visible { + outline: 2px solid #767676; + outline-offset: 2px; +} + +/* 또는 */ +.br { + display: flex; + gap: 13px; + align-items: center; + justify-content: center; + color: #767676; + font-size: 14px; +} +.br::before, +.br::after { + content: ""; + display: inline-block; + background-color: #c4c4c4; + width: 210px; + height: 1px; +} + +/* social login */ +.social-login-container { + padding: 19px 24px 25px; +} + +.social-login-group li:not(:last-of-type) { + margin-bottom: 10px; +} + +.social-login-button { + display: block; + + padding: 15px 0; + border-radius: 5px; + + color: #767676; + text-align: center; + + background-repeat: no-repeat; + background-size: 28px; + background-position: 12px center; +} +.google { + border: 1px solid #767676; + background-image: url(../imgs/google.svg); +} +.facebook { + border: 1px solid #2d9cdb; + background-image: url(../imgs/facebook.svg); +} +.naver { + border: 1px solid #00bf18; + background-image: url(../imgs/naver.svg); +} +.kakao { + border: 1px solid #f2c94c; + background-image: url(../imgs/kakao.svg); +} + +.google:hover, +.google:focus-visible { + outline: 3px solid #767676; + outline-offset: 1px; +} +.facebook:hover, +.facebook:focus-visible { + outline: 3px solid #2d9cdb; + outline-offset: 1px; +} +.naver:hover, +.naver:focus-visible { + outline: 3px solid #00bf18; + outline-offset: 1px; +} +.kakao:hover, +.kakao:focus-visible { + outline: 3px solid #f2c94c; + outline-offset: 1px; +} + +/* 로그인 닫기 버튼 위치 */ +.login-close-button { + position: absolute; + top: 6px; + right: 8px; + + padding: 12px 14px; +} +.login-close-button:focus-visible { + outline: 2px solid gray; + outline-offset: 2px; +} +.login-close-button img { + vertical-align: middle; +} diff --git a/imgs/facebook.svg b/imgs/facebook.svg new file mode 100644 index 0000000..2d45a86 --- /dev/null +++ b/imgs/facebook.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/imgs/google.svg b/imgs/google.svg new file mode 100644 index 0000000..374cd5f --- /dev/null +++ b/imgs/google.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/imgs/kakao.svg b/imgs/kakao.svg new file mode 100644 index 0000000..ce06615 --- /dev/null +++ b/imgs/kakao.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/imgs/login-checkbox.svg b/imgs/login-checkbox.svg new file mode 100644 index 0000000..ab5b1b7 --- /dev/null +++ b/imgs/login-checkbox.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/imgs/login-checked.svg b/imgs/login-checked.svg new file mode 100644 index 0000000..3fea706 --- /dev/null +++ b/imgs/login-checked.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/imgs/login-close-button.svg b/imgs/login-close-button.svg new file mode 100644 index 0000000..88edb05 --- /dev/null +++ b/imgs/login-close-button.svg @@ -0,0 +1,10 @@ + + + + \ No newline at end of file diff --git a/imgs/naver.svg b/imgs/naver.svg new file mode 100644 index 0000000..374dcd4 --- /dev/null +++ b/imgs/naver.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/imgs/weniv-logo.svg b/imgs/weniv-logo.svg new file mode 100644 index 0000000..96ea0ba --- /dev/null +++ b/imgs/weniv-logo.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..23b8d9e --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + + + + + + + + + + weniv + + +
+
+

weniv

+ 위니브로고 +
+ +

위니브를 더 즐겁고 편리하게 이용하세요.

+ 로그인 +
+ + diff --git a/login.html b/login.html new file mode 100644 index 0000000..94c1b69 --- /dev/null +++ b/login.html @@ -0,0 +1,118 @@ + + + + + + + + + login | weniv + + +
+ +
+

+ 위니브 일반 로그인, 소셜 서비스 로그인, 회원가입, 아이디 또는 비밀번호 + 찾기 +

+ 로그인 또는 회원가입 +
+ +
+

일반 로그인

+

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

+
+
+ + + 아이디를 입력해 주세요. +
+ + + +
+
+ 회원가입 + | + 아이디/비밀번호 찾기 +
+
+ +

또는

+ + +
+

소셜서비스로 로그인

+ +
+ + + 로그인 및 회원가입 창 닫기 + +
+ + + +