From fa1b4886f7874f5ad849f98c2b221b173f3dd0dc Mon Sep 17 00:00:00 2001
From: "HeeJoon.Yang" <yhj2151@gmail.com>
Date: Mon, 7 Aug 2023 17:22:07 +0900
Subject: [PATCH 1/2] =?UTF-8?q?[#11]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=B0=8F=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../.vscode/settings.json"                    |   3 +
 .../css/style.css"                            | 259 ++++++++++++++++++
 .../images/check-box.svg"                     |   4 +
 .../images/close.svg"                         |   6 +
 .../images/facebook.svg"                      |   3 +
 .../images/google.svg"                        |   6 +
 .../images/kakao.svg"                         |   3 +
 .../images/naver.svg"                         |   3 +
 .../index.html"                               |  67 +++++
 9 files changed, 354 insertions(+)
 create mode 100644 "\354\226\221\355\235\254\354\244\200_loginpage/.vscode/settings.json"
 create mode 100644 "\354\226\221\355\235\254\354\244\200_loginpage/css/style.css"
 create mode 100644 "\354\226\221\355\235\254\354\244\200_loginpage/images/check-box.svg"
 create mode 100644 "\354\226\221\355\235\254\354\244\200_loginpage/images/close.svg"
 create mode 100644 "\354\226\221\355\235\254\354\244\200_loginpage/images/facebook.svg"
 create mode 100644 "\354\226\221\355\235\254\354\244\200_loginpage/images/google.svg"
 create mode 100644 "\354\226\221\355\235\254\354\244\200_loginpage/images/kakao.svg"
 create mode 100644 "\354\226\221\355\235\254\354\244\200_loginpage/images/naver.svg"
 create mode 100644 "\354\226\221\355\235\254\354\244\200_loginpage/index.html"

diff --git "a/\354\226\221\355\235\254\354\244\200_loginpage/.vscode/settings.json" "b/\354\226\221\355\235\254\354\244\200_loginpage/.vscode/settings.json"
new file mode 100644
index 0000000..6b665aa
--- /dev/null
+++ "b/\354\226\221\355\235\254\354\244\200_loginpage/.vscode/settings.json"
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git "a/\354\226\221\355\235\254\354\244\200_loginpage/css/style.css" "b/\354\226\221\355\235\254\354\244\200_loginpage/css/style.css"
new file mode 100644
index 0000000..ae9f882
--- /dev/null
+++ "b/\354\226\221\355\235\254\354\244\200_loginpage/css/style.css"
@@ -0,0 +1,259 @@
+@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
+
+body {
+  margin: 0;
+}
+h1,
+h2,
+p,
+input,
+div,
+img,
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
+img {
+  vertical-align: top;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+input,
+button {
+  font: inherit;
+  border: none;
+}
+ol,
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+button:enabled {
+  cursor: pointer;
+}
+
+/* CSS 적용 */
+body {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "Spoqa Han Sans Neo", "sans-serif";
+}
+.wrapper {
+  width: 520px;
+  height: auto;
+  border-radius: 10px;
+  border: 1px solid #c4c4c4;
+  background: #fff;
+}
+
+h1 {
+  font-size: 16px;
+  font-weight: 500;
+  text-align: center;
+}
+header {
+  width: 520px;
+  height: 58px;
+  border-bottom: 1px solid #c4c4c4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.header a {
+  position: absolute;
+  top: 22px;
+  right: 24px;
+}
+.section1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.section1 > p {
+  flex-shrink: 0;
+  color: #000;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 24px;
+  padding-top: 26px;
+  padding-left: 24px;
+}
+.section1 [type="text"] {
+  display: block;
+  box-sizing: border-box;
+  padding: 15px 0 15px 16px;
+  margin: 0 auto;
+  width: 472px;
+  height: 50px;
+  flex-shrink: 0;
+  border-radius: 5px;
+  border: 2px solid var(--c-4-c-4-c-4, #f4492e);
+  background: #fff;
+  margin-top: 24px;
+}
+.section1 [type="password"] {
+  display: block;
+  box-sizing: border-box;
+  padding: 15px 0 15px 16px;
+  margin: 0 auto;
+  width: 472px;
+  height: 50px;
+  flex-shrink: 0;
+  border-radius: 5px;
+  border: 1px solid var(--c-4-c-4-c-4, #c4c4c4);
+  background: #fff;
+}
+#pw-input::placeholder {
+  font-weight: 500;
+}
+.section1 .id_err {
+  padding: 0;
+  margin: 6px 0 10px 28px;
+  color: #f4492e;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.section1 .pw_err {
+  padding: 0;
+  margin: 10px 0 13px 28px;
+  color: #f4492e;
+  font-family: Spoqa Han Sans Neo;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.check {
+  display: flex;
+  padding-left: 28px;
+}
+.check img {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  padding-bottom: 21px;
+}
+.check p {
+  display: inline-block;
+  color: var(--767676, #767676);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin-left: 8px;
+}
+.section1 button {
+  margin: 0 auto;
+  width: 472px;
+  height: 50px;
+  flex-shrink: 0;
+  border-radius: 5px;
+  background: #2f80ed;
+  color: #fff;
+}
+.group {
+  display: flex;
+  justify-content: center;
+  padding-top: 20px;
+}
+.group p {
+  justify-content: center;
+  display: inline-block;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  color: #767676;
+}
+.group .join::after {
+  display: inline-block;
+  content: "|";
+  width: 4px;
+  height: 18px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+/* 또는 */
+.or {
+  display: flex;
+  justify-content: center;
+  padding-top: 39px;
+  padding-bottom: 28px;
+}
+.or p {
+  position: relative;
+  width: 472px;
+  height: 1px;
+  background-color: #c4c4c4;
+}
+.or::after {
+  position: absolute;
+  transform: translateY(-50%);
+  content: "또는";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  color: #767676;
+  background-color: white;
+  padding: 0 13px;
+}
+.section2 {
+  display: flex;
+  justify-content: center;
+}
+.section2 a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 472px;
+  height: 50px;
+  flex-shrink: 0;
+  border-radius: 5px;
+  border: 1px solid var(--767676, #767676);
+  background: #fff;
+  color: var(--767676, #767676);
+  font-size: 16px;
+  font-style: normal;
+  line-height: normal;
+}
+
+.section2 .google {
+  background-image: url(/images/google.svg);
+  background-repeat: no-repeat;
+  background-position: 12px;
+  border-color: 767676;
+  margin-bottom: 10px;
+}
+.section2 .facebook {
+  background-image: url(/images/facebook.svg);
+  background-repeat: no-repeat;
+  background-position: 12px;
+  border-color: #2d9cdb;
+  margin-bottom: 10px;
+}
+.section2 .naver {
+  background-image: url(/images/naver.svg);
+  background-repeat: no-repeat;
+  background-position: 12px;
+  border-color: #00bf18;
+  margin-bottom: 10px;
+}
+.section2 .kakao {
+  background-image: url(/images/kakao.svg);
+  background-repeat: no-repeat;
+  background-position: 12px;
+  border-color: #f2c94c;
+  margin-bottom: 25px;
+}
diff --git "a/\354\226\221\355\235\254\354\244\200_loginpage/images/check-box.svg" "b/\354\226\221\355\235\254\354\244\200_loginpage/images/check-box.svg"
new file mode 100644
index 0000000..3fea706
--- /dev/null
+++ "b/\354\226\221\355\235\254\354\244\200_loginpage/images/check-box.svg"
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
+<circle cx="11" cy="11" r="11" fill="#2F80ED"/>
+<path d="M15.5 8.5L10.5 14L7 10.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git "a/\354\226\221\355\235\254\354\244\200_loginpage/images/close.svg" "b/\354\226\221\355\235\254\354\244\200_loginpage/images/close.svg"
new file mode 100644
index 0000000..b0315f6
--- /dev/null
+++ "b/\354\226\221\355\235\254\354\244\200_loginpage/images/close.svg"
@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="close">
+<path id="Vector 2" d="M1.15918 16.9999L17 1.15915" stroke="#767676"/>
+<path id="Vector 3" d="M16.8408 16.8408L1.00003 1" stroke="#767676"/>
+</g>
+</svg>
diff --git "a/\354\226\221\355\235\254\354\244\200_loginpage/images/facebook.svg" "b/\354\226\221\355\235\254\354\244\200_loginpage/images/facebook.svg"
new file mode 100644
index 0000000..9ba9fbf
--- /dev/null
+++ "b/\354\226\221\355\235\254\354\244\200_loginpage/images/facebook.svg"
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.8333 2.33331H16.3333C14.7862 2.33331 13.3025 2.94789 12.2085 4.04186C11.1146 5.13582 10.5 6.61955 10.5 8.16665V11.6666H7V16.3333H10.5V25.6666H15.1667V16.3333H18.6667L19.8333 11.6666H15.1667V8.16665C15.1667 7.85723 15.2896 7.56048 15.5084 7.34169C15.7272 7.1229 16.0239 6.99998 16.3333 6.99998H19.8333V2.33331Z" fill="#2D9CDB"/>
+</svg>
diff --git "a/\354\226\221\355\235\254\354\244\200_loginpage/images/google.svg" "b/\354\226\221\355\235\254\354\244\200_loginpage/images/google.svg"
new file mode 100644
index 0000000..801e609
--- /dev/null
+++ "b/\354\226\221\355\235\254\354\244\200_loginpage/images/google.svg"
@@ -0,0 +1,6 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.5001 14.2413C24.5001 13.5351 24.4375 12.8646 24.3302 12.212H14.228V16.2439H20.0122C19.7529 17.567 18.993 18.6845 17.8666 19.4444V22.1264H21.3174C23.3379 20.2579 24.5001 17.5044 24.5001 14.2413Z" fill="#4285F4"/>
+<path d="M14.2279 24.728C17.1245 24.728 19.5472 23.7625 21.3173 22.1265L17.8665 19.4445C16.901 20.0882 15.6762 20.4815 14.2279 20.4815C11.4297 20.4815 9.06061 18.5952 8.21131 16.0473H4.6532V18.8098C6.41437 22.3142 10.0351 24.728 14.2279 24.728Z" fill="#34A853"/>
+<path d="M8.21136 16.0473C7.98787 15.4036 7.87164 14.7152 7.87164 14C7.87164 13.2848 7.99681 12.5964 8.21136 11.9528V9.19031H4.65326C3.92018 10.6386 3.5 12.2657 3.5 14C3.5 15.7344 3.92018 17.3614 4.65326 18.8097L8.21136 16.0473Z" fill="#FBBC05"/>
+<path d="M14.2279 7.51852C15.8103 7.51852 17.2228 8.06386 18.3403 9.12772L21.3978 6.07025C19.5472 4.33589 17.1245 3.27203 14.2279 3.27203C10.0351 3.27203 6.41437 5.68583 4.6532 9.1903L8.21131 11.9527C9.0606 9.40486 11.4297 7.51852 14.2279 7.51852Z" fill="#EA4335"/>
+</svg>
diff --git "a/\354\226\221\355\235\254\354\244\200_loginpage/images/kakao.svg" "b/\354\226\221\355\235\254\354\244\200_loginpage/images/kakao.svg"
new file mode 100644
index 0000000..138a72d
--- /dev/null
+++ "b/\354\226\221\355\235\254\354\244\200_loginpage/images/kakao.svg"
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.5 13.4167C24.504 14.9565 24.1442 16.4756 23.45 17.85C22.6268 19.4971 21.3614 20.8824 19.7954 21.8509C18.2293 22.8193 16.4246 23.3327 14.5833 23.3334C13.0435 23.3374 11.5245 22.9776 10.15 22.2834L3.5 24.5L5.71667 17.85C5.02242 16.4756 4.66265 14.9565 4.66667 13.4167C4.66738 11.5754 5.18071 9.77069 6.14917 8.20468C7.11763 6.63866 8.50296 5.3732 10.15 4.55003C11.5245 3.85579 13.0435 3.49602 14.5833 3.50003H15.1667C17.5984 3.63419 19.8952 4.66059 21.6173 6.3827C23.3394 8.10482 24.3658 10.4016 24.5 12.8334V13.4167Z" fill="#F2C94C"/>
+</svg>
diff --git "a/\354\226\221\355\235\254\354\244\200_loginpage/images/naver.svg" "b/\354\226\221\355\235\254\354\244\200_loginpage/images/naver.svg"
new file mode 100644
index 0000000..964c406
--- /dev/null
+++ "b/\354\226\221\355\235\254\354\244\200_loginpage/images/naver.svg"
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.9977 13.9992C24.9977 16.9266 24.9977 19.8548 24.9977 22.7837C24.9977 24.0883 24.0909 24.9995 22.7863 25C16.9402 25 11.0943 25 5.2485 25C3.92973 25 3.00436 24.091 3.00327 22.776C2.99891 16.9197 2.99891 11.0646 3.00327 5.21086C3.00327 3.90573 3.92646 3.00055 5.22667 3H22.7672C24.1078 3 24.9999 3.89864 24.9999 5.24632C25.0003 8.16103 24.9995 11.0787 24.9977 13.9992ZM12.2521 14.0423C12.3437 14.0827 12.3792 14.1705 12.4288 14.2409C13.4835 15.7223 14.5404 17.2014 15.5858 18.6888C15.7309 18.8956 15.8826 18.99 16.1423 18.9862C17.1244 18.9712 18.1066 18.9712 19.0887 18.9862C19.3549 18.9894 19.4297 18.8972 19.4291 18.6397C19.4226 15.5391 19.4226 12.4385 19.4291 9.33794C19.4291 9.08968 19.3506 9.00456 19.1018 9.00784C18.1289 9.01875 17.1561 9.02093 16.1833 9.00784C15.9104 9.00347 15.8226 9.08641 15.8248 9.36358C15.8373 10.8182 15.8308 12.2728 15.8308 13.7286C15.8308 13.8191 15.8308 13.9102 15.8308 14.0014C15.8308 14.0456 15.8362 14.1001 15.7877 14.1214C15.72 14.1509 15.6911 14.0892 15.6595 14.0488C15.6142 13.9943 15.5765 13.9299 15.5356 13.8699C14.4844 12.3309 13.4342 10.7911 12.3852 9.25064C12.2701 9.0804 12.1435 9.00893 11.9383 9.01057C10.9289 9.01857 9.91954 9.01857 8.91015 9.01057C8.67062 9.01057 8.57459 9.07004 8.57514 9.33084C8.5835 12.4405 8.5835 15.5506 8.57514 18.661C8.57514 18.9092 8.6477 18.9927 8.90251 18.9883C9.89335 18.9763 10.8844 18.9763 11.8756 18.9883C12.1331 18.9916 12.2221 18.9196 12.2199 18.6522C12.2084 17.2156 12.2139 15.779 12.2161 14.3418C12.2111 14.2414 12.18 14.1389 12.2542 14.0396L12.2521 14.0423Z" fill="#00BF18"/>
+</svg>
diff --git "a/\354\226\221\355\235\254\354\244\200_loginpage/index.html" "b/\354\226\221\355\235\254\354\244\200_loginpage/index.html"
new file mode 100644
index 0000000..9a7f4f0
--- /dev/null
+++ "b/\354\226\221\355\235\254\354\244\200_loginpage/index.html"
@@ -0,0 +1,67 @@
+<!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>로그인</title>
+    <link rel="stylesheet" href="./css/style.css" />
+  </head>
+  <body>
+    <div class="wrapper">
+      <header class="header">
+        <h1>로그인 또는 회원가입</h1>
+        <a href="#"><img src="./images/close.svg" alt="닫기" /></a>
+      </header>
+      <main>
+        <section class="section1">
+          <p>위니브에서 여러분의 궁금증을 해결하세요! :&#41;</p>
+          <label for="id-input"></label>
+          <input type="text" id="id-input" placeholder="아이디" />
+          <p class="id_err">아이디를 입력해 주세요.</p>
+          <label for="pw-input"></label>
+          <input type="password" id="pw-input" placeholder="비밀번호" />
+          <p class="pw_err">아이디 혹은 비밀번호와 일치하지 않습니다.</p>
+          <div class="check">
+            <img src="./images/check-box.svg" />
+            <p>로그인 상태 유지</p>
+          </div>
+          <button type="button">로그인</button>
+          <div class="group">
+            <p class="join">회원가입</p>
+            <p>아이디/비밀번호 찾기</p>
+          </div>
+        </section>
+
+        <div class="or">
+          <p></p>
+        </div>
+
+        <section class="section2">
+          <ul>
+            <li>
+              <a href="#" class="google">
+                <p>구글 계정으로 로그인</p>
+              </a>
+            </li>
+            <li>
+              <a href="#" class="facebook">
+                <p>페이스북 계정으로 로그인</p>
+              </a>
+            </li>
+            <li>
+              <a href="#" class="naver">
+                <p>네이버 계정으로 로그인</p>
+              </a>
+            </li>
+            <li>
+              <a href="#" class="kakao">
+                <p>카카오톡 계정으로 로그인</p>
+              </a>
+            </li>
+          </ul>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>

From c46c83583b62508a82a8cbcd2422f07497d848b8 Mon Sep 17 00:00:00 2001
From: "HeeJoon.Yang" <yhj2151@gmail.com>
Date: Tue, 8 Aug 2023 00:31:52 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[#11]=20=EC=88=98=EC=A0=95=20=ED=94=BC?=
 =?UTF-8?q?=EB=93=9C=EB=B0=B1=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/style.css"                            | 45 ++++++++++----
 .../index.html"                               | 60 +++++++++++++------
 2 files changed, 74 insertions(+), 31 deletions(-)

diff --git "a/\354\226\221\355\235\254\354\244\200_loginpage/css/style.css" "b/\354\226\221\355\235\254\354\244\200_loginpage/css/style.css"
index ae9f882..deb0267 100644
--- "a/\354\226\221\355\235\254\354\244\200_loginpage/css/style.css"
+++ "b/\354\226\221\355\235\254\354\244\200_loginpage/css/style.css"
@@ -38,11 +38,12 @@ button:enabled {
 
 /* CSS 적용 */
 body {
-  height: 100vh;
-  width: 100vw;
+  margin: 0;
+  padding: 0;
   display: flex;
   justify-content: center;
   align-items: center;
+  min-height: 100vh;
   font-family: "Spoqa Han Sans Neo", "sans-serif";
 }
 .wrapper {
@@ -136,14 +137,9 @@ header {
 .check {
   display: flex;
   padding-left: 28px;
-}
-.check img {
-  display: inline-block;
-  width: 22px;
-  height: 22px;
   padding-bottom: 21px;
 }
-.check p {
+.check_msg {
   display: inline-block;
   color: var(--767676, #767676);
   font-size: 16px;
@@ -152,6 +148,13 @@ header {
   line-height: normal;
   margin-left: 8px;
 }
+.ck:checked + svg circle {
+  fill: #2f80ed;
+  stroke: white;
+}
+.ck:checked + svg path {
+  stroke: white;
+}
 .section1 button {
   margin: 0 auto;
   width: 472px;
@@ -166,7 +169,13 @@ header {
   justify-content: center;
   padding-top: 20px;
 }
-.group p {
+.group ul {
+  display: flex;
+}
+.group a {
+  cursor: pointer;
+}
+.group li {
   justify-content: center;
   display: inline-block;
   font-size: 14px;
@@ -230,30 +239,40 @@ header {
 }
 
 .section2 .google {
-  background-image: url(/images/google.svg);
+  background-image: url("../images/google.svg");
   background-repeat: no-repeat;
   background-position: 12px;
   border-color: 767676;
   margin-bottom: 10px;
 }
 .section2 .facebook {
-  background-image: url(/images/facebook.svg);
+  background-image: url("../images/facebook.svg");
   background-repeat: no-repeat;
   background-position: 12px;
   border-color: #2d9cdb;
   margin-bottom: 10px;
 }
 .section2 .naver {
-  background-image: url(/images/naver.svg);
+  background-image: url("../images/naver.svg");
   background-repeat: no-repeat;
   background-position: 12px;
   border-color: #00bf18;
   margin-bottom: 10px;
 }
 .section2 .kakao {
-  background-image: url(/images/kakao.svg);
+  background-image: url("../images/kakao.svg");
   background-repeat: no-repeat;
   background-position: 12px;
   border-color: #f2c94c;
   margin-bottom: 25px;
 }
+.a11y-hidden {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
diff --git "a/\354\226\221\355\235\254\354\244\200_loginpage/index.html" "b/\354\226\221\355\235\254\354\244\200_loginpage/index.html"
index 9a7f4f0..dc0e7c8 100644
--- "a/\354\226\221\355\235\254\354\244\200_loginpage/index.html"
+++ "b/\354\226\221\355\235\254\354\244\200_loginpage/index.html"
@@ -14,24 +14,48 @@ <h1>로그인 또는 회원가입</h1>
         <a href="#"><img src="./images/close.svg" alt="닫기" /></a>
       </header>
       <main>
-        <section class="section1">
-          <p>위니브에서 여러분의 궁금증을 해결하세요! :&#41;</p>
-          <label for="id-input"></label>
-          <input type="text" id="id-input" placeholder="아이디" />
-          <p class="id_err">아이디를 입력해 주세요.</p>
-          <label for="pw-input"></label>
-          <input type="password" id="pw-input" placeholder="비밀번호" />
-          <p class="pw_err">아이디 혹은 비밀번호와 일치하지 않습니다.</p>
-          <div class="check">
-            <img src="./images/check-box.svg" />
-            <p>로그인 상태 유지</p>
-          </div>
-          <button type="button">로그인</button>
-          <div class="group">
-            <p class="join">회원가입</p>
-            <p>아이디/비밀번호 찾기</p>
-          </div>
-        </section>
+        <form action="url" method="post">
+          <section class="section1">
+            <p>위니브에서 여러분의 궁금증을 해결하세요! :&#41;</p>
+            <label for="id-input"></label>
+            <input type="text" id="id-input" placeholder="아이디" />
+            <p class="id_err">아이디를 입력해 주세요.</p>
+            <label for="pw-input"></label>
+            <input type="password" id="pw-input" placeholder="비밀번호" />
+            <p class="pw_err">아이디 혹은 비밀번호와 일치하지 않습니다.</p>
+            <div class="check">
+              <input
+                class="ck a11y-hidden"
+                type="checkbox"
+                name="check"
+                id="checked"
+              />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="22"
+                height="22"
+                viewBox="0 0 22 22"
+                fill="none"
+              >
+                <circle cx="11" cy="11" r="10.5" stroke="#767676" />
+                <path
+                  d="M15.5 8.5L10.5 14L7 10.5"
+                  stroke="#767676"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              <label for="checked" class="check_msg">로그인 상태 유지</label>
+            </div>
+            <button type="button">로그인</button>
+            <div class="group">
+              <ul>
+                <li class="join"><a>회원가입</a></li>
+                <li><a>아이디/비밀번호 찾기</a></li>
+              </ul>
+            </div>
+          </section>
+        </form>
 
         <div class="or">
           <p></p>