<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>


    <!--    google font-->
    <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=Dongle&display=swap" rel="stylesheet">

    <!--css 파일 불러오기!-->
    <link href="/static/css/common.css" rel="stylesheet" type="text/css"/>

    <!--js 파일 불러오기-->
    <script defer src="/static/js/common.js"></script>

    <!--파비콘 적용-->
    <link rel="shortcut icon" href="/static/images/favicon_instagram.ico">

    <title>Instgram clone</title>
</head>
<body>
    <!--헤더 부분-->
    <div class="main_header" id="main_header">
        <div class="header_body">
            <div class="logo_box">
                <a href="https://velog.io/@kimphysicsman" style="float:left;">
                    <img style="margin-top: 10px" src="/static/images/logo_instagram.png">
                </a>
            </div>
            <div class="search_box">
                <button class="search_active_button" id="search_active_button"
                        onclick="active_search_input_box()"></button>
                <img class="search_icon" id="search_icon"
                     src="/static/images/icon_search.png">
                <input id="search_input_box" aria-label="입력 검색" class="search_input_box" autocapitalize="none"
                       placeholder="검색" type="text" value="">
            </div>
            <div class="header_icon_box">
                <a href="https://velog.io/@kimphysicsman"><img width="20px" height="20px"
                                                               src="/static/images/icon_home.png"></a>
                <a href="https://velog.io/@kimphysicsman"><img width="20px" height="20px"
                                                               src="/static/images/icon_share.png"></a>
                <a href="https://velog.io/@kimphysicsman"><img width="20px" height="20px" src="/static/images/icon_add.png"></a>
                <a href="https://velog.io/@kimphysicsman"><img width="20px" height="20px"
                                                               src="/static/images/icon_find.png"></a>
                <a href="https://velog.io/@kimphysicsman"><img width="20px" height="20px"
                                                               src="/static/images/icon_heart_empty.png"></a>
                <a href="https://velog.io/@kimphysicsman"><img class="img_circle" width="24px" height="24px"
                                                               src="/static/images/img_profile.jpg"></a>
            </div>
        </div>

    </div>

    <!--본문 부분-->
    <div class="main_body" id="main_body">
        <div class="post_box" id-="post_box">
            <div class="story_box">
                <div class="card" id="card">
                    <button type="button" class="bg_slide_button" id="bg_slide_button_left"
                            onclick="move_story_slide(0)">
                        <img width="12px" height="12px"
                             style="margin: -5px 0px 0px -2px"
                             src="/static/images/button_story_slide_left.png">
                    </button>
                     <button type="button" class="bg_slide_button" id="bg_slide_button_right"
                            onclick="move_story_slide(1)">
                        <img width="12px" height="12px"
                             style="margin: -5px 0px 0px -2px"
                             src="/static/images/button_story_slide_right.png">
                    </button>
                    <div class="card-body" id="stories">
                        <div style="width: 10px;"></div>
                        <div class="story">
                            <div class="story_img_box">
                                <img class="img_circle story_img_outline" width="56px" height="56px"
                                     src="/static/images/img_profile.jpg">
                            </div>
                            <p class="story_id">0 kimphysicsman</p>
                        </div>
                        <div class="story">
                            <div class="story_img_box">
                                <img class="img_circle story_img_outline" width="56px" height="56px"
                                     src="/static/images/img_profile.jpg">
                            </div>
                            <p class="story_id">1 kimphysicsman</p>
                        </div>
                        <div class="story">
                            <div class="story_img_box">
                                <img class="img_circle story_img_outline" width="56px" height="56px"
                                     src="/static/images/img_profile.jpg">
                            </div>
                            <p class="story_id">2 kimphysicsman</p>
                        </div>
                        <div class="story">
                            <div class="story_img_box">
                                <img class="img_circle story_img_outline" width="56px" height="56px"
                                     src="/static/images/img_profile.jpg">
                            </div>
                            <p class="story_id">3 kimphysicsman</p>
                        </div>
                        <div class="story">
                            <div class="story_img_box">
                                <img class="img_circle story_img_outline" width="56px" height="56px"
                                     src="/static/images/img_profile.jpg">
                            </div>
                            <p class="story_id">4 kimphysicsman</p>
                        </div>
                        <div class="story">
                            <div class="story_img_box">
                                <img class="img_circle story_img_outline" width="56px" height="56px"
                                     src="/static/images/img_profile.jpg">
                            </div>
                            <p class="story_id">5 kimphysicsman</p>
                        </div>
                        <div class="story">
                            <div class="story_img_box">
                                <img class="img_circle story_img_outline" width="56px" height="56px"
                                     src="/static/images/img_profile.jpg">
                            </div>
                            <p class="story_id">6 kimphysicsman</p>
                        </div>
                        <div class="story">
                            <div class="story_img_box">
                                <img class="img_circle story_img_outline" width="56px" height="56px"
                                     src="/static/images/img_profile.jpg">
                            </div>
                            <p class="story_id">7 kimphysicsman</p>
                        </div>
                        <div class="story">
                            <div class="story_img_box">
                                <img class="img_circle story_img_outline" width="56px" height="56px"
                                     src="/static/images/img_profile.jpg">
                            </div>
                            <p class="story_id">8 kimphysicsman</p>
                        </div>
                        <div class="story">
                            <div class="story_img_box">
                                <img class="img_circle story_img_outline" width="56px" height="56px"
                                     src="/static/images/img_profile.jpg">
                            </div>
                            <p class="story_id">9 kimphysicsman</p>
                        </div>

                    </div>

                </div>
            </div>

            <div class="card posts">
                <div class="card-body post">
                    <div class="post_header">
                        <div class="post_header_main">
                            <img class="img_circle" width="32px" height="32px"
                                 src="/static/images/img_profile.jpg">
                            <a class="post_header_main_id"
                               href="https://velog.io/@kimphysicsman">
                                kimphysicsman
                            </a>
                        </div>
                        <div class="post_header_more">
                            <div class="post_header_more_btn_box">
                                <a href="https://velog.io/@kimphysicsman">
                                    <img width="20px" height="20px"
                                         src="/static/images/icon_menu_dots.png">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="post_img">
                        <img width="100%" src="/static/images/img_post.jpg">

                    </div>
                    <div class="post_icon_box">

                    </div>
                    <div class="post_comment_box">

                    </div>
                    <div class="post_comment_input_box">

                    </div>
                </div>
            </div>

        </div>

        <div class="profile_box" id="profile_box">
            <div class="my_account">
                <div class="my_profile" onclick="location.href='https://velog.io/@kimphysicsman';">
                    <img class="img_circle" width="56px" height="56px" src="/static/images/img_profile.jpg">
                </div>
                <div class="my_id" onclick="location.href='https://velog.io/@kimphysicsman';">
                    <p style="line-height: 0.5; font-weight: 500">kimphysicsman</p>
                    <p style="line-height: 0.3; color: #909090;">DongWoo Kim</p>
                </div>
                <div class="my_trans_button">
                    <a href="https://velog.io/@kimphysicsman">전환</a>
                </div>
            </div>

            <div class="other_accounts">
                <div class="other_accounts_title">
                    <p style="color: #909090; margin-bottom: 0px">
                        회원님을 위한 추천</p>
                    <p style="font-size: 12px; margin-bottom: 0px">모두 보기</p>
                </div>
                <div class="other_accounts_body">
                    <div class="other_account">
                        <div class="other_profile" onclick="location.href='https://velog.io/@kimphysicsman';">
                            <img class="img_circle" width="32px" height="32px" src="/static/images/img_profile.jpg">
                        </div>
                        <div class="other_id" onclick="location.href='https://velog.io/@kimphysicsman';">
                            <p style="line-height: 0.1; font-weight: 500">jun9._.k</p>
                            <p style="line-height: 0.1; color: #909090; font-size: 12px">bongsem님이 팔로우합니다.</p>
                        </div>
                        <div class="other_follow_button">
                            <a href="https://velog.io/@kimphysicsman">팔로우</a>
                        </div>
                    </div>
                    <div class="other_account">
                        <div class="other_profile" onclick="location.href='https://velog.io/@kimphysicsman';">
                            <img class="img_circle" width="32px" height="32px" src="/static/images/img_profile.jpg">
                        </div>
                        <div class="other_id" onclick="location.href='https://velog.io/@kimphysicsman';">
                            <p style="line-height: 0.1; font-weight: 500">jun9._.k</p>
                            <p style="line-height: 0.1; color: #909090; font-size: 12px">bongsem님이 팔로우합니다.</p>
                        </div>
                        <div class="other_follow_button">
                            <a href="https://velog.io/@kimphysicsman">팔로우</a>
                        </div>
                    </div>
                    <div class="other_account">
                        <div class="other_profile" onclick="location.href='https://velog.io/@kimphysicsman';">
                            <img class="img_circle" width="32px" height="32px" src="/static/images/img_profile.jpg">
                        </div>
                        <div class="other_id" onclick="location.href='https://velog.io/@kimphysicsman';">
                            <p style="line-height: 0.1; font-weight: 500">jun9._.k</p>
                            <p style="line-height: 0.1; color: #909090; font-size: 12px">bongsem님이 팔로우합니다.</p>
                        </div>
                        <div class="other_follow_button">
                            <a href="https://velog.io/@kimphysicsman">팔로우</a>
                        </div>
                    </div>
                    <div class="other_account">
                        <div class="other_profile" onclick="location.href='https://velog.io/@kimphysicsman';">
                            <img class="img_circle" width="32px" height="32px" src="/static/images/img_profile.jpg">
                        </div>
                        <div class="other_id" onclick="location.href='https://velog.io/@kimphysicsman';">
                            <p style="line-height: 0.1; font-weight: 500">jun9._.k</p>
                            <p style="line-height: 0.1; color: #909090; font-size: 12px">bongsem님이 팔로우합니다.</p>
                        </div>
                        <div class="other_follow_button">
                            <a href="https://velog.io/@kimphysicsman">팔로우</a>
                        </div>
                    </div>
                    <div class="other_account">
                        <div class="other_profile" onclick="location.href='https://velog.io/@kimphysicsman';">
                            <img class="img_circle" width="32px" height="32px" src="/static/images/img_profile.jpg">
                        </div>
                        <div class="other_id" onclick="location.href='https://velog.io/@kimphysicsman';">
                            <p style="line-height: 0.1; font-weight: 500">jun9._.k</p>
                            <p style="line-height: 0.1; color: #909090; font-size: 12px">bongsem님이 팔로우합니다.</p>
                        </div>
                        <div class="other_follow_button">
                            <a href="https://velog.io/@kimphysicsman">팔로우</a>
                        </div>
                    </div>
                </div>

            </div>
            <div class="footer" id="footer">
                <a href="https://velog.io/@kimphysicsman">소개</a> ·
                <a href="https://velog.io/@kimphysicsman">도움말</a> ·
                <a href="https://velog.io/@kimphysicsman">홍보 센터</a> ·
                <a href="https://velog.io/@kimphysicsman">API</a> ·
                <a href="https://velog.io/@kimphysicsman">채용 정보</a>
                <br>
                <a href="https://velog.io/@kimphysicsman">개인정보처리방침</a> ·
                <a href="https://velog.io/@kimphysicsman">약관</a> ·
                <a href="https://velog.io/@kimphysicsman">위치</a> ·
                <a href="https://velog.io/@kimphysicsman">인기 계정</a> ·
                <a href="https://velog.io/@kimphysicsman">해시태그</a>
                <br>
                <a href="https://velog.io/@kimphysicsman">언어</a>
                <br>
                <br>
                <p>© 2022 INSTAGRAM FROM META</p>
            </div>
        </div>
    </div>


