인스타그램 UI 클론 코딩

코린이·2022년 5월 2일
htmljquery부트스트랩인스타그램
1
post-thumbnail

업로드한 제 git 주소는 "https://github.com/DingoFreestyle/insta_ui_clone"
입니다

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        P {
            display: flex;
            margin: 5px auto auto auto;
            max-width: 600px;
            width: 80%;
            border: 2px solid black;
            height: 1000px
        }

        b {
            font-size: 15px;
        }

        h5 {
            display: flex;
            flex-direction: row-reverse;
        }

        footer {
            font-size: 8px;
            opacity: 0.3;
        }
    </style>

    <title>INSTAGRAM_COPY</title>
    <!--폰트 링크-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Noto+Serif+KR&display=swap" rel="stylesheet">
    <!--제이쿼리 링크-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!--부트스트랩 링크-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
    <!--전체 태그 폰트 먹이기-->
    <style>
        *{  font-family: 'Jua', sans-serif;
        }
    </style>

</head>
<style>
    .profile {
        width: 30px;
        height: 30px;
        object-fit: cover;
        object-position: center;
        border-radius: 50%;
    }

    .head_feed {
        display: table;
        margin: 5px auto 5px auto;
        width: 100%;
        max-width: 600px;
        max-width: 600px;
    }

    .fix_test {
        position: fixed;
        width: 100%;
        max-width: 250px;
    }

</style>
<body style="background-color: #fafafa">

<!--------------------------▼▼▼▼▼▼▼ 상단 고정 바 ▼▼▼▼▼▼▼------------------------------------->
<nav class="navbar navbar-expand-sm bg-white navbar-black fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
        <ul class="nav justify-content-center" style="width: 250px">
            <form class="d-flex" style="width: 100%">
                <input class="form-control me-2" style="background-color: #d3d3d3;" type="text" placeholder="Search">
            </form>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="index.html"><img src="images/home_ico.png"></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="index.html"><img src="images/message_ico.png"></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="index.html"><img src="images/upload_ico.png"></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="index.html"><img src="images/freefeeds.png"></a>
            </li>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="index.html"><img src="images/alram_list.ico.png"></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="index.html"><img class="profile" src="images/id_image.jpg"></a>
            </li>
        </ul>
        </ul>
    </div>
    </li>
    </ul>
    </form>
    </div>
