[추가] 회원가입 CSS 적용

likelion-ssu-9th · Jun 19, 2021 · 1981a49 · 1981a49
1 parent 8ee4768
commit 1981a49
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 16 deletions.
diff --git a/instagramAssignment/account/static/css/login.css b/instagramAssignment/account/static/css/login.css
@@ -9,6 +9,11 @@
   padding: 80px 40px;
 }
 
+.login_container .imgWrapper {
+  display: flex;
+  justify-content: center;
+}
+
 .login_container img {
   height: 51px;
   object-fit: contain;

diff --git a/...ssignment/instagram/static/css/signUp.css → ...mAssignment/account/static/css/signUp.css b/...ssignment/instagram/static/css/signUp.css → ...mAssignment/account/static/css/signUp.css
@@ -8,6 +8,11 @@
   padding: 80px 40px;
 }
 
+.signUp_container .imgWrapper {
+  display: flex;
+  justify-content: center;
+}
+
 .signUp_container img {
   height: 51px;
   object-fit: contain;
@@ -43,6 +48,17 @@
   background-color: lightskyblue;
 }
 
+.signUp_container button:hover {
+  margin-top: 20px;
+  font-size: 15px;
+  font-weight: bold;
+  height: 36px;
+  border: 0;
+  border-radius: 5px;
+  color: white;
+  background-color: rgb(135, 170, 235);
+}
+
 .joinInsta {
   display: flex;
   flex-direction: row;
@@ -57,6 +73,7 @@
 .joinBtn {
   font-size: 15px;
   color: blue;
+  text-decoration: none;
   font-weight: bold;
   border: 0;
   background-color: inherit;

diff --git a/instagramAssignment/account/templates/login.html b/instagramAssignment/account/templates/login.html
@@ -20,11 +20,15 @@
     <div class="container">
       <form action="{% url 'login' %}" method="post" class="login_container">
         {%csrf_token%}
-        <img
-          src="{% static 'img/logo_text.png' %}"
-          alt="instagramText"
-          class="instagramText"
-        />
+        <div class="imgWrapper">
+          <a href="{% url 'home' %}">
+            <img
+              src="{% static 'img/logo_text.png' %}"
+              alt="instagramText"
+              class="instagramText"
+            />
+          </a>
+        </div>
         <input
           type="text"
           placeholder="전화번호, 사용자 이름 또는 이메일"

diff --git a/instagramAssignment/account/templates/signup.html b/instagramAssignment/account/templates/signup.html
@@ -1,11 +1,63 @@
-{% extends 'base.html' %} {% block content %}
-<form action="{% url 'signup' %}" method="post">
-  <!--method POST를 썼다면 아래의 토큰을 꼭 명시해주자!-->
-  {%csrf_token%}
-  <p>아이디: <input type="text" name="userId" /></p>
-  <p>이름: <input type="text" name="name" /></p>
-  <p>닉네임: <input type="text" name="nickName" /></p>
-  <p>비밀번호: <input type="password" name="password" /></p>
-  <button type="submit">submit</button>
-</form>
-{% endblock %}
+{% load static %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>회원가입 • Instagram</title>
+    <link
+      href="{% static 'css/background.css' %}"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="{% static 'css/signUp.css' %}"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel="icon" href="{% static 'img/icon.png' %}" />
+  </head>
+  <body>
+    <div class="container">
+      <form action="{% url 'signup' %}" method="post" class="signUp_container">
+        {%csrf_token%}
+        <div class="imgWrapper">
+          <a href="{% url 'home' %}">
+            <img
+              src="{% static 'img/logo_text.png' %}"
+              alt="instagramText"
+              class="instagramText"
+            />
+          </a>
+        </div>
+        <h2 class="joinLetter">친구들의 사진과 동영상을 보려면 가입하세요.</h2>
+        <hr class="line" />
+        <input
+          type="text"
+          placeholder="휴대폰 번호 또는 이메일 주소"
+          name="userId"
+          class="userSignUp"
+        />
+        <input type="text" placeholder="성명" name="name" class="userSignUp" />
+        <input
+          type="text"
+          placeholder="사용자 이름"
+          name="nickName"
+          class="userSignUp"
+        />
+        <input
+          type="password"
+          placeholder="비밀번호"
+          name="password"
+          class="userSignUp"
+        />
+        <button id="signUpButton" type="submit">가입</button>
+      </form>
+      <footer class="joinInsta">
+        <p class="join">
+          계정이 있으신가요?
+          <a href="{% url 'login' %}" class="joinBtn">로그인</a>
+        </p>
+      </footer>
+    </div>
+  </body>
+</html>