</body>
</html>
.main_header {
    background-color: white;
    width: 100%;
    height: 60px;

    position: fixed;
    top: 0px;

    z-index: 9999;
}

#main_header{
    border-bottom-width: 1px;
    border-bottom-color: #e0e0e0;
    border-bottom-style: solid;
}

.header_body {
    width: 975px;
    height: 100%;
    margin: auto;
    padding: 0 20px 0 20px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.logo_box {
    width: 30%;
    height: 36px;
    float: left;
}

.search_box{
    width: 270px;
    height: 36px;

    background-color: #f0f0f0;
    border-radius: 10px;

    position: relative;
}

.search_input_box{
    width: 70%;
    height: 100%;

    border-width: 0;
    outline: none;

    display: block;
    margin: auto;
    background-color: #f0f0f0;
}

.search_active_button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    opacity: 0;
    position: absolute;
}

.search_icon {
    opacity: 0.5;
    margin-top: 8px;
    margin-left: 10px;

    width: 20px;
    height: 20px;

    position: absolute;
}


.header_icon_box{
    width: 270px;
    height: 100%;
    padding-left: 20px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}



.img_circle {
    border-radius: 50%;
}

.main_body{
    width: 935px;
    height: 1000px;

    margin: 90px auto 0 auto;
    display: flex;
    flex-direction: row;
    align-items: normal;
    justify-content: space-between;

    position: relative;
}

