Django 클론코딩으로 인스타그램을 ! 2탄

이전 포스팅에서 ...

아이콘과 네비바를 어느정도 따라한 insta !

이번 포스팅에서는 인스타그램의 피드를 구현해보자 !

---

피드 구상하기

    <!-- feed -->
    <div style="display: flex;">
      <div style="background-color: skyblue">
        왼쪽
      </div>
      <div style="background-color: yellow">
        오른쪽
      </div>
    </div>

피드 왼쪽에는 사진과 글 내용이 오른쪽에는 추천친구가 뜨도록 화면을 분할해야한다

div 로 화면을 분할하고 css 의 display 옵션을 사용하여 좌우로 정렬하면된다

왼쪽과 오른쪽 div 에 각 배경색을 넣어 확인하면 좌우 영역이 분할된 것을 확인할 수 있다

글씨에  맞는 영역은 우리가 원하던 영역 분리가 아니므로 영역을 수동으로 설정해보자 !

    <!-- feed -->
    <div style="display: flex;">
      <div style="background-color: skyblue; width: 500px; height:1000px">
        왼쪽
      </div>
      <div style="background-color: yellow; width: 300px; height:500px">
        오른쪽
      </div>
    </div>

 

width와 height 옵션을 사용하면 수동으로 영역의 크기를 조정할 수 있다

왼쪽 width 영역이 1000px 이 되며 스크롤이 생성되었다 !

 

실제 인스타그램은 상단바와 오른쪽 노란부분이 고정되어 있다 때문에 이를 수정해야한다 !

 

fixed 옵션을 통해 위치를 고정하게 되면 이전에 설정한 flex 옵션은 무시된다

css 를 추가하거나 수정할때는 속성을 하나씩 추가하고 수정하며

크기와 위치를 조금씩 바꾸면서 어떤 변화가 나타나는지 이해하고 학습하면 좋다 !

 

    <!-- feed -->
    <div style="display: flex; justify-content: center; padding-top: 70px">
      <div style="background-color: skyblue; margin-right: 100px; width: 700px; height:3000px">
        왼쪽
      </div>
      <div style="background-color: yellow; width: 300px; height:500px; left: 72%; position: fixed">
        오른쪽
      </div>
    </div>

 

상단바를 고정하기위해 navbar 에는 widht 와 height , postition: fixed 로 수정한다

상단바가 고정되면 피드 영역과 겹치기 때문에 피드 영역에 padding-top 을 추가한다

 

오른쪽 div 는 스크롤과 무관하게 고정되어야 하기 때문에 position: fixed 를 추가한다

fixed 로 설정하면 div 위치가 왼쪽에 달라붙기 때문에 left : 72% 를 추가하여 여유 공간을 만든다

 

피드 div 에는 중앙으로 피드를 정렬하기 위해 justify-content: center 를 추가한다

왼쪽 div 는 왼쪽의 여유 공간을 만들기 위해 margin-right 를 추가한다

 

상단바와 오른쪽 영역을 고정한 화면 !

---

피드 만들기

왼쪽 div 내에 피드 모양의 새로운 div 를 만들어주자 !

<div style="background-color: skyblue; margin-right: 100px; width: 700px; height:3000px; display:flex; flex-direction: column;">  
        <div class="border" style="background-color: white; width: 680px; margin: 10px; height: 680px">
          컨텐츠1
        </div>
        <div class="border" style="background-color: white; width: 680px; margin: 10px; height: 680px">
          컨텐츠2
        </div>
        <div class="border" style="background-color: white; width: 680px; margin: 10px; height: 680px">
          컨텐츠3
        </div>
        <div class="border" style="background-color: white; width: 680px; margin: 10px; height: 680px">
          컨텐츠4
        </div>
        <div class="border" style="background-color: white; width: 680px; margin: 10px; height: 680px">
          컨텐츠5
        </div>
      </div>

class=border 옵션으로 테두리선을 표시하고 margin 을 주어 정사각형으로 만들고

각 콘첸츠를 세로로 정렬하기 위해서 flex-direction 의 column 옵션을 주었다 !

 

근데 같은 div style 코드가 반복되는게 .. 정신없다는 생각이 든다 들어야된다 ...

상단 head 태그 내에 style 라는 태그를 만들고 feed_box css 를 정의해주면 코드를 간결히 할 수 있다

head 태그내에 아래 코드를

    <style>
      .feed_box{
        background-color: white;
        width: 680px;
        height: 680px;
        margin: 10px;
      }
    </style>

body 태그내에 div 를 수정해준다

    <div class="feed_box">
      컨텐츠1
    </div>
    <div class="feed_box">
      컨텐츠2
    </div>
    <div class="feed_box">
      컨텐츠3
    </div>
    <div class="feed_box">
      컨텐츠4
    </div>
    <div class="border" style="background-color: white; width: 680px; margin: 10px; height: 680px">
      컨텐츠5
    </div>

