내용 및 css 작성

codeit-bootcamp-frontend · Aug 17, 2024 · 057fc40 · 057fc40
1 parent 7f711cd
commit 057fc40
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 10 deletions.
diff --git a/image/social_google.png b/image/social_google.png
diff --git a/image/social_kakao.png b/image/social_kakao.png
diff --git a/login.html b/login.html
@@ -6,9 +6,25 @@
     <link rel="stylesheet" href="style_login.css">
   </head>
   <body>
-    <div class="logo"></div>
-    <div class="inputcon"></div>
-    <div class="social"></div>
-    <div class="signup"></div>
+    <main>
+      <div class="logo">
+        <img src="/image/lg.png">
+      </div>
+      <div class="inputcon">
+        이메일<br>
+        <input type="text" name="email" placeholder="이메일을 입력해주세요"><br>
+        비밀번호<br>
+        <input type="password" name="pwd" placeholder="비밀번호를 입력해주세요"><br>
+        <input type="submit" value="로그인" id="login">
+      </div>
+      <div class="social">
+        <div id="socialinfo">간편 로그인하기</div>
+        <div id="socialicon">
+          <img src="/image/social_google.png">
+          <img src="/image/social_kakao.png">
+        </div>
+      </div>
+      <div class="signup">판다마켓이 처음이신가요? <a href="/signup.html">회원가입</a></div>
+    </main>
   </body>
 </html>
diff --git a/signup.html b/signup.html
@@ -6,9 +6,29 @@
     <link rel="stylesheet" href="style_signup.css">
   </head>
   <body>
-    <div class="logo"></div>
-    <div class="inputcon"></div>
-    <div class="social"></div>
-    <div class="login"></div>
+    <main>
+      <div class="logo">
+        <img src="/image/lg.png">
+      </div>
+      <div class="inputcon">
+        이메일<br>
+        <input type="text" name="email" placeholder="이메일을 입력해주세요"><br>
+        닉네임<br>
+        <input type="text" name="nickname" placeholder="닉네임을 입력해주세요"><br>
+        비밀번호<br>
+        <input type="password" name="pwd" placeholder="비밀번호를 입력해주세요"><br>
+        비밀번호 확인<br>
+        <input type="password" name="pwd_check" placeholder="비밀번호를 다시 입력해주세요"><br>
+        <input type="submit" value="회원가입" id="signup">
+      </div>
+      <div class="social">
+        <div id="socialinfo">간편 로그인하기</div>
+        <div id="socialicon">
+          <img src="/image/social_google.png">
+          <img src="/image/social_kakao.png">
+        </div>
+      </div>
+      <div class="login">이미 회원이신가요? <a href="/login.html">로그인</a></div>
+    </main>
   </body>
 </html>
diff --git a/style_login.css b/style_login.css
@@ -1,3 +1,52 @@
 body {
-
+  color:#1f2937;
+  font-size:18px;
+  margin:10px;
+  padding:0px;
+  line-height: 26px;
+}
+main {
+  margin:231px auto;
+  width:640px;
+}
+.logo {
+  width:640px;
+  display: flex;
+  justify-content: center;
+}
+input {
+  border-radius: 12px;
+  background-color: #f3f4f6;
+  border:0;
+  width:640px;
+  height: 56px;
+  margin:15px 0px;;
+  padding:16px 24px;
+  box-sizing: border-box;
+}
+input#login {
+  border-radius: 40px;
+  background-color: #9ca3af;
+  color:#f3f4f6;
+  font-size: 20px;
+  line-height: 32px;
+}
+.social {
+  width:640px;
+  height:74px;
+  background-color: #e6f2ff;
+  box-sizing: border-box;
+  padding:16px 23px;
+  display:flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.socialinfo {
+  font-size:16px;
+}
+.signup {
+  text-align: center;
+  padding-top:30px;
+  font-size:14px;
+  line-height: 24px;
 }
diff --git a/style_signup.css b/style_signup.css
@@ -1,3 +1,52 @@
 body {
-
+  color:#1f2937;
+  font-size:18px;
+  margin:10px;
+  padding:0px;
+  line-height: 26px;
+}
+main {
+  margin:231px auto;
+  width:640px;
+}
+.logo {
+  width:640px;
+  display: flex;
+  justify-content: center;
+}
+input {
+  border-radius: 12px;
+  background-color: #f3f4f6;
+  border:0;
+  width:640px;
+  height: 56px;
+  margin:15px 0px;;
+  padding:16px 24px;
+  box-sizing: border-box;
+}
+input#signup {
+  border-radius: 40px;
+  background-color: #9ca3af;
+  color:#f3f4f6;
+  font-size: 20px;
+  line-height: 32px;
+}
+.social {
+  width:640px;
+  height:74px;
+  background-color: #e6f2ff;
+  box-sizing: border-box;
+  padding:16px 23px;
+  display:flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.socialinfo {
+  font-size:16px;
+}
+.login {
+  text-align: center;
+  padding-top:30px;
+  font-size:14px;
+  line-height: 24px;
 }