.profile_box{
    width: 293px;
    height: 500px;
    background-color: white;

    top: 100px;
    position: fixed;
    z-index: 9999;
}

.my_account {
    width: 100%;
    height: 56px;
    margin: 18px 0px 10px 0px;

    display: flex;
    flex-direction: row;
    align-items: normal;
    justify-content: space-between;
}

.my_profile {
    width: 56px;
    height: 100%;
    cursor:pointer;
}

.my_id {
    width: 187px;
    height: 100%;
    font-size: 15px;
    padding-top: 12px;
    cursor:pointer;
}

.my_trans_button {
    width: 24px;
    height: 100%;

    font-weight: bolder;
    font-size: 12px;
    padding-top: 20px;
}

.other_accounts {
    width: 100%;
    height: 291px;
    margin-top: 18px;
}


.other_accounts_title {
    width: 100%;
    height: 19px;
    margin-top: 18px;

    font-size: 14px;
    font-weight: bolder;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.other_accounts_body {
    width: 100%;
    height: 256px;
    padding-top: 8px;
}


.other_account {
    width: 100%;
    height: 48px;
    padding: 8px 0px 0px 8px;

    display: flex;
    flex-direction: row;
    align-items: normal;
    justify-content: space-between;
}

.other_profile {
    width: 48px;
    height: 100%;
    cursor:pointer;
}

.other_id {
    width: 201px;
    height: 100%;
    font-size: 14px;
    padding-top: 8px;
    cursor:pointer;
}

.other_follow_button {
    width: 40px;
    height: 100%;

    font-weight: bolder;
    font-size: 12px;

    padding-top: 12px;
}

#footer {
    border-top-width: 1px;
    border-top-color: #e0e0e0;
    border-top-style: solid;
}