</nav>
<!--------------------------▲▲▲▲▲▲ 상단 고정 바 ▲▲▲▲▲▲------------------------------------->
<div class="container" style="margin-top: 80px; max-width: 1000px">
    <div class="row">
        <!--●●●●●●●●●●●●●●피드공간●●●●●●●●●●●●●●●●●●●●●●-->
        <div class="col" style="max-width: 620px">
            <!--피드001-->
            <div class="head_feed bg-white" style="border: 0.5px solid #b4b4b4">
                <div class="d-flex flex-column">
                    <!--▼▼▼▼▼▼▼▼▼▼▼▼▼ID▼▼▼▼▼▼▼▼▼▼▼▼▼-->
                    <div class="p-2">
                        <div class="d-flex" href="index.html">
                            <div class="p-2"><img class="profile" src="images/ids/9gag.png"></div>
                            <div class="p-2"><h4><b>9gag meme factory</b></h4></div>
                            <div class="p-2 flex-grow-1"><h5>•••</h5></div>
                        </div>
                    </div>
                    <!--▲▲▲▲▲▲▲▲▲▲▲▲▲ID▲▲▲▲▲▲▲▲▲▲▲▲▲-->
                    <!--▼▼▼▼▼▼▼▼▼▼▼▼▼사진▼▼▼▼▼▼▼▼▼▼▼▼▼-->
                    <div class="p-2" style="padding: 0px">
                        <div id="feed001" class="carousel slide" data-ride="carousel" data-interval="false">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#feed001" data-slide-to="0" class="active"></li>
                                <li data-target="#feed001" data-slide-to="1"></li>
                                <li data-target="#feed001" data-slide-to="2"></li>
                                <li data-target="#feed001" data-slide-to="3"></li>
                            </ol>

                            <!-- Wrapper for slides -->
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img src="images/main_pics/A001.png" style="width:100%;">
                                </div>
                                <div class="item">
                                    <img src="images/main_pics/A002.png" style="width:100%;">
                                </div>
                                <div class="item">
                                    <img src="images/main_pics/A003.jpg" style="width:100%;">
                                </div>
                                <div class="item">
                                    <img src="images/main_pics/A004.png" style="width:100%;">
                                </div>
                            </div>
                            <!-- Left and right controls -->
                            <a class="left carousel-control" href="#feed001" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#feed001" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                    <!--▲▲▲▲▲▲▲▲▲▲▲▲▲사진▲▲▲▲▲▲▲▲▲▲▲▲▲-->
                    <!--▼▼▼▼▼▼▼▼▼▼▼▼▼좋아요▼▼▼▼▼▼▼▼▼▼▼▼▼-->
                    <div class="p-2">
                        <div class="d-flex" href="index.html">
                            <div class="p-2"><img src="images/alram_list.ico.png"></div>
                            <div class="p-2"><img src="images/dm.png"></div>
                            <div class="p-2"><img src="images/message_ico.png"></div>
                            <div class="p-2 flex-grow-1"><h5><img src="images/save_post.png"></h5></div>
                        </div>
                    </div>
                    <!--▲▲▲▲▲▲▲▲▲▲▲▲▲좋아요▲▲▲▲▲▲▲▲▲▲▲▲▲-->
                    <!--▼▼▼▼▼▼▼▼▼▼▼▼▼멘트▼▼▼▼▼▼▼▼▼▼▼▼▼-->
                    <div class="p-2">
                        <h4><b>좋아요 0개</b></h4>
                        <h4><b>9gag meme factory</b></h4><h6>❤❤❤❤❤❤❤</h6>
                    </div>
                    <!--▲▲▲▲▲▲▲▲▲▲▲▲▲멘트▲▲▲▲▲▲▲▲▲▲▲▲▲-->
                    <!--▼▼▼▼▼▼▼▼▼▼▼▼▼댓글입력창▼▼▼▼▼▼▼▼▼▼▼▼▼-->
                    <div class="p-2">
                        <div class="d-flex">
                            <div class="p-2"><img src="images/emoticon.png"></div>
                            <div class="p-2"><input class="form-control" type="text" placeholder="댓글 달기..."
                                                    style="border: 2px solid white"></div>
                            <div class="p-2 flex-grow-1"><h5 style="color: dodgerblue">게시</h5></div>
                        </div>
                    </div>
                    <!--▲▲▲▲▲▲▲▲▲▲▲▲▲댓글입력창▲▲▲▲▲▲▲▲▲▲▲▲▲-->
                </div>
            </div>
            <!--피드002-->
            <div class="head_feed bg-white" style="border: 0.5px solid #b4b4b4">
                <div class="d-flex flex-column">
                    <!--▼▼▼▼▼▼▼▼▼▼▼▼▼ID▼▼▼▼▼▼▼▼▼▼▼▼▼-->
                    <div class="p-2">
                        <div class="d-flex" href="index.html">
                            <div class="p-2"><img class="profile" src="images/ids/me.jpg"></div>
                            <div class="p-2"><h4><b>memecollector</b></h4></div>
                            <div class="p-2 flex-grow-1"><h5>•••</h5></div>
                        </div>
                    </div>
                    <!--▲▲▲▲▲▲▲▲▲▲▲▲▲ID▲▲▲▲▲▲▲▲▲▲▲▲▲-->
                    <!--▼▼▼▼▼▼▼▼▼▼▼▼▼사진▼▼▼▼▼▼▼▼▼▼▼▼▼-->
                    <div class="p-2">
                        <div id="feed002" class="carousel slide" data-ride="carousel" data-interval="false">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#feed002" data-slide-to="0" class="active"></li>
                                <li data-target="#feed002" data-slide-to="1"></li>
                                <li data-target="#feed002" data-slide-to="2"></li>
                                <li data-target="#feed002" data-slide-to="3"></li>
                            </ol>

                            <!-- Wrapper for slides -->
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img src="images/main_pics/B001.png" style="width:100%;">
                                </div>
                                <div class="item">
                                    <img src="images/main_pics/B002.jpg" style="width:100%;">
                                </div>
                                <div class="item">
                                    <img src="images/main_pics/B003.jpg" style="width:100%;">
                                </div>
                                <div class="item">
                                    <img src="images/main_pics/B004.png" style="width:100%;">
                                </div>
                            </div>
                            <!-- Left and right controls -->
                            <a class="left carousel-control" href="#feed002" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#feed002" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                    <!--▲▲▲▲▲▲▲▲▲▲▲▲▲사진▲▲▲▲▲▲▲▲▲▲▲▲▲-->
                    <!--▼▼▼▼▼▼▼▼▼▼▼▼▼좋아요▼▼▼▼▼▼▼▼▼▼▼▼▼-->
                    <div class="p-2">
                        <div class="d-flex" href="index.html">
                            <div class="p-2"><img src="images/alram_list.ico.png"></div>
                            <div class="p-2"><img src="images/dm.png"></div>
                            <div class="p-2"><img src="images/message_ico.png"></div>
                            <div class="p-2 flex-grow-1"><h5><img src="images/save_post.png"></h5></div>
                        </div>
                    </div>
                    <!--▲▲▲▲▲▲▲▲▲▲▲▲▲좋아요▲▲▲▲▲▲▲▲▲▲▲▲▲-->
                    <!--▼▼▼▼▼▼▼▼▼▼▼▼▼멘트▼▼▼▼▼▼▼▼▼▼▼▼▼-->
                    <div class="p-2">
                        <h4><b>좋아요 0개</b></h4>
                        <h4><b>memecollector</b></h4><h6>화이팅!</h6>
                    </div>
                    <!--▲▲▲▲▲▲▲▲▲▲▲▲▲멘트▲▲▲▲▲▲▲▲▲▲▲▲▲-->
                    <!--▼▼▼▼▼▼▼▼▼▼▼▼▼댓글입력창▼▼▼▼▼▼▼▼▼▼▼▼▼-->
                    <div class="p-2">
                        <div class="d-flex">
                            <div class="p-2"><img src="images/emoticon.png"></div>
                            <div class="p-2"><input class="form-control" type="text" placeholder="댓글 달기..."
                                                    style="border: 2px solid white"></div>
                            <div class="p-2 flex-grow-1"><h5 style="color: dodgerblue">게시</h5></div>
                        </div>
                    </div>
                    <!--▲▲▲▲▲▲▲▲▲▲▲▲▲댓글입력창▲▲▲▲▲▲▲▲▲▲▲▲▲-->
                </div>
            </div>
            <!--피드003-->
            <div class="head_feed bg-white" style="border: 0.5px solid #b4b4b4">
                <div class="d-flex flex-column">
                    <!--▼▼▼▼▼▼▼▼▼▼▼▼▼ID▼▼▼▼▼▼▼▼▼▼▼▼▼-->
                    <div class="p-2">
                        <div class="d-flex" href="index.html">
                            <div class="p-2"><img class="profile" src="images/ids/9gag.png"></div>
                            <div class="p-2"><h4><b>9gag meme factory</b></h4></div>
                            <div class="p-2 flex-grow-1"><h5>•••</h5></div>
                        </div>
                    </div>
                    <!--▲▲▲▲▲▲▲▲▲▲▲▲▲ID▲▲▲▲▲▲▲▲▲▲▲▲▲-->
                    <!--▼▼▼▼▼▼▼▼▼▼▼▼▼사진▼▼▼▼▼▼▼▼▼▼▼▼▼-->
                    <div class="p-2">
                        <div id="feed003" class="carousel slide" data-ride="carousel" data-interval="false">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#feed003" data-slide-to="0" class="active"></li>
                                <li data-target="#feed003" data-slide-to="1"></li>
                                <li data-target="#feed003" data-slide-to="2"></li>
                                <li data-target="#feed003" data-slide-to="3"></li>
                            </ol>

                            <!-- Wrapper for slides -->
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img src="images/main_pics/c001.jpg" style="width:100%;">
                                </div>
                                <div class="item">
                                    <img src="images/main_pics/c002.jpg" style="width:100%;">
                                </div>
                                <div class="item">
                                    <img src="images/main_pics/c003.png" style="width:100%;">
                                </div>
                                <div class="item">
                                    <img src="images/main_pics/c004.jpg" style="width:100%;">
                                </div>
                            </div>
                            <!-- Left and right controls -->
                            <a class="left carousel-control" href="#feed003" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#feed003" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                    <!--▲▲▲▲▲▲▲▲▲▲▲▲▲사진▲▲▲▲▲▲▲▲▲▲▲▲▲-->
                    <!--▼▼▼▼▼▼▼▼▼▼▼▼▼좋아요▼▼▼▼▼▼▼▼▼▼▼▼▼-->
                    <div class="p-2">
                        <div class="d-flex" href="index.html">
                            <div class="p-2"><img src="images/alram_list.ico.png"></div>
                            <div class="p-2"><img src="images/dm.png"></div>
                            <div class="p-2"><img src="images/message_ico.png"></div>
                            <div class="p-2 flex-grow-1"><h5><img src="images/save_post.png"></h5></div>
                        </div>
                    </div>
                    <!--▲▲▲▲▲▲▲▲▲▲▲▲▲좋아요▲▲▲▲▲▲▲▲▲▲▲▲▲-->
                    <!--▼▼▼▼▼▼▼▼▼▼▼▼▼멘트▼▼▼▼▼▼▼▼▼▼▼▼▼-->
                    <div class="p-2">
                        <h4><b>좋아요 0개</b></h4>
                        <h4><b>9gag meme factory</b></h4><h6>jesus meme</h6>
                    </div>
                    <!--▲▲▲▲▲▲▲▲▲▲▲▲▲멘트▲▲▲▲▲▲▲▲▲▲▲▲▲-->
                    <!--▼▼▼▼▼▼▼▼▼▼▼▼▼댓글입력창▼▼▼▼▼▼▼▼▼▼▼▼▼-->
                    <div class="p-2">
                        <div class="d-flex">
                            <div class="p-2"><img src="images/emoticon.png"></div>
                            <div class="p-2"><input class="form-control" type="text" placeholder="댓글 달기..."
                                                    style="border: 2px solid white"></div>
                            <div class="p-2 flex-grow-1"><h5 style="color: dodgerblue">게시</h5></div>
                        </div>
                    </div>
                    <!--▲▲▲▲▲▲▲▲▲▲▲▲▲댓글입력창▲▲▲▲▲▲▲▲▲▲▲▲▲-->
                </div>
            </div>
        </div>
        <!--●●●●●●●●●●●●●●우측footer●●●●●●●●●●●●●●●●●●●●●●-->
        <div class="col" style="max-width: 300px">
            <div class="fix_test">
                <div class="p-2">
                    <!--내 계정 공간-->
                    <div class="d-flex" href="index.html">
                        <div class="p-2"><img class="profile" src="images/ids/me.jpg" style="margin-right: 5px"><b>memecollector</b></div>
                        <div class="p-2 flex-grow-1"><h5 style="color: blue; font-size: 15px">전환</h5></div>
                    </div>
                    <!--회원 추천 공간-->
                    <div class="p-2"><h6>회원님을 위한 추천</h6></div>
                    <div class="d-flex" href="index.html">
                        <div class="p-2"><img class="profile" src="images/ids/long_shutter.jpg" style="margin-right: 5px"><b>long_shutter</b></div>
                        <div class="p-2 flex-grow-1"><h5 style="color: blue; font-size: 15px" >팔로우</h5></div>
                    </div>
                    <!--FOOTER-->
                    <footer style="margin-top: 60px">INSTAGRAM UI CLONING</footer>
                    <footer>ⓒ 2022 MEMESTAGRAM FROM UPPER PRICE</footer>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var win = $(window);
    $("p:last").text("scroollTop:" + win.scrollTop());
