[추가] 로그인 CSS 적용

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

Hide file tree

Showing 8 changed files with 93 additions and 10 deletions.
diff --git a/instagramAssignment/account/static/css/background.css b/instagramAssignment/account/static/css/background.css
@@ -0,0 +1,17 @@
+body {
+  margin: 0;
+}
+
+.container {
+  padding-top: 60px;
+  width: 100vw;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 15px;
+}
+
+.container * {
+  box-sizing: border-box;
+}
diff --git a/...Assignment/instagram/static/css/login.css → ...amAssignment/account/static/css/login.css b/...Assignment/instagram/static/css/login.css → ...amAssignment/account/static/css/login.css
@@ -34,6 +34,17 @@
   background-color: lightskyblue;
 }
 
+.login_container button:hover {
+  font-size: 15px;
+  font-weight: bold;
+  height: 36px;
+  border: 0;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  background-color: rgb(135, 170, 235);
+}
+
 .joinInsta {
   display: flex;
   flex-direction: row;
@@ -49,6 +60,7 @@
   font-size: 15px;
   color: blue;
   font-weight: bold;
+  text-decoration: none;
   border: 0;
   background-color: inherit;
 }
diff --git a/instagramAssignment/account/static/img/icon.png b/instagramAssignment/account/static/img/icon.png
diff --git a/instagramAssignment/account/static/img/logo_text.png b/instagramAssignment/account/static/img/logo_text.png
diff --git a/instagramAssignment/account/templates/login.html b/instagramAssignment/account/templates/login.html
@@ -1,9 +1,50 @@
-{% extends 'base.html' %} {% block content %}
-<form action="{% url 'login' %}" method="post">
-  <!--method POST를 썼다면 아래의 토큰을 꼭 명시해주자!-->
-  {%csrf_token%}
-  <p>아이디: <input type="text" name="userId" /></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/login.css' %}"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel="icon" href="{% static 'img/icon.png' %}" />
+  </head>
+  <body>
+    <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"
+        />
+        <input
+          type="text"
+          placeholder="전화번호, 사용자 이름 또는 이메일"
+          class="userLogin"
+          name="userId"
+        />
+        <input
+          type="password"
+          placeholder="비밀번호"
+          class="userLogin"
+          name="password"
+        />
+        <button id="loginButton" type="submit">로그인</button>
+      </form>
+      <footer class="joinInsta">
+        <p class="join">
+          계정이 없으신가요?
+          <a href="{% url 'signup' %}" class="joinBtn">가입하기</a>
+        </p>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/instagramAssignment/instagramAssignment/settings.py b/instagramAssignment/instagramAssignment/settings.py
@@ -124,7 +124,7 @@
 STATIC_URL = '/static/'
 
 #STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'instagram', 'static')]
-STATICFILES_DIRS = []
+STATICFILES_DIRS = [os.path.join(BASE_DIR, 'instagram', 'static'),os.path.join(BASE_DIR, 'account', 'static')]
 #현재 static 파일들이 어디에 있는지
 
 STATIC_ROOT = os.path.join(BASE_DIR, 'static')

diff --git a/instagramAssignment/instagramAssignment/templates/base.html b/instagramAssignment/instagramAssignment/templates/base.html
@@ -4,6 +4,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>Instagram</title>
+    <link rel="icon" href="{% static 'img/icon.png' %}" />
     <link
       href="{% static 'css/background.css'%}"
       rel="stylesheet"

diff --git a/instagramAssignment/static/css/login.css b/instagramAssignment/static/css/login.css
@@ -34,6 +34,17 @@
   background-color: lightskyblue;
 }
 
+.login_container button:hover {
+  font-size: 15px;
+  font-weight: bold;
+  height: 36px;
+  border: 0;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  background-color: rgb(135, 170, 235);
+}
+
 .joinInsta {
   display: flex;
   flex-direction: row;
@@ -49,6 +60,7 @@
   font-size: 15px;
   color: blue;
   font-weight: bold;
+  text-decoration: none;
   border: 0;
   background-color: inherit;
 }