구현 과제 - 로그인/회원가입 모달 - 준홍

loginPage.css

@@ -0,0 +1,267 @@
+@font-face {
+    font-family: 'SpoqaHanSansNeo-400';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+/* 폰트 */
+
+
+/* ctrl + shift 하고 클릭하면 복수 선택가능 */
+* {
+    font-family: 'SpoqaHanSansNeo-400';
+    padding: 0;
+    margin: 0;
+    font-size: inherit;
+}
+
+a {
+    text-decoration: none;
+}
+
+body {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #e5e5e5;
+}
+
+/* 초기화 작업 */
+
+.wrapper {
+    border-radius: 10px;
+    background-color: #ffffff;
+    width: 520px;
+}
+
+/* 제일 큰테두리 작업 */
+
+header {
+    border-bottom: 1px solid #C4C4C4;
+    padding-top: 20px;
+    padding-bottom: 18px;
+    position: relative;
+}
+
+header h1 {
+    text-align: center;
+    font-family: 500;
+    font-size: 16px;
+}
+
+header .x-btn {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    background-size: 16px;
+    background-image: url(./images/close.svg);
+    background-repeat: no-repeat;
+    transform: translateY(-50%);
+    top: 50%;
+    right: 24px;
+}
+
+/* header에 대한 작업 */
+main h2 {
+    margin-top: 26px;
+    margin-bottom: 24px;
+    font-size: 20px;
+    font-weight: 500;
+}
+
+/* header2에 대한 작업 */
+
+main {
+    padding-left: 24px;
+    padding-right: 24px;
+}
+
+/* header 밑에 있는 몸통 초기 크기 잡는 곳 */
+
+.input-content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.input-content input {
+    border: 2px solid #F4492E;
+    border-radius: 5px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    padding-left: 16px;
+}
+
+label[for="id"],
+label[for="pw"] {
+    color: #F4492E;
+    font-weight: 400;
+    font-size:14px;
+    padding-left: 4px;
+}
+
+.input-content #id {
+    margin-bottom: 6px;
+}
+
+.input-content label[for="id"] {
+    margin-bottom: 10px;
+}
+
+.input-content #pw {
+    margin-bottom: 10px;
+}
+
+
+.state {
+    margin-left:4px;
+    margin-top: 12px;
+    margin-bottom: 20px;
+    padding-left: 30px;
+    position: relative;
+}
+
+.box {
+    font-weight: 500;
+    color: #767676;
+    font-size: 16px;
+}
+
+/* 여기서부터 로그인 상태 유지 구현해야됨. 커스텀 */
+.txt-hide {
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+}
+
+.box::after {
+    position: absolute;
+    content: "";
+    width: 22px;
+    height: 22px;
+    border: 1px solid #767676;
+    border-radius: 50%;
+    left: 0;
+    cursor: pointer;
+    background-image: url(./images/check.svg);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+}
+
+input[type="checkbox"]:checked+.box::after {
+    background-image: url(./images/check-white.svg);
+    background-color: #2F80ED;
+    border: 1px solid #2F80ED;
+}
+
+/* 여기까지(완료) */
+
+
+
+.login-button {
+    font-weight: 700;
+    width: 100%;
+    padding-top: 14px;
+    padding-bottom: 14px;
+    border: none;
+    background-color: #2F80ED;
+    font-size: 18px;
+    color: #ffffff;
+    margin-bottom: 20px;
+}
+
+/* 회원가입 및 또는에 대한 정렬 */
+.register,
+.line {
+    text-align: center;
+}
+
+/* 회원가입 */
+.register {
+    font-size: 14px;
+    vertical-align: top;
+    margin-bottom: 30px;
+    position: relative;
+}
+
+.register,
+.register a {
+    color: #767676;
+}
+
+.split {
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+
+/* 또는 */
+.line {
+    color: #767676;
+    margin-bottom: 20px;
+    position: relative;
+}
+
+.string-line::before,
+.string-line::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    background-color: #C4C4C4;
+    height: 1px;
+    width: 210px;
+}
+
+.string-line::before {
+    left: 0;
+}
+
+.string-line::after {
+    right: 0;
+}
+
+.login-form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    position: relative;
+}
+
+button {
+    font-weight: 500;
+    color: #767676;
+    background-color: #ffffff;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    background-position: 12px 50%;
+    background-repeat: no-repeat;
+    border-radius: 5px;
+}
+
+button:nth-child(1) {
+    background-image: url(./images/Google__G__Logo\ 1.png);
+    border: 1px solid #767676;
+}
+
+button:nth-child(2) {
+    background-image: url(./images/facebook.png);
+    border: 1px solid #2D9CDB;
+}
+
+button:nth-child(3) {
+    background-image: url(./images/naver-logo.png);
+    border: 1px solid #00BF18;
+}
+
+.last-button {
+    background-image: url(./images/message-circle.png);
+    border: 1px solid #F2C94C;
+}
+
+section {
+    padding-bottom: 25px;
+}

loginPage.html

@@ -0,0 +1,57 @@
+<!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>login Page</title>
+    <link rel="stylesheet" href="loginPage.css">
+</head>
+
+<body>
+    <div class="wrapper">
+        <header>
+            <h1>로그인 또는 회원가입</h1>
+            <div class="x-btn"></div>
+        </header>
+        <main>
+            <h2>위니브에서 여러분의 궁금증을 해결하세요! :)</h2>
+            <div class="input-content">
+                <input id="id" type="text" placeholder="아이디" />
+                <label for="id">아이디를 입력해 주세요.</label>
+                <input id="pw" type="password" placeholder="비밀번호" />
+                <label for="pw">아이디 혹은 비밀번호과 일치하지 않습니다.</label>
+            </div>
+
+            <div class="state">
+                <input type="checkbox" id="cb" class="txt-hide login-state">
+                </input>
+                <label class="box" for="cb">로그인 상태 유지</label>
+            </div>
+
+            <button class="login-button" type="submit">로그인</button>
+
+            <div class="register">
+                <a class="start" href="#">회원가입</a>
+                <span class="split">|</span>
+                <a class="end" href="#">아이디/비밀번호 찾기</a>
+            </div>
+
+            <div class="line">
+                <span class="string-line">또는</span>
+            </div>
+            <section class="icon-btn">
+                <form class="login-form">
+                    <button type="button">구글 계정으로 로그인</button>
+                    <button type="button">페이스북 계정으로 로그인</button>
+                    <button type="button">네이버 계정으로 로그인</button>
+                    <button class="last-button" type="button">카카오톡 계정으로 로그인</button>
+                </form>
+                <!-- 먼가 배열이 규칙적으로 보이면 ul/li를 사용하는 것도 좋은 방법! -->
+            </section>
+        </main>
+    </div>
+</body>
+
+</html>