codeit-bootcamp-frontend · addiescode-sj · Apr 8, 2025 · Apr 3, 2025 · Apr 3, 2025 · Apr 4, 2025
diff --git a/global.css b/global.css
@@ -1,7 +1,19 @@
+:root {
+  --gray900: #111827;
+  --gray800: #1f2937;
+  --gray700: #374151;
+  --gray600: #4b5563;
+  --gray500: #6b7280;
+  --gray400: #9ca3af;
+  --gray300: #e5e7eb;
+  --gray200: #f3f4f6;
+  --gray100: #f9fafb;
+
+  --primary-color: #3692ff;
+}
+
 body {
   font-family: "Pretendard-Regular", Arial, Helvetica, sans-serif;
   padding: 0;
   margin: 0;
 }
-
-
diff --git a/image/Component 2.png b/image/Component 2.png
diff --git a/image/Component 3.png b/image/Component 3.png
diff --git a/image/btn_visibility_off_24px.png b/image/btn_visibility_off_24px.png
diff --git a/image/logo_big.png b/image/logo_big.png
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
       <a href="/">
         <img src="image/logo.png" alt="판다마켓 로고" />
       </a>
-      <a href="/login">
+      <a href="login.html">
         <button class="login-button">로그인</button>
       </a>
     </nav>

diff --git a/login.css b/login.css
@@ -0,0 +1,94 @@
+#wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+header {
+  margin-top: 231px;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+form,
+label {
+  width: 640px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+label {
+  font-weight: 700;
+}
+
+input {
+  height: 36px;
+  background-color: var(--gray100);
+  border: 0;
+  border-radius: 12px;
+  padding: 10px 24px;
+  font-size: 16px;
+  flex-grow: 1;
+}
+
+form button {
+  padding: 16px 0px;
+  border: 0;
+  border-radius: 40px;
+  background-color: var(--primary-color);
+  color: #fff;
+  font-size: 20px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.password-container {
+  display: inline-flex;
+  position: relative;
+}
+
+.password-container>button {
+  position: absolute;
+  background-color: transparent;
+  right: 20px;
+  top: 0px;
+  z-index: 1;
+}
+
+.easy-login-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #e6f2ff;
+  border-radius: 8px;
+  padding: 16px 23px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.easy-login-icon {
+  display: flex;
+  gap: 16px;
+}
+
+.easy-login-icon>button {
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+footer {
+  margin-top: 16px;
+}
+
+footer>a {
+  color: var(--primary-color);
+}
diff --git a/login.html b/login.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="login.css" />
+  <link rel="stylesheet" href="global.css" />
+  <title>판다마켓</title>
+</head>
+
+<body>
+  <div id="wrapper">
+    <header>
+      <a href="index.html">
+        <img src="image/logo_big.png" width="396px" alt="판다마켓 로고">
+      </a>
+    </header>
+    <main>
+      <section>
+        <form>
+          <label for="email">
+            <span>이메일</span>
+            <input type="email" name="email" placeholder="codeit@email.com" autocomplete="on">
+          </label>
+          <label for="password">
+            <span>비밀번호</span>
+            <div class="password-container">
+              <input type="password" name="password" placeholder="비밀번호">
+              <button type="button" id="pw-visible">
+                <img src="image/btn_visibility_off_24px.png" alt="비밀번호 가리기">
+              </button>
+            </div>
+          </label>
+          <button type="submit">로그인</button>
+        </form>
+      </section>
+      <section class="easy-login-container">
+        <span>간편 로그인하기</span>
+        <div class="easy-login-icon">
+          <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer"><img src="image/Component 2.png"
+              alt="간편로그인 구글"></a>
+
+          <a href="https://www.kakaocorp.com/page/" target="_blank" rel="noopener noreferrer"><img
+              src="image/Component 3.png" alt="간편로그인 카카오"></a>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <span>판다마켓이 처음이신가요?</span>
+      <a href="signup.html">회원가입</a>
+    </footer>
+  </div>
+</body>
+
+</html>
diff --git a/signup.html b/signup.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="login.css" />
+  <link rel="stylesheet" href="global.css" />
+  <title>판다마켓</title>
+</head>
+
+<body>
+  <div id="wrapper">
+    <header>
+      <a href="index.html">
+        <img src="image/logo_big.png" width="396px" alt="판다마켓 로고">
+      </a>
+    </header>
+    <main>
+      <section>
+        <form>
+          <label for="email">
+            <span>이메일</span>
+            <input type="email" name="email" placeholder="codeit@email.com" autocomplete="on">
+          </label>
+          <label for="nickname">
+            <span>닉네임</span>
+            <input type="text" name="nickname" placeholder="판다" autocomplete="on">
+          </label>
+          <label for="password">
+            <span>비밀번호</span>
+            <div class="password-container">
+              <input type="password" name="password" placeholder="비밀번호">
+              <button type="button" id="pw-visible" aria-label="비밀번호 표시/숨기기">
+                <img src="image/btn_visibility_off_24px.png" alt="비밀번호 가리기">
+              </button>
+            </div>
+          </label>
+          <label for="password-confirm">
+            <span>비밀번호 확인</span>
+            <div class="password-container">
+              <input type="password" name="password-confirm" placeholder="비밀번호">
+              <button type="button" id="pw-visible" aria-label="비밀번호 표시/숨기기">
+                <img src="image/btn_visibility_off_24px.png" alt="비밀번호 가리기">
+              </button>
+            </div>
+          </label>
+          <button type="submit">회원가입</button>
+        </form>
+      </section>
+      <section class="easy-login-container">
+        <span>간편 로그인하기</span>
+        <div class="easy-login-icon">
+          <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer"><img src="image/Component 2.png"
+              alt="간편로그인 구글"></a>
+          <a href="https://www.kakaocorp.com/page/" target="_blank" rel="noopener noreferrer"><img
+              src="image/Component 3.png" alt="간편로그인 카카오"></a>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <span>이미 회원이신가요?</span>
+      <a href="login.html">로그인</a>
+    </footer>
+  </div>
+</body>
+
+
+</html>
diff --git a/style.css b/style.css
@@ -3,16 +3,15 @@
   src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff");
 }
 
-:root {
-  --primary-color: #3692ff;
-}
-
 header {
   background-color: #fff;
+  width: 100%;
   height: 70px;
   padding: 9px;
   display: flex;
   justify-content: center;
+  position: fixed;
+  top: 0;
 }
 
 header img {