</script>
</body>
</html>

profile
코린이
갓 코딩 시작한 코린이
이전 포스트

12일차

다음 포스트

주간복습 1-2주차

2개의 댓글

comment-user-thumbnail
김준태
2022년 5월 3일

안녕하세요! 코드 잘봤습니다 너무 수고많으셨어요!
제가 과정 수강생분들이 현재까지 어떻게 공부해오셨는지에 대해서 배경이 조금 부족하다보니 피드백 방향이 완벽하지 않을 수 있다는 점 양해부탁드릴게요!
개인적으로 몇 가지 부분만 보완하시면 더 좋을 것 같습니다!
1. css, js 부분은 다른 파일로 분리해놓고 불러와서 사용하는 형태로 작성하신다면 더 좋을 것 같습니다. (코드 가독성 및 관리를 위해서요!)
2. 마지막에 footer 태그를 2번 사용하셨는데, 웬만하면 footer 태그 하나로 감싸고 그 안에서 margin-top을 적용하기 위한 태그를 하나 더 만들어서 스타일을 적용시키는 것을 추천드립니다.
3. 그리고 p-2 클래스가 적용된 div가 과도하게 많이 쓰이고 있는 것 같은데, 정말 해당 부분에 div태그를 써서 감싸는게 꼭 필요한 건지 한번만 더 점검해보시면 좋을 것 같습니다. 모든 줄을 다 div태그로 꼭 감싸야할 필요는 없습니다. 동일한 스타일을 적용시키고 싶으신거면 굳이 div태그 없이 클래스만 적용하는 방식을 고려해보셔도 괜찮을 것 같습니다.
마지막으로, 완성하셨다고 그냥 넘어가지 마시고 시간나실때 작성하신 코드 한번씩 더 살펴보시면서 조금 더 코드를 효율적으로 작성하기 위한 방법에 대해 연구해보시면 더욱 좋을 것 같습니다!
수고많으셨어요!

1개의 답글