diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..386b08c --- /dev/null +++ b/css/style.css @@ -0,0 +1,279 @@ +@font-face { + font-family: 'SpoqaHan'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +/* CSS 초기화 */ +body, +section, +h1, +h2, +h3, +p +label, +input, +div, +button, +form { + margin: 0; + padding: 0; +} +img { + vertical-align: top; +} +a { + color: inherit; + text-decoration: none; +} +input, +button { +font: inherit; +} +button { +border: 0; +background: none; +} +button:enabled { +cursor: pointer; +} + + +/* CSS 적용 */ +.a11y-hidden { + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; +} + +body { +font-family: 'SpoqaHan' +} + +.wrap { + width: 520px; + border-radius: 10px; + border: 1px solid #C4C4C4; + margin: 50px auto; +} + +.title-wrap { + display: flex; + padding-top: 20px; + padding-left: 188px; +} + +.title { + color: #000; + font-size: 16px; + font-weight: 700; +} + +/* 닫기 버튼 */ +.back { + display: inline-block; + width: 16px; + height: 16px; + margin: 2px 24px auto auto; + + cursor: pointer; +} + + +.line { + width: 520px; + height: 1px; + margin-top: 18px; +} + + +/* main */ +.main { + margin: 26px 24px; +} + +h2 { + color: #000; + font-size: 20px; + font-weight: 500; + line-height: 24px; +} + +/* 입력 폼 */ +.login-form { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 24px; +} + +.login-form input { + width: 472px; + height: 50px; + border-radius: 5px; + border: 1px solid #C4C4C4; +} + +/* 경고 메세지 */ +.login-form span{ + display: none; + color: #F4492E; + font-size: 14px; + font-weight: 400; + margin-left: 4px; +} + +.login-form input:hover { + border: 2px solid #F4492E; +} + +.login-form input:hover+span { + display: block; +} + +.login-form input::placeholder { + color: #767676; + font-size: 16px; + font-weight: 400; + padding-left: 16px; +} + +/* 로그인 유지 선택 버튼 */ +.keep-login { + margin-top: 17px; + margin-left: 4px; +} + +.check-label { + display: inline-block; + align-items: center; + + cursor: pointer; +} + +.keep-login span { + color: #767676; + font-size: 16px; + font-weight: 500; + margin-left: 30px; +} + +input[type='checkbox'] + label { + cursor: pointer; + height: 22px; + background: url('../img/check-box.svg') no-repeat; +} + +input[type='checkbox']:checked + label { + background-image: url('../img/check-box_blue.svg'); + height: 22px; +} + +/* 로그인 버튼 */ +.login-submit { + width: 472px; + height: 50px; + border-radius: 5px; + background-color: #2F80ED; + margin-top: 21px; + + color: #FFF; + font-size: 18px; + font-weight: 700; + line-height: 22px; +} + +.find { + display: flex; + justify-content: center; + margin-top: 20px; + gap: 12px; + + color: #767676; + font-size: 14px; + font-weight: 400; +} + + +.or { + color:#767676; + font-size: 14px; + font-weight: 400; + text-align: center; + margin-top: 30px; + /* margin-bottom: 9px; */ +} + +.or::before { + display: inline-block; + content:''; + width: 210px; + height: 1px; + background-color: #C4C4C4; + vertical-align: middle; + margin-right: 13px; +} + +.or::after { + display: inline-block; + content:''; + width: 210px; + height: 1px; + background-color: #C4C4C4; + vertical-align: middle; + margin-left: 13px; +} + +/* 다른 방식으로 로그인 */ +.way-to-login { + margin-top: 18px; + margin-bottom: 25px; +} + +.way-to-login button { + display: block; + width: 472px; + height: 50px; + border-radius: 5px; + margin: 10px 24px; + + color: #767676; + font-size: 16px; + font-weight: 500; +} + +.google { + background-image: url(../img/Google__G__Logo\ 1.png); + background-repeat: no-repeat; + background-position: 11px 12px; + + border: 1px solid #767676; +} +.facebook { + background-image: url(../img/facebook.png); + background-repeat: no-repeat; + background-position: 11px 12px; + + border: 1px solid #2D9CDB; +} +.naver { + background-image: url(../img/naver-logo.png); + background-repeat: no-repeat; + background-position: 11px 12px; + + border: 1px solid #00BF18; +} +.kakao { + background-image: url(../img/message-circle.png); + background-repeat: no-repeat; + background-position: 11px 12px; + + border: 1px solid #F2C94C; +} + diff --git a/img/Google__G__Logo 1.png b/img/Google__G__Logo 1.png new file mode 100644 index 0000000..d1a63a8 Binary files /dev/null and b/img/Google__G__Logo 1.png differ diff --git a/img/Group 3.png b/img/Group 3.png new file mode 100644 index 0000000..3ad5697 Binary files /dev/null and b/img/Group 3.png differ diff --git a/img/Rectangle 59.png b/img/Rectangle 59.png new file mode 100644 index 0000000..2dfbbfd Binary files /dev/null and b/img/Rectangle 59.png differ diff --git a/img/check-box.svg b/img/check-box.svg new file mode 100644 index 0000000..79a8b3b --- /dev/null +++ b/img/check-box.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/img/check-box_blue.svg b/img/check-box_blue.svg new file mode 100644 index 0000000..f1d0906 --- /dev/null +++ b/img/check-box_blue.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/img/close.png b/img/close.png new file mode 100644 index 0000000..5f0d49d Binary files /dev/null and b/img/close.png differ diff --git a/img/facebook.png b/img/facebook.png new file mode 100644 index 0000000..1bbfd12 Binary files /dev/null and b/img/facebook.png differ diff --git a/img/icon_sprites.png b/img/icon_sprites.png new file mode 100644 index 0000000..f8560ca Binary files /dev/null and b/img/icon_sprites.png differ diff --git a/img/line1.png b/img/line1.png new file mode 100644 index 0000000..6fc7893 Binary files /dev/null and b/img/line1.png differ diff --git a/img/message-circle.png b/img/message-circle.png new file mode 100644 index 0000000..ea9255a Binary files /dev/null and b/img/message-circle.png differ diff --git a/img/naver-logo.png b/img/naver-logo.png new file mode 100644 index 0000000..cb4e41d Binary files /dev/null and b/img/naver-logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..fc32f29 --- /dev/null +++ b/index.html @@ -0,0 +1,69 @@ + + + + + + + + 로그인 또는 회원가입 | 위니브 + + + + +
+
+
+

로그인 또는 회원가입

+ + + + + +
+ +
+ +
+

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

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

또는

+ + +
+ + + + +
+
+ + + \ No newline at end of file