[추가] 프로필, 홈(Feed)페이지 CSS 적용

instagramAssignment/static/css/feed.css → instagramAssignment/instagram/static/css/home.css

@@ -12,6 +12,11 @@
   font-weight: 500;
 }
 
+.userNickName a {
+  text-decoration: none;
+  color: black;
+}
+
 .cardImage img {
   width: 100%;
 }
@@ -39,3 +44,7 @@
   border: 0;
   border-top: rgb(228, 227, 227) 1px solid;
 }
+
+.infoRight a {
+  text-decoration: none;
+}

instagramAssignment/instagram/static/css/profile.css

@@ -1,4 +1,4 @@
-body {
+.container {
   margin: 0;
   width: 100vw;
   min-height: 100vh;
@@ -8,18 +8,20 @@ body {
   font-size: 15px;
 }
 
-body * {
+.container * {
   box-sizing: border-box;
 }
 
-header,
-main {
+.profileHeader,
+.container main {
+  position: relative;
+  border: 0;
   width: 900px;
   display: flex;
 }
 
-header {
-  margin-top: 100px;
+.container .profileHeader {
+  padding-top: 100px;
   align-items: center;
 }
 
@@ -29,7 +31,7 @@ header {
   border-radius: 50%;
 }
 
-.profileImgBox img {
+.profileHeader .profileImgBox img {
   border-radius: 50%;
 }
 
@@ -62,7 +64,7 @@ header {
   margin: 0 30px;
 }
 
-main {
+.container main {
   margin-top: 50px;
   flex-wrap: wrap;
 }

instagramAssignment/instagram/templates/home.html

@@ -1,20 +1,53 @@
-{% extends 'base.html' %} {% block content %}
-<!--
-static 넣으려면 이렇게 합시다.
-{% load static %}
-<img src="{% static 'img/ssu_likelion_logo.png'%}" />
--->
-<a href="{% url 'new' %}">create post</a>
-<br />
-<br />
-{% for post in posts %}
-<div>
-  <a href="{%url 'profile' post.writer.id%}"><p>{{post.writer.nickName}}</p></a>
-  <p>{{post.pub_date}}</p>
-  <a href="{%url 'detail' post.id%}"
-    ><p><img src="{{post.image.url}}" /></p
-  ></a>
+{% extends 'base.html' %} {% load static %} {% block moreHead %}
+<link href="{% static 'css/home.css'%}" rel="stylesheet" type="text/css" />
+{% endblock %}{% block content %}
+<div class="main">
+  {% for post in posts %}
+  <section class="cardViewSection">
+    <div class="cardView">
+      <div class="cardHeader">
+        <div class="userNickName">
+          <a href="{%url 'profile' post.writer.id%}"
+            >{{post.writer.nickName}}</a
+          >
+        </div>
+      </div>
+      <div class="cardImage">
+        <img src="{{post.image.url}}" />
+      </div>
+    </div>
+
+    <div class="cardInfo">
+      <div class="infoLeft">
+        <img src="{% static '/img/liked.png'%}" alt="좋아용" class="feedImg" />
+        <img
+          src="{% static '/img/comment.png'%}"
+          alt="코멘트"
+          class="feedImg"
+        />
+        <img src="{% static '/img/upload.png'%}" alt="업로드" class="feedImg" />
+      </div>
+      <div class="infoRight">
+        <a href="{% url 'edit' post.id%}">
+          <img src="{% static '/img/edit.png'%}" alt="수정" class="feedImg" />
+        </a>
+        <a href="{% url 'delete' post.id%}">
+          <img src="{% static '/img/delete.png'%}" alt="삭제" class="feedImg" />
+        </a>
+      </div>
+    </div>
+    <div class="comment">
+      comment1<br />
+      comment2<br />
+    </div>
+    <div class="comment_form">
+      <form action="">
+        <input type="text" placeholder="댓글 입력.." />
+      </form>
+    </div>
+  </section>
+  <br />
+  <br />
+  {% endfor %}
 </div>
-<br />
-<br />
-{% endfor %} {% endblock %}
+{% endblock %}

instagramAssignment/instagram/templates/profile.html

@@ -1,11 +1,42 @@
-{{writer.nickName}}님이 쓰신 글 목록 {% for post in writer_posts %}
-<div>
-  <p>{{post.writer.nickName}}</p>
-  <p>{{post.pub_date}}</p>
-  <a href="{%url 'detail' post.id%}"
-    ><p><img src="{{post.image.url}}" /></p
-  ></a>
+{% extends 'base.html' %} {% load static %} {% block moreHead %}
+<link href="{% static 'css/profile.css'%}" rel="stylesheet" type="text/css" />
+{% endblock %} {% block content %}
+<!--프로필 헤더-->
+<div class="profileHeader">
+  <div class="profileImgBox">
+    <button>
+      <img
+        src="{% static '/img/ssu_likelion_logo_150x150.png'%}"
+        alt="profileImg"
+      />
+    </button>
+  </div>
+  <div class="profileInfoBox">
+    <div class="UserNickNameBox">
+      <h1>{{writer.nickName}}</h1>
+      <button>프로필 편집</button>
+    </div>
+    <div class="UserFeedInfo">
+      <ul>
+        <li>000 게시물</li>
+        <li>000 팔로워</li>
+        <li>000 팔로잉</li>
+      </ul>
+    </div>
+    <div>hello world✈</div>
+  </div>
 </div>
-<br />
-<br />
-{% endfor %}
+
+<!--유저 피드-->
+<main>
+  {% for post in writer_posts %}
+  <div class="postCard">
+    <img src="{{post.image.url}}" />
+    <ul aria-hidden="true">
+      <li>Likes: 0</li>
+      <li>Comments: 0</li>
+    </ul>
+  </div>
+  {% endfor %}
+</main>
+{% endblock %}

instagramAssignment/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;

instagramAssignment/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;