[Django] clone instagram #2

์ •๋ณด๊ตฌ๋‹ˆยท2021๋…„ 12์›” 1์ผ
0

Django

๋ชฉ๋ก ๋ณด๊ธฐ
10/15
post-thumbnail

๋ฉ”์ธํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ

๋ถ€ํŠธ์ŠคํŠธ๋žฉ์„ ์ด์šฉํ•˜์—ฌ ๋ฉ”์ธํŽ˜์ด์ง€์˜ ๋ ˆ์ด์•„์›ƒ์„ ๋จผ์ € ๋งŒ๋“ค์–ด์ฃผ๋ ค๊ณ ํ•œ๋‹ค.

์šฐ์„ , ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์‹œ์ž‘ํ…œํ”Œ๋ฆฟ์„ ๊ฐ€์ ธ์™€์„œ main.py์— ๋„ฃ์–ด์ค€๋‹ค.

-templates/instagram/main.html

<!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">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- 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>



๋‹ค์Œ์œผ๋กœ ์ƒ๋‹จ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ”๋ฅผ ๋„ฃ์–ด์ฃผ๋„๋ก ํ•˜๊ฒ ๋‹ค.

-templates/instagram/main.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>



์ธ์Šคํƒ€๊ทธ๋žจ์„ ํด๋ก ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋กœ๊ณ ์™€ ๊ฒ€์ƒ‰์ฐฝ๋งŒ ์žˆ์œผ๋ฉด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ํ•„์š”ํ•œ ๊ฒƒ๋งŒ ๋‚จ๊ธฐ๊ณ  ์ง€์›Œ์ค€๋‹ค.

-templates/instagram/main.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
</nav>


Navbar๋ฅผ ์ธ์Šคํƒ€๊ทธ๋žจ ์ด๋ฏธ์ง€๋กœ ๋ฐ”๊ฟ”์ฃผ๊ธฐ ์œ„ํ•ด ์ธ์Šคํƒ€๊ทธ๋žจ์—์„œ ์ด๋ฏธ์ง€ ์ฃผ์†Œ๋ฅผ ๋ณต์‚ฌํ•˜๊ณ  ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•ด์ค€๋‹ค.

-templates/instagram/main.html

<a class="navbar-brand" href="#"><img src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"></a>


google material icon์„ ์ฐธ๊ณ ํ•˜์—ฌ ์ƒ๋‹จ ์•„์ด์ฝ˜์„ ๋„ฃ์–ด์ค€๋‹ค.

    <!-- Google Material 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">


    ...
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"></a>
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <span class="material-icons">home</span>
            <span class="material-icons-outlined">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>
    </nav>


์ด์ œ css๋ฅผ ๋งŒ์ ธ๊ฐ€๋ฉฐ ์‹ค์ œ ์ธ์Šคํƒ€๊ทธ๋žจ๊ณผ ๋น„์Šทํ•˜๊ฒŒ ํ•˜๋‚˜์”ฉ ์ˆ˜์ •์„ ํ•ด์ฃผ๋„๋ก ํ•œ๋‹ค.



- templates/instagram/main.html