우리 코드내에 다른 div 들도 css class 로 바꾸어주자 !

head 태그내에 아래 코드를

    <style>
      .main_feed{
        display: flex; 
        justify-content: center; 
        padding-top: 70px;
      }
      .left_feed{
        background-color: skyblue; 
        margin-right: 100px; 
        width: 700px; 
        height:3000px; 
        display:flex; 
        flex-direction: column;
      }
      .feed_box{
        background-color: white;
        width: 680px;
        height: 680px;
        margin: 10px;
      }
      .right_feed{
        background-color: yellow; 
        width: 300px; 
        height:500px; 
        left: 72%; 
        position: fixed;
      }
    </style>

body 태그내 코드도 수정하면 진짜 간결해졌다 !

 <!-- feed -->
    <div class="main_feed">
      <div class="left_feed">  
        <div class="feed_box">
          컨텐츠1
        </div>
        <div class="feed_box">
          컨텐츠2
        </div>
        <div class="feed_box">
          컨텐츠3
        </div>
        <div class="feed_box">
          컨텐츠4
        </div>
        <div class="feed_box">
          컨텐츠5
        </div>
      </div>
      <div class="right_feed">
        오른쪽
      </div>
    </div>

---

피드 내용 채우기

사진과 글을 작성하여 피드를 내용을 채워보자

feed_box 내에 feed_content 와 feed_img 등 포함할 클래스들을 정의하고 css 를 추가하자 !

인스타 피드처럼 생긴 피드 내용을 채워보쟈

코드의 변동사항이 많아져서 .. 전제적인 코드를 공유한다 !

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- google icon -->
  <link
  href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
  rel="stylesheet">

    <style>
      .main_feed{
        display: flex; 
        justify-content: center; 
        padding-top: 50px;
      }
      .left_feed{
        background-color: skyblue; 
        margin-right: 100px; 
        width: 500px; 
        height:2000px; 
        display:flex; 
        flex-direction: column;
      }
      .feed_box{
        background-color: white;
        width: 480px;
        margin: 10px;
        min-height: auto;
      }

      .feed_name{
        padding: 10px;
        display: flex;
        align-items: center;
    }
    
      .feed_name_txt{
        font-size: 14px;
        padding: 0px 10px;
        font-weight: bold;
      }
    
      .profile_box {
        width: 40px;
        height: 40px;
        border-radius: 70%;
        overflow: hidden;
      }
      .profile_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .feed_img{
        width: 100%;
        object-fit: contain;
      }

      .feed_content{
        padding: 0px 10px;
      }

      .feed_like{
        padding: 0px 10px;
      }
    
      .feed_reply{
        padding: 0px 10px;
        display: flex;
        flex-direction: column;
      }

      .feed_text{
        font-size: 14px;
      }

      .feed_icon{
        padding: 5px 5px 0px 5px;
        display: flex;
        justify-content: space-between;
      }span{
         padding-right: 5px;
      }

      .right_feed{
        background-color: yellow; 
        width: 300px; 
        height:500px; 
        left: 72%; 
        position: fixed;
      }
    </style>

    <title>Sootagram</title>

  </head>
  <body>
    <!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light" style="width: 100%;height: 50px;position: fixed;">
        <div class="container">
            <img style="height: 30px; object-fit: contain" 
            
            src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png">
            <input class="form-control" style="width: 200px" type="search" placeholder="Search" aria-label="Search">

            <!-- navbar icons -->
            <div>
                <span class="material-icons">home</span>
                <span class="material-icons">send</span>
                <span class="material-icons-outlined">add_box</span>
                <span class="material-icons-outlined">explore</span>
                <span class="material-icons-outlined">favorite_border</span>
            </div>
        </div>
    </nav>

    <!-- feed -->
    <div class="main_feed">
      <div class="left_feed">  
        <div class="feed_box">

          <div class="feed_name">
            <div class="profile_box">
              <img class="profile_img" src="https://t1.daumcdn.net/cafeattach/aVeZ/96bb985f315f63a2fe16120d8b0fec4b589ac4e9">
            </div>
            <span class="feed_name_txt"> suzy022 </span>
          </div>

          <img class="feed_img" src="https://pbs.twimg.com/media/D4uU-sCUcAA6doH?format=jpg&name=900x900">
          <div class="feed_icon">
            <div>
              <span class="material-icons-outlined">
                favorite_border
              </span>
              <span class="material-icons-outlined">
                mode_comment
              </span>
              <span class="material-icons-outlined">
                send
              </span>
            </div>
            <div>
              <span class="material-icons-outlined">
                turned_in_not
              </span>
            </div>
          </div>
          <div class="feed_like">
            <p class="feed_txt"> <b>좋아요 10개</b></p>
          </div>
          <div class="feed_content">
            <p class="feed_txt"> <b> suzy022 </b> 헉 성공 !? </p>
          </div>
          <div class="feed_reply">
            <span class="feed_txt"> <b> chew012 </b> 축하해 ~ </span>
            <span class="feed_txt"> <b> hoo486 </b> 멋찌다 ~ </span>
          </div>
        </div>
      </div>
      <div class="right_feed">
        오른쪽
      </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

사진과 글을 feed_content div 로 나누어져 있고 글 내용 외에는 구글 아이콘들을 사용하여 좋아요 댓글을 추가하였다

feed_name div 내 profile_box 는 동그란 프로필 사진을 만들어주고 feed_name_txt 는 유저네임을 적어주면된다

 

자 이제 피드 코드를 이해하면서 오른쪽 노란 영역의 코드도 수정해보자

feed_name 을 살짝 활용하면 만들 수 있다

파란 배경와 노란 배경을 모두 빼니 진짜 그럴싸 !

추가한 내용이 복잡하니 전체 코드를 한번 더 공유 !

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- google icon -->
  <link
  href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
  rel="stylesheet">

    <style>
      .main_feed{
        display: flex; 
        justify-content: center; 
        padding-top: 50px;
        background-color: #FAFAFA;
      }
      .left_feed{
        margin-right: 100px; 
        width: 500px; 
        height:2000px; 
        display: flex; 
        flex-direction: column;
      }

      .feed_name{
        padding: 10px;
        display: flex;
        align-items: center;
      }
    
      .feed_name_txt{
        font-size: 14px;
        padding: 0px 10px;
        font-weight: bold;
      }
    
      .profile_box {
        width: 40px;
        height: 40px;
        border-radius: 70%;
        overflow: hidden;
      }
      .profile_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .feed_box{
        background-color: white;
        width: 480px;
        margin: 10px;
        min-height: auto;
        padding-bottom: 10px;
      }

      .feed_img{
        width: 100%;
        object-fit: contain;
      }

      .feed_content{
        padding: 0px 10px;
      }

      .feed_like{
        padding: 0px 10px;
      }
    
      .feed_reply{
        padding: 0px 10px;
        display: flex;
        flex-direction: column;
      }

      .feed_txt{
        font-size: 14px;
      }

      .feed_icon{
        padding: 5px 5px 0px 5px;
        display: flex;
        justify-content: space-between;
      }span{
         padding-right: 5px;
      }

      .right_feed{
        padding-top: 20px;
        width: 300px; 
        height:1000px; 
        left: 72%; 
        position: fixed;
      }

      .name_content{
        display: flex;
        flex-direction: column;
      }
    
      .name_content_txt{
        font-size: 12px;
        padding: 0px 10px;
        font-weight: bold;
        color: lightgray;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 190px;
      }
    
      .big_profile_box {
        width: 60px;
        height: 60px;
        border-radius: 70%;
        overflow: hidden;
      }
    
      .link_txt{
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        text-decoration: none;
      }
    
      .recommend_box {
        display: flex;
        justify-content: space-between;
        padding: 5px;
        font-size: 14px;
        font-weight: bold;
        align-items: center;
      }
    
      .comment_box{
        margin: 40px 0 0 5px;
        font-size: 12px;
        font-weight: bold;
        color: lightgray;
        display: flex;
        flex-direction: column;
      }

    </style>

    <title>Sootagram</title>

  </head>
  <body>
    <!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light" style="width: 100%;height: 50px;position: fixed;">
        <div class="container">
            <img style="height: 30px; object-fit: contain" 
            
            src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png">
            <input class="form-control" style="width: 200px" type="search" placeholder="Search" aria-label="Search">

            <!-- navbar icons -->
            <div>
                <span class="material-icons">home</span>
                <span class="material-icons">send</span>
                <span class="material-icons-outlined">add_box</span>
                <span class="material-icons-outlined">explore</span>
                <span class="material-icons-outlined">favorite_border</span>
            </div>
        </div>
    </nav>

    <!-- feed -->
    <div class="main_feed">
      <div class="left_feed">  
        <div class="feed_box">

          <div class="feed_name">
            <div class="profile_box">
              <img class="profile_img" src="https://t1.daumcdn.net/cafeattach/aVeZ/96bb985f315f63a2fe16120d8b0fec4b589ac4e9">
            </div>
            <span class="feed_name_txt"> suzy022 </span>
          </div>

          <img class="feed_img" src="https://pbs.twimg.com/media/D4uU-sCUcAA6doH?format=jpg&name=900x900">
          <div class="feed_icon">
            <div>
              <span class="material-icons-outlined">
                favorite_border
              </span>
              <span class="material-icons-outlined">
                mode_comment
              </span>
              <span class="material-icons-outlined">
                send
              </span>
            </div>
            <div>
              <span class="material-icons-outlined">
                turned_in_not
              </span>
            </div>
          </div>
          <div class="feed_like">
            <p class="feed_txt"> <b>좋아요 10개</b></p>
          </div>
          <div class="feed_content">
            <p class="feed_txt"> <b> suzy022 </b> 헉 성공 !? </p>
          </div>
          <div class="feed_reply">
            <span class="feed_txt"> <b> chew012 </b> 축하해 ~ </span>
            <span class="feed_txt"> <b> hoo486 </b> 멋찌다 ~ </span>
          </div>
        </div>
      </div>
      <div class="right_feed">
        <div class="feed_name" style="justify-content: space-between">
          <div style="display: flex; align-items: center; ">
            <div class="big_profile_box">
              <img class="profile_img"
                   src="https://t1.daumcdn.net/cafeattach/aVeZ/96bb985f315f63a2fe16120d8b0fec4b589ac4e9">
            </div>
            <div class="name_content">
              <span class="feed_name_txt"> suzy022 </span>
              <span class="name_content_txt"> Kang Soo</span>
            </div>
          </div>
    
          <a class="link_txt" >
            전환
          </a>
        </div>
    
        <div class="recommend_box">
          <span style="color: gray"> 회원님을 위한 추천</span>
          <span style="font-size: 12px"> 모두 보기 </span>
        </div>
        <div>
          <div class="feed_name" style="justify-content: space-between">
            <div class="profile_box">
              <img class="profile_img"
                   src="https://t1.daumcdn.net/cafeattach/aVeZ/342a25f22c930afd3a92573975c54bc36ec5865c">
            </div>
            <div class="name_content">
              <span class="feed_name_txt"> mememe </span>
              <span class="name_content_txt"> Sootargram 신규가입</span>
            </div>
            <a class="link_txt">
              팔로우
            </a>
          </div>
          <div class="feed_name" style="justify-content: space-between">
            <div class="profile_box">
              <img class="profile_img"
                   src="https://t1.daumcdn.net/cafeattach/aVeZ/e74ed63424c35876233091248583e881f867d2f6">
            </div>
            <div class="name_content">
              <span class="feed_name_txt"> goodsta </span>
              <span class="name_content_txt"> mememe 외 5명이 팔로우</span>
            </div>
            <a class="link_txt">
              팔로우
            </a>
          </div>
          <div class="feed_name" style="justify-content: space-between">
            <div class="profile_box">
              <img class="profile_img"
                   src="https://t1.daumcdn.net/cafeattach/aVeZ/c70b6fc6cc425f2ed835e7afc46e0199037e6f0f">
            </div>
            <div class="name_content">
              <span class="feed_name_txt"> donals </span>
              <span class="name_content_txt"> mememe 외 5명이 팔로우</span>
            </div>
            <a class="link_txt">
              팔로우
            </a>
          </div>
          <div class="feed_name" style="justify-content: space-between">
            <div class="profile_box">
              <img class="profile_img"
                   src="https://t1.daumcdn.net/cafeattach/aVeZ/de802cd8c4cf9afe0637b220fef335417f1bc991">
            </div>
            <div class="name_content">
              <span class="feed_name_txt"> realinsta </span>
              <span class="name_content_txt"> mememe 외 5명이 팔로우 </span>
            </div>
            <a class="link_txt">
              팔로우
            </a>
          </div>
          <div class="feed_name" style="justify-content: space-between">
            <div class="profile_box">
              <img class="profile_img"
                   src="https://t1.daumcdn.net/cafeattach/aVeZ/4fb7306d95bb2be1ffe3d83c4a94c4a2c970ccbf">
            </div>
            <div class="name_content">
              <span class="feed_name_txt"> rams </span>
              <span class="name_content_txt"> Sootargram 신규가입 </span>
            </div>
            <a class="link_txt">
              팔로우
            </a>
          </div>
        </div>
        <div class="comment_box">
          <span> INSTAGRAM CLONECODING </span>
          <span> https://kangsu-2ji.tistory.com/ </span>
          <br>
          <span> 2022 INSTAGRAM @kangsu-2ji </span>
    
        </div>
      </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

 

그림 주석에 그럴싸 ! 가 나오면 포스팅의 마무리를 준비하면된다 ..

 

2탄까지는 전체적인 디자인 구성에 대해서 고민하고 구현해보았다 !

아직 세세한 디자인 기능은 구현하지 않았지만 전체적인 큰 틀이 잡혔으니

세부적인 디자인은 지금까지의 css 들을 참고하면 어렵지 않다 :D

 

다음 포스팅에서는 장고의 모델을 생성하고 백엔드를 구성하자 !