.footer {
    padding-top: 10px;
    font-size: 12px;
    color: #c7c7c7;
}
.footer > a {
    text-decoration: none;
    color: #c7c7c7;
}

.post_box{
    width: 614px;
    height: 1000px;

    margin: 0px 28px 0px 0px;
}

.story_box {
    width: 100%;
    height: 120px;

    margin: 0px 0px 24px 0px;
}

#bg_slide_button_left {
    left: 10px;
    display: none;
}

#bg_slide_button_right {
    right: 10px;
}

.bg_slide_button {
    width: 24px;
    height: 24px;
    top:35%;

    position: absolute;
    background-color: white;

    border-radius: 50%;
    z-index: 100;

    padding-top: -10px;
    padding-left: 5px;

    outline: none;
    border: none;

    box-shadow: 1px 1px 10px grey;
    opacity: 0.8;

    cursor:pointer;
    transition: opacity 1s, transform 1s;
}

#card {
    overflow-x: hidden;

    width: 100%;
    height: 100%;
}

#card-body {

}

#stories {
    padding: 16px 0px 16px 0px;

    display: flex;
    flex-direction: row;
    align-items: normal;
    justify-content: left;

    width: 800px;
    height: 100%;
    margin-left: 0px;

    transition: margin-left 0.5s, transform 0.5s;
}

.story {
    width: 80px;
    height: 84px;
    padding: 0px 4px 0px 4px;
}

.story_id {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story_img_box {
    width: 66px;
    height: 66px;

    border: 3px solid transparent;
    border-radius: 50%;
    background-image: linear-gradient(45deg, #ffffff, #ff9933, #ff0000, #ff0099, #990099);
    background-origin: border-box;
    background-clip: content-box, border-box;

}

.story_img_outline {
    border: 3px solid transparent;
    border-radius: 50%;
    border-color: white;

    margin: 2px auto;
    display: block;
}

.posts {
    width: 100%;
    height: 50%;
}

.post {
    width: 100%;
    padding: 0px;
}

.post_header{
    width: 100%;
    height: 60px;

    display: flex;
    flex-direction: row;
    align-items: normal;
    justify-content: left;
}

.post_header_main {
    width: 554px;
    height: 100%;

    padding: 14px 4px 14px 16px;

    display: flex;
    flex-direction: row;
    align-items: normal;
    justify-content: left;
}

.post_header_main_id {
    font-size: 14px;
    font-weight: 600;

    margin-left: 14px;
    margin-top: 5px;

    text-decoration: none;
    color: black;
}

.post_header_more {
    width: 60px;
    height: 100%;
}

.post_header_more_btn_box{
    width: 40px;
    height: 40px;
    padding: 8px;
    margin: 10px auto auto auto;
}


@media (max-width: 935px){
    .header_body {
        width: 100%
    }

    #profile_box {
        display: none;
    }

    #main_body {
        width: 614px;
    }

    .post_box {
        margin-right: 0;
    }

}
@media (max-width: 640px){
    .search_box {
        display: none;
    }

    #main_body {
        width: 100%;
    }
}

// 검색창 활성화시키는 함수
function active_search_input_box() {
    $('#search_icon').css("display", "none")
    $('#search_active_button').css("display", "none")
    $('#search_input_box').css("width", "90%")
    $('#search_input_box').focus()
}

// profile 마진값 계산하는 함수
function update_profile_margin() {
    let screen_width = $(window).width()
    let self_width = $('#main_body').width()
    let margin = screen_width - self_width
    let margin_right = (margin/2).toString()

    let str = margin_right + "px"
    $('#profile_box').css("right", str)
}

// 스토리 슬라이드 함수
// vector : 슬라이드 방향 - 0:왼쪽, 1:오른쪽
function move_story_slide(vector) {
    let margin_text = $('#stories').css('margin-left')
    let width_text = $('#stories').css('width')
    let box_text = $('#card').css('width')

    let margin_num = Number(margin_text.slice(0, -2))
    let width_num = Number(width_text.slice(0, -2))
    let box_num = Number(box_text.slice(0, -2))

    let max_margin = 0  // 최대 마진 값
    let move_margin = 150   // 한번 이동할 때 움직일 마진 값

    if (width_num > box_num) {
         max_margin = width_num - box_num
    }

    if (vector == 1) {
        if (margin_num == 0) {
            $('#bg_slide_button_left').css("opacity", "1")
            $('#bg_slide_button_left').css("display", "block")
        }
        margin_num = margin_num - move_margin
        if (margin_num < -1 * max_margin) {
            margin_num = -1 * max_margin
            $('#bg_slide_button_right').css("opacity", "0")
            $('#bg_slide_button_right').css("display", "none")
        }
    } else {
        if (margin_num == -1 * max_margin) {
            $('#bg_slide_button_right').css("opacity", "1")
            $('#bg_slide_button_right').css("display", "block")
        }
        margin_num = margin_num + move_margin
        if (margin_num > 0) {
            margin_num = 0
            $('#bg_slide_button_left').css("opacity", "0")
            $('#bg_slide_button_left').css("display", "none")
        }
    }
    let update_margin = (margin_num).toString() + "px"

    $('#stories').css('margin-left', update_margin)

    console.log(margin_text, width_text, box_text)
    console.log(margin_num, width_num, box_num)
    console.log(max_margin, update_margin)
}


// 로딩시 profile 마진값 다시 계산
$(document).ready(function () {
    update_profile_margin()
})

$(function(){
    // 마우스 클릭한 후
    // 검색창에 클릭한 것이 아니면
    // 활성화된 검색창을 이전 상태로
    $(document).mouseup(function( e ){
    if( !($('#search_input_box').is(":focus")) ) {
        $('#search_icon').css("display", "block")
        $('#search_active_button').css("display", "block")
        $('#search_input_box').css("width", "70%")
    }
    });

    // 화면 사이즈 변경 시
    // profile 마진값 다시 계산
    $(window).resize(function() {
        update_profile_margin()
    });

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.