<!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 Material 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">

    <title>Hello, world!</title>

    <style>
        .navbar {
            position: fixed;
            width: 100%;
            background-color: white;
            border-bottom: solid 1px rgb(202, 202, 202);
        }

        .container-fluid {
            justify-content: space-between;
            min-width: 1000px;
            width: 1000px
        }

        .navbar-search {
            width: 300px;
            font-size: 14px;
        }

        .body {
            padding-top: 100px;
            
            display: flex;
            flex-direction: row;
            justify-content: center;
            font-size: 14px;
            background-color: #FAFAFA

        }

        .left-body {
            width: 630px;
            min-width: 630px;
            height: 1000px;
            margin-right: 350px;
        }

        .right-body {
            width: 320px;
            min-width: 320px;
            height: 1000px;
            position: fixed;
            margin-left: 650px;
        }

        .feed-box {
            border: solid 1px rgb(202, 202, 202);
            background-color: white;
            margin-bottom: 25px;
        }

        .profile {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .profile-id {
            font-weight: bold;
        }

        .profile-name {
            font-size: 12px;
        }

        .profile-img-box {
            width: 40px;
            height: 40px;
            border-radius: 70%;
            overflow: hidden;
            margin: 10px;
            margin-right: 15px;
        }

        .profile-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .profile-text {
            flex-direction: column;
            text-align: left;
        }

        #feed-img {
            width: 100%;
        }

        .icon {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin: 10px;
        }

        .like {
            text-align: left;
            margin: 10px;
            font-size: 13px;
        }

        .feed-text {
            text-align: left;
            margin: 10px;
        }

        .comment {
            text-align: left;
            margin: 10px;
        }

        #input-comment {
            box-shadow: none;
            border: none;
            border-top: solid 1px rgb(202, 202, 202);
        }

        .recommend-msg {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-left: 10px;
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 7px;
        }

        #recommend-text {
            color: grey;
        }

        #recommend-plus {
            text-decoration: none;
            color: black;
        }

        #follow {
            text-decoration: none;
            font-weight: bold;
            color: rgb(70, 156, 255);
        }

        .recommend-lst {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .information {
            color: rgb(197, 197, 197);
            font-size: 11px;
            margin-left: 10px;
            margin-top: 25px;
        }
    </style>
</head>

<body>
    <!-- ํ—ค๋” ์˜์—ญ -->
    <nav class="navbar">
        <div class="container-fluid">
            <a class="navbar-brand" href="#"><img
                    src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"></a>
            <input class="navbar-search form-control me-2" type="search" placeholder="๊ฒ€์ƒ‰" aria-label="Search">
            <div class="navbar_icons">
                <span class="material-icons">home</span>
                <span class="material-icons-outlined">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>

    <!-- ๋ฐ”๋”” ์˜์—ญ -->
    <div class="body">
        <div class="left-body">
            <div class="feed-box">
                <div class="profile">
                    <div class="profile-img-box">
                        <img class="profile-img"
                            src="https://pbs.twimg.com/profile_images/1324185005883486208/gOBh4kKR_400x400.jpg">
                    </div>
                    <div class="profile-id">
                        jollyn
                    </div>
                </div>

                <div class="feed-img">
                    <img id="feed-img"
                        src="https://static-storychat.pstatic.net/2020/9/1/47/208797_hm2fj34m3df60.jpg">
                </div>

                <div class="icon">
                    <div>
                        <span class="material-icons-outlined">favorite_border</span>
                        <span class="material-icons-outlined">chat_bubble_outline</span>
                        <span class="material-icons-outlined">send</span>
                    </div>
                    <div>
                        <span class="material-icons-outlined">bookmark_border</span>
                    </div>
                </div>

                <div class="like">
                    django <b>์™ธ 19๋ช…</b>์ด ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค
                </div>

                <div class="feed-text">
                    <b>jollyn</b> ์ด๊ฑด ๋งˆ์น˜ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ณด๋Š” ๋‚˜์˜ ๋ชจ์Šต
                </div>

                <div class="comment">
                    <div> <b>๊ธฐ๋•</b> ์žฅ๊ณ  ํ™”์ดํŒ… </div>
                    <div> <b>์žฌ๋ช…</b> ์•Œ๊ณ ๋ฆฌ์ฆ˜ ํ™”์ดํŒ… </div>
                    <div> <b>์ด์„ฑ</b> ํŒŒ์ด์ฌ ํ™”์ดํŒ… </div>
                </div>

                <div class="input-comment">
                    <input id="input-comment" type="text" class="form-control" placeholder="๋Œ“๊ธ€ ๋‹ฌ๊ธฐ...">
                </div>
            </div>
        </div>

        <div class="right-body">
            <div class="profile">
                <div class="profile-img-box" style="width: 60px; height: 60px;">
                    <img class="profile-img"
                        src="https://pbs.twimg.com/profile_images/1324185005883486208/gOBh4kKR_400x400.jpg">
                </div>
                <div class="profile-text">
                    <div class="profile-id">
                        jollyn
                    </div>
                    <div class="profile-name" style="color: grey;">
                        anneyujeong
                    </div>
                </div>
            </div>

            <div class="recommend-msg">
                <div id="recommend-text">ํšŒ์›๋‹˜์„ ์œ„ํ•œ ์ถ”์ฒœ</div>
                <a id="recommend-plus" "href="#">๋ชจ๋‘๋ณด๊ธฐ</a>
            </div>

            <div class="recommend-lst">
                <div class="profile">
                    <div class="profile-img-box" style="width: 35px; height: 35px;">
                        <img class="profile-img"
                            src="https://pbs.twimg.com/profile_images/1324185005883486208/gOBh4kKR_400x400.jpg">
                    </div>

                    <div class="profile-text">
                        <div class="profile-id">
                            jollyn
                        </div>
                        <div class="profile-name" style="color: grey;">
                            ๋ฏผ์ •๋‹˜ ์™ธ 4๋ช…์ด ํŒ”๋กœ์šฐํ•ฉ๋‹ˆ๋‹ค
                        </div>
                    </div>
                </div>
                <a id="follow" "href="#">ํŒ”๋กœ์šฐ</a>
            </div>
            <div class="recommend-lst">
                <div class="profile">
                    <div class="profile-img-box" style="width: 35px; height: 35px;">
                        <img class="profile-img"
                            src="https://pbs.twimg.com/profile_images/1324185005883486208/gOBh4kKR_400x400.jpg">
                    </div>

                    <div class="profile-text">
                        <div class="profile-id">
                            jollyn
                        </div>
                        <div class="profile-name" style="color: grey;">
                            ๋ฏผ์ •๋‹˜ ์™ธ 4๋ช…์ด ํŒ”๋กœ์šฐํ•ฉ๋‹ˆ๋‹ค
                        </div>
                    </div>
                </div>
                <a id="follow" "href="#">ํŒ”๋กœ์šฐ</a>
            </div>
            <div class="recommend-lst">
                <div class="profile">
                    <div class="profile-img-box" style="width: 35px; height: 35px;">
                        <img class="profile-img"
                            src="https://pbs.twimg.com/profile_images/1324185005883486208/gOBh4kKR_400x400.jpg">
                    </div>

                    <div class="profile-text">
                        <div class="profile-id">
                            jollyn
                        </div>
                        <div class="profile-name" style="color: grey;">
                            ๋ฏผ์ •๋‹˜ ์™ธ 4๋ช…์ด ํŒ”๋กœ์šฐํ•ฉ๋‹ˆ๋‹ค
                        </div>
                    </div>
                </div>
                <a id="follow" "href="#">ํŒ”๋กœ์šฐ</a>
            </div>

            <div class="information">
                ์†Œ๊ฐœ ๋„์›€๋ง ํ™๋ณด์„ผํ„ฐ API ์ฑ„์šฉ์ •๋ณด
                <p>๊ฐœ์ธ์ •๋ณด์ฒ˜๋ฆฌ๋ฐฉ์นจ ์•ฝ๊ด€ ์œ„์น˜ ์ธ๊ธฐ๊ณ„์ • ํ•ด์‹œํƒœ๊ทธ ์–ธ์–ด</p>

                ยฉ 2021 INSTAGRAM FROM META
            </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>

๊ฒฐ๊ณผ๋Š” ์ด๋ ‡๊ฒŒ ๋‚˜์˜จ๋‹ค



๐Ÿ”Ž ์ฐธ๊ณ 
๊ฐ•์˜
๊ฐ•์˜์ž๋ฃŒ

profile
์ •๋ณด๊ตฌ๋‹ˆ
์ด์ „ ํฌ์ŠคํŠธ

[Django] clone instagram #1

๋‹ค์Œ ํฌ์ŠคํŠธ

[Django] clone instagram #3

0๊ฐœ์˜ ๋Œ“๊ธ€