인스타그램 클론코딩

이민기·2022년 5월 2일

Instagram Clone

인스타그램 클론코딩을 진행해 보았다.

코드가 너무 지저분 하여 이해 해주시길 바라겠습니다!

header 부분

<div class="topbox d-flex justify-content-around sticky-top navbar-light bg-light">
    <div class="d-flex nav sticky-top row navbar-light justify-content-center align-items-center">
        <div class="col logo d-flex justify-content-start">
            <img src="img/logo.png" alt="logo" srcset="">
        </div>

        <div id="serch_input" class="serch_input col-4 d-flex align-items-center">
            <div class="serch-box2 position-absolute">
                <div class="p-2 font-weight" style="color:black">최근 검색 항목
                </div>
                <div class="d-flex wd-300 align-items-center justify-content-center">
                    <div>최근 검색 내역 없음.</div>
                </div>
            </div>
            
                <div class="mag"><i class="fa-solid fa-magnifying-glass"></i></div>
                <input class="rounded serch_text" type="text" placeholder="검색">
            </div>

            <div class="justify-content-center d-flex align-items-center menu_icon">
                <a href="index.html"><i class="icons fa-solid fa-house fa-lg"></i></a>
                <a href="https://velog.io/@psjlmk"><i class="icons fa-solid fa-paper-plane fa-lg"></i></a>
                <i class="icons fa-solid fa-compass fa-lg"></i>
                <i class="icons fa-solid fa-heart fa-lg"></i>
                <a href="profile.html">
                    <div class="profile_img">
                        <img src="https://file.mk.co.kr/meet/yonhap/2022/02/11/image_readtop_2022_130471_0_183511.jpg"
                            alt="" srcset="">
                    </div>
                </a>
            </div>
        </div>
    </div>

일단 메인 박스를 하나 만들고 flex justify-content : space-around 를 이용해 div 박스들을 배치해 주었다.

헤더는 postion sticky로 맨위에 고정해 놓았습니다.

첫번째 주요 기능으로는 검색창을 focus 하였을때 돋보기가 사라지고 검색 글자가 앞으로 나오는 부분 입니다

일단 input 클래스에 placeholder의 왼쪽 padding 을 주었고요.

이후 focus 되었을때 padding을 없애는 방식으로 적용 하였습니다.

돋보기는 focus 되었을때 요소가 hide 될수 있게 제이쿼리로 작성 되었습니다.

돋보기 클래스 박스 숨기기

    $('.serch_text').focus(function () {
        $('.mag').hide()
    });
    $('.serch_text').blur(function () {
        $('.mag').show()
    });

또한 검색창을 포커스 하였을경우 아래 최근 검색이 보여질수 있게 하였습니다.

마찬가지로 앱솔루트로 박스를 만들어서 바로 아래 배치될수 있게 show hide를 이용하였습니다.

픽셀이 줄었을때는 검색창을 제이쿼리 css 추가 기능으로 보이지 않게 만들어 두었습니다.

        <div class="feed_content">

            <div class="member_story d-flex justify-content-start align-items-center">
                <div class="story_box">
                    <div class="story_list"><img class="img-fluid"
                            src="http://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2021/09/16/a20396a1-288b-4b43-9ef8-e74b6b9709f0.jpg"
                            alt="" srcset=""></div>helloworld
                </div>
                <div class="story_box">
                    <div class="story_list"><img class="img-fluid"
                            src="http://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2021/09/16/a20396a1-288b-4b43-9ef8-e74b6b9709f0.jpg"
                            alt="" srcset=""></div>helloworld
                </div>
                <div class="story_box">
                    <div class="story_list"><img class="img-fluid"
                            src="http://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2021/09/16/a20396a1-288b-4b43-9ef8-e74b6b9709f0.jpg"
                            alt="" srcset=""></div>helloworld

                </div>
                <div class="story_box">
                    <div class="story_list"><img class="img-fluid"
                            src="http://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2021/09/16/a20396a1-288b-4b43-9ef8-e74b6b9709f0.jpg"
                            alt="" srcset=""></div>helloworld
                </div>
            </div>
            <!-- ----- -->
            <div>
                <div class="position-relative account_info d-flex align-items-center justify-content-start">
                    <div class="account_info_box d-flex align-items-center">
                        <div class="thum_img"><img
                                src="https://file.mk.co.kr/meet/yonhap/2022/02/11/image_readtop_2022_130471_0_183511.jpg"
                                alt="" srcset=""></div>
                        <div class="account_name">helloworld</div>
                        <div class="account_sub_menu position-absolute"><i class="fa-solid fa-ellipsis"></i></div>
                    </div>
                </div>

                <div class="photo">
                    <div class="slider">
                        <div class="slider_img"><img class="img-fluid" src="img/1.jpg"></div>
                        <div><img class="img-fluid" src="img/2.jpg"></div>
                        <div><img class="img-fluid" src="img/3.jpg"></div>
                    </div>
                </div>

                <div class="comment_info_box pb-3">

                    <div class="d-flex position-relative like_button align-items-center">

                        <div class="position-relative d-flex align-items-center like_button_box">
                            <div onclick="likeon()" class="like_button_no_click"><i
                                    class="fa-regular fa-heart fa-lg"></i>
                            </div>
                            <div onclick="likeoff()" class="like_button_click"><i class="fa-solid fa-heart fa-lg"></i>
                            </div>
                            <div class="left-margin-15"><i class="fa-regular fa-comment fa-lg"></i></div>
                            <div class="left-margin-15"><i class="fa-regular fa-paper-plane"></i></div>

                        </div>
                        <div class="position-absolute save_button"><i class="fa-regular fa-bookmark"></i></div>

                    </div>
                    <div class="like-text">
                        <div class="d-flex align-items-center like_info">
                            좋아요 107개
                        </div>
                    </div>

                    <div class="d-flex align-items-center comment_count mb-1">
                        <div class="font-weight col-2">helloworld</div>
                        <div class="overtext content_t">좋은하루 보내시길 바라겠습니다! 화이팅!!!asdasdasdasdasd</div>
                        <div class="col mx-2">더보기</div>
                    </div>

                    <div class="c_count mb-2">댓글 7개 모두 보기</div>

                    <div id="comment_post" class="write_content mb-1">

                        <div class="position-relative d-flex align-items-center mb-1">
                            <div class="font-weight col-2">황영상</div>
                            <div class="overtext comment_text">댓글남기고 가요! 좋은하루 되세요❤️❤️❤️</div>
                            <div class="position-absolute comment-heart"><i class="fa-regular fa-heart"></i></div>
                        </div>

                        <div class="position-relative d-flex align-items-center mb-1">
                            <div class="font-weight col-2">주정한</div>
                            <div class="overtext comment_text">완전 최고가 아닌가 싶습니다!❤️❤️❤️</div>
                            <div class="position-absolute comment-heart"><i class="fa-regular fa-heart"></i></div>
                        </div>

                        <div class="position-relative d-flex align-items-center mb-1">
                            <div class="font-weight col-2">김하진</div>
                            <div class="overtext comment_text">행복하세요 최고최고!!❤️❤️❤️</div>
                            <div class="position-absolute comment-heart"><i class="fa-regular fa-heart"></i></div>
                        </div>

                    </div>

                    <div class="time">
                        1일전
                    </div>

                </div>

                <div class="comment_write d-flex align-items-center">

                    <div class="px-2"><i class="fa-regular fa-face-smile-beam fa-lg"></i></div>
                    <form id="alpreah_input">
                        <div class="comment_input">
                            <input id="comment_input" type="text" placeholder="댓글 달기...">
                        </div>
                        </from>

                </div>

            </div>
            <!-- ----- -->

            <!-- ----- -->
            <div class="mt-5">
                <div class="position-relative account_info d-flex align-items-center justify-content-start">
                    <div class="account_info_box d-flex align-items-center">
                        <div class="thum_img"><img
                                src="https://file.mk.co.kr/meet/yonhap/2022/02/11/image_readtop_2022_130471_0_183511.jpg"
                                alt="" srcset=""></div>
                        <div class="account_name">helloworld</div>
                        <div class="account_sub_menu position-absolute"><i class="fa-solid fa-ellipsis"></i></div>
                    </div>
                </div>

                <div class="photo">
                    <div class="slider">
                        <div class="slider_img"><img class="img-fluid" src="img/1.jpg"></div>
                        <div><img class="img-fluid" src="img/2.jpg"></div>
                        <div><img class="img-fluid" src="img/3.jpg"></div>
                    </div>
                </div>

                <div class="comment_info_box pb-3">

                    <div class="d-flex position-relative like_button align-items-center">

                        <div class="position-relative d-flex align-items-center like_button_box">
                            <div onclick="likeon()" class="like_button_no_click"><i
                                    class="fa-regular fa-heart fa-lg"></i>
                            </div>
                            <div onclick="likeoff()" class="like_button_click"><i class="fa-solid fa-heart fa-lg"></i>
                            </div>
                            <div class="left-margin-15"><i class="fa-regular fa-comment fa-lg"></i></div>
                            <div class="left-margin-15"><i class="fa-regular fa-paper-plane"></i></div>

                        </div>
                        <div class="position-absolute save_button"><i class="fa-regular fa-bookmark"></i></div>

                    </div>
                    <div class="like-text">
                        <div class="d-flex align-items-center like_info">
                            좋아요 107개
                        </div>
                    </div>

                    <div class="d-flex align-items-center comment_count mb-1">
                        <div class="font-weight col-2">helloworld</div>
                        <div class="overtext content_t">좋은하루 보내시길 바라겠습니다! 화이팅!!!asdasdasdasdasd</div>
                        <div class="col mx-2">더보기</div>
                    </div>

                    <div class="c_count mb-2">댓글 7개 모두 보기</div>

                    <div id="comment_post" class="write_content mb-1">

                        <div class="position-relative d-flex align-items-center mb-1">
                            <div class="font-weight col-2">황영상</div>
                            <div class="overtext comment_text">댓글남기고 가요! 좋은하루 되세요❤️❤️❤️</div>
                            <div class="position-absolute comment-heart"><i class="fa-regular fa-heart"></i></div>
                        </div>

                        <div class="position-relative d-flex align-items-center mb-1">
                            <div class="font-weight col-2">주정한</div>
                            <div class="overtext comment_text">완전 최고가 아닌가 싶습니다!❤️❤️❤️</div>
                            <div class="position-absolute comment-heart"><i class="fa-regular fa-heart"></i></div>
                        </div>

                        <div class="position-relative d-flex align-items-center mb-1">
                            <div class="font-weight col-2">김하진</div>
                            <div class="overtext comment_text">행복하세요 최고최고!!❤️❤️❤️</div>
                            <div class="position-absolute comment-heart"><i class="fa-regular fa-heart"></i></div>
                        </div>

                    </div>

                    <div class="time">
                        1일전
                    </div>

                </div>

                <div class="comment_write d-flex align-items-center">

                    <div class="px-2"><i class="fa-regular fa-face-smile-beam fa-lg"></i></div>
                    <form id="alpreah_input">
                        <div class="comment_input">

                            <input id="comment_input" type="text" placeholder="댓글 달기...">
                        </div>
                        </from>

                </div>

            </div>
            <!-- ----- -->

            <!-- ----- -->
            <div class="mt-5">
                <div class="position-relative account_info d-flex align-items-center justify-content-start">
                    <div class="account_info_box d-flex align-items-center">
                        <div class="thum_img"><img
                                src="https://file.mk.co.kr/meet/yonhap/2022/02/11/image_readtop_2022_130471_0_183511.jpg"
                                alt="" srcset=""></div>
                        <div class="account_name">helloworld</div>
                        <div class="account_sub_menu position-absolute"><i class="fa-solid fa-ellipsis"></i></div>
                    </div>
                </div>

                <div class="photo">
                    <div class="slider">
                        <div class="slider_img"><img class="img-fluid" src="img/1.jpg"></div>
                        <div><img class="img-fluid" src="img/2.jpg"></div>
                        <div><img class="img-fluid" src="img/3.jpg"></div>
                    </div>
                </div>

                <div class="comment_info_box pb-3">

                    <div class="d-flex position-relative like_button align-items-center">

                        <div class="position-relative d-flex align-items-center like_button_box">
                            <div onclick="likeon()" class="like_button_no_click"><i
                                    class="fa-regular fa-heart fa-lg"></i>
                            </div>
                            <div onclick="likeoff()" class="like_button_click"><i class="fa-solid fa-heart fa-lg"></i>
                            </div>
                            <div class="left-margin-15"><i class="fa-regular fa-comment fa-lg"></i></div>
                            <div class="left-margin-15"><i class="fa-regular fa-paper-plane"></i></div>

                        </div>
                        <div class="position-absolute save_button"><i class="fa-regular fa-bookmark"></i></div>

                    </div>
                    <div class="like-text">
                        <div class="d-flex align-items-center like_info">
                            좋아요 107개
                        </div>
                    </div>

                    <div class="d-flex align-items-center comment_count mb-1">
                        <div class="font-weight col-2">helloworld</div>
                        <div class="overtext content_t">좋은하루 보내시길 바라겠습니다! 화이팅!!!asdasdasdasdasd</div>
                        <div class="col mx-2">더보기</div>
                    </div>

                    <div class="c_count mb-2">댓글 7개 모두 보기</div>

                    <div id="comment_post" class="write_content mb-1">

                        <div class="position-relative d-flex align-items-center mb-1">
                            <div class="font-weight col-2">황영상</div>
                            <div class="overtext comment_text">댓글남기고 가요! 좋은하루 되세요❤️❤️❤️</div>
                            <div class="position-absolute comment-heart"><i class="fa-regular fa-heart"></i></div>
                        </div>

                        <div class="position-relative d-flex align-items-center mb-1">
                            <div class="font-weight col-2">주정한</div>
                            <div class="overtext comment_text">완전 최고가 아닌가 싶습니다!❤️❤️❤️</div>
                            <div class="position-absolute comment-heart"><i class="fa-regular fa-heart"></i></div>
                        </div>

                        <div class="position-relative d-flex align-items-center mb-1">
                            <div class="font-weight col-2">김하진</div>
                            <div class="overtext comment_text">행복하세요 최고최고!!❤️❤️❤️</div>
                            <div class="position-absolute comment-heart"><i class="fa-regular fa-heart"></i></div>
                        </div>

                    </div>

                    <div class="time">
                        1일전
                    </div>

                </div>

                <div class="comment_write d-flex align-items-center">

                    <div class="px-2"><i class="fa-regular fa-face-smile-beam fa-lg"></i></div>
                    <form id="alpreah_input">
                        <div class="comment_input">

                            <input id="comment_input" type="text" placeholder="댓글 달기...">
                        </div>
                        </from>

                </div>

            </div>
            <!-- ----- -->


        </div>

feed 컨테츠 부분 입니다.

주요 기능으로는 bxslider 기능 입니다.

제이쿼리 bxslider를 가져와서 적용 하였습니다.

댓글 작성 기능도 추가 하였습니다.

서버에 저장은 안되지만 작성한 내용이 계속 추가 됩니다.

댓글은 버튼을 만들지 않고 엔터키가 입력되면 바로 실행되게 하였습니다.

form 으로 만들었고 제이쿼리로 작성 하였습니다.

아래 코드를 참고해 주세요.

    $("#alpreah_input").keydown(function (key) {
        if (key.keyCode == 13) {
            comment_text = $('#comment_input').val()
            html = `<div class="position-relative d-flex align-items-center mb-1">
            <div class="font-weight col-2">이민기</div>
            <div class="overtext comment_text">${comment_text}</div>
            <div class="position-absolute comment-heart"><i class="fa-regular fa-heart"></i></div>
        </div>`
            $('#comment_input').val('')
            $('#comment_post').append(html)
        }
        // return false
    });

키다운 이벤트를 이용했고 해당 id값이 keydown 할시 그 키 코드가 13번 즉 엔터키 이라면,
아래 내용을 실행 합니다.

좋아요 버튼을 누를시 좋아요 아이콘이 빨간색으로 변하면서 좋아요가 눌렸다는걸 확인해 줍니다.

js 함수를 만들어서 제이쿼리 show hide로 구현 하였습니다.

우측 정보

   <div class="col-4 member_info">

            <div class="py-2">

                <div class="px-1 position-relative d-flex align-items-center">

                    <div class="profile"><img class="img-fluid"
                            src="http://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2021/09/16/a20396a1-288b-4b43-9ef8-e74b6b9709f0.jpg"
                            alt="" srcset=""></div>
                    <div class="px-3">

                        <div class="font-weight" style="font-size:14px">
                            leeminki
                        </div>

                        <div style="font-size:14px; color: #8e8e8e;">
                            이민기
                        </div>

                    </div>

                    <div class="account_change position-absolute">
                        전환
                    </div>

                </div>



            </div>

            <div class="position-relative d-flex align-items-center member_recommend">
                <div class="font-weight" style="font-size: 14px; color: #8e8e8e;">회원님을 위한 추천</div>
                <div class="position-absolute font-weight all-view" style="font-size: 12px; color: #262626;">모두 보기</div>
            </div>

            <div class="follow_member">
                <div class="px-1 position-relative d-flex align-items-center account_profile">

                    <div class="follow_member_img"><img class="img-fluid"
                            src="http://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2021/09/16/a20396a1-288b-4b43-9ef8-e74b6b9709f0.jpg"
                            alt="" srcset=""></div>
                    <div class="px-3">

                        <div class="font-weight" style="font-size:14px">
                            leeminki
                        </div>

                        <div style="font-size:12px; color: #8e8e8e;">
                            leeminki님이 팔로우합니다
                        </div>

                    </div>

                    <div class="member_follow_button position-absolute">
                        팔로우
                    </div>

                </div>

                <div class="px-1 position-relative d-flex align-items-center account_profile">

                    <div class="follow_member_img"><img class="img-fluid"
                            src="http://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2021/09/16/a20396a1-288b-4b43-9ef8-e74b6b9709f0.jpg"
                            alt="" srcset=""></div>
                    <div class="px-3">

                        <div class="font-weight" style="font-size:14px">
                            leeminki
                        </div>

                        <div style="font-size:12px; color: #8e8e8e;">
                            leeminki님이 팔로우합니다
                        </div>

                    </div>

                    <div class="member_follow_button position-absolute">
                        팔로우
                    </div>

                </div>

                <div class="px-1 position-relative d-flex align-items-center account_profile">

                    <div class="follow_member_img"><img class="img-fluid"
                            src="http://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2021/09/16/a20396a1-288b-4b43-9ef8-e74b6b9709f0.jpg"
                            alt="" srcset=""></div>
                    <div class="px-3">

                        <div class="font-weight" style="font-size:14px">
                            leeminki
                        </div>

                        <div style="font-size:12px; color: #8e8e8e;">
                            leeminki님이 팔로우합니다
                        </div>

                    </div>

                    <div class="member_follow_button position-absolute">
                        팔로우
                    </div>

                </div>

                <div class="footer">
                    <p>내일배움 캠프 2회차 개인과제 '인스타그램 클론코딩'</p>
                    <p>Code by. 이민기</p>
                    <p>내일배움 캠프 13조</p>
                    <p>오늘도 화이팅 하세요! 아자아자!</p>
                    <br>
                    <p>© 2022 INSTAGRAM FROM META</p>
                </div>
            </div>



        </div>

메인페이지 우측 정보 부분 입니다.

포지션 sticky 로 고정 하였습니다.

스크롤시 우측은 고정되고 피드 부분만 움직여 집니다.

고정에 박스 아래 하단 정보를 넣었습니다.

화면이 줄어들면 우측 정보 박스가 사라지는 효과를 미디어 쿼리를 이용해 넣었습니다.

프로필 페이지

<div class="feed_modal position-fixed">
    <div class="feed_modal_body">
        <div class="modal_photo">
            <img class="img-fluid" src="img/1.jpg" alt="" srcset="">
        </div>
        <div class="modal_content">
            <div class="modal_account">
                <div class="modal_account_img"><img class="pr_img" src="img/1.jpg" alt="" srcset=""></div>
                <div class="font-weight" style="font-size: 14px; padding: 0 0 0 12px;">conding_min</div>
                <div class="modal_menu_btn">
                    <div><i class="fa-solid fa-ellipsis"></i></div>
                </div>
                </div>

            <div class="modal_commnet">
                <div class="modal_comment_account">
                    <div class="modal_account_img"><img class="pr_img" src="img/1.jpg" alt="" srcset=""></div>
                    <div class="font-weight" style="font-size: 14px; padding: 0 10px 0 12px;">conding_min</div>
                    <div class="modal_comment_text">안녕하세요 제가 처음으로 댓글 남깁니다^^</div>
                </div>
                <div class="modal_time">
                    <div>1일전</div>
                    <div>답글 달기</div>
                </div>
            </div>
            <div class="body_like_button_box">
                <div class="d-flex position-relative align-items-center"> 
                    <div class="position-relative d-flex align-items-center">
                        <div onclick="likeon()" class="like_button_no_click"><i class="fa-regular fa-heart fa-lg"></i>
                        </div>
                        <div onclick="likeoff()" class="like_button_click"><i class="fa-solid fa-heart fa-lg"></i></div>
                        <div class="left-margin-15"><i class="fa-regular fa-comment fa-lg"></i></div>
                        <div class="left-margin-15"><i class="fa-regular fa-paper-plane"></i></div>
                        <div class="modal_save">
                        <div class="save_button"><i class="fa-regular fa-bookmark"></i></div>
                        </div>
                    </div>
                </div>
                <div>
                   <div class="font-weight" style="font-size:14px; padding-top: 15px;">좋아요 750개</div>
                </div>
            </div>

            <div class="d-flex align-items-center">
                <div class="px-3"><i class="fa-regular fa-face-smile-beam fa-lg"></i></div>
                <form id="alpreah_input">
                    <div class="modal_comment_input">
                        <input id="modal_comment_input" type="text" placeholder="댓글 달기...">
                    </div>
                </form>

            </div>

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

<div class="topbox d-flex justify-content-around sticky-top navbar-light bg-light">

    <div class="d-flex nav sticky-top row navbar-light justify-content-center align-items-center">
        <div class="col logo d-flex justify-content-start">
            <img src="img/logo.png" alt="logo" srcset="">
        </div>

        <div id="serch_input" class="position-relative serch_input col-4 d-flex align-items-center">

            <div class="serch-box2 position-absolute">
                <div class="p-2 font-weight" style="color:black">최근 검색 항목
                </div>
                <div class="d-flex wd-300 align-items-center justify-content-center">
                    <div>최근 검색 내역 없음.</div>
                </div>
            </div>

            <div class="mag"><i class="fa-solid fa-magnifying-glass"></i></div>
            <input class="rounded serch_text" type="text" placeholder="검색">
        </div>

        <div class="justify-content-center d-flex align-items-center menu_icon">
            <a href="index.html"><i class="icons fa-solid fa-house fa-lg"></i></a>
            <a href="https://velog.io/@psjlmk"><i class="icons fa-solid fa-paper-plane fa-lg"></i></a>
            <i class="icons fa-solid fa-compass fa-lg"></i>
            <i class="icons fa-solid fa-heart fa-lg"></i>
            <a href="profile.html">
                <div class="profile_img">
                    <img src="https://file.mk.co.kr/meet/yonhap/2022/02/11/image_readtop_2022_130471_0_183511.jpg"
                        alt="" srcset="">
                </div>
            </a>
        </div>
    </div>
</div>

<div class="d-flex row justify-content-center">
    <div class="col-12 page_main">
        <div class="profile_status d-flex align-items-center px-5">
            <div class="pr">
                <img class="pr_img"
                    src="https://file.mk.co.kr/meet/yonhap/2022/02/11/image_readtop_2022_130471_0_183511.jpg">
            </div>
            <div class="account_">
                <div class="d-flex align-items-center">
                    <div class="_id">coding_min</div>
                    <div class="profile_edit"><button>프로필 편집</button></div>
                    <div class="setting"><i class="fa-solid fa-gear fa-2x"></i></div>
                </div>
                <div class="nick">이민기</div>
                <div class="hobby">디지털 크리에이터</div>
                <div class="job">안녕하세요 내일배움캠프에 합류하게 되어 좋습니다~</div>
                <div class="dm">DM 보내주세요! 어려운것들 서로 협력해서 잘 이겨내요!!^^</div>
            </div>
        </div>
        <div class="d-flex highlight mb-5">
            <div class="high_img mx-3">
                <img class="pr_img"
                    src="https://file.mk.co.kr/meet/yonhap/2022/02/11/image_readtop_2022_130471_0_183511.jpg" alt=""
                    srcset="">
            </div>
            <div class="high_img mx-3">
                <img class="pr_img"
                    src="https://file.mk.co.kr/meet/yonhap/2022/02/11/image_readtop_2022_130471_0_183511.jpg" alt=""
                    srcset="">
            </div>
            <div class="high_img mx-3">
                <img class="pr_img"
                    src="https://file.mk.co.kr/meet/yonhap/2022/02/11/image_readtop_2022_130471_0_183511.jpg" alt=""
                    srcset="">
            </div>


        </div>

        <div class="bbs_menu d-flex justify-content-around align-items-center">
            <div class="bbs_menu_text"><span style="margin-right: 3px; font-size:13px;"><i
                        class="fa-solid fa-border-all"></i></span>게시물</div>
            <div class="bbs_menu_text"><span style="margin-right: 3px; font-size:13px;"><i
                        class="fa-regular fa-circle-play"></i></span>동영상</div>
            <div class="bbs_menu_text"><span style="margin-right: 3px; font-size:13px;"><i
                        class="fa-regular fa-bookmark"></i>저장됨</span></div>
            <div class="bbs_menu_text"><span style="margin-right: 3px; font-size:13px;"><i
                        class="fa-regular fa-user"></i></span>태그됨</div>
        </div>

        <div class="position-relative feed_photo_list">

            <div>
                <div class="img_box"><img class="img-fluid" src="img/1.jpg" alt="" srcset=""></div>
            </div>
            <div>
                <div class="img_box"><img class="img-fluid" src="img/2.jpg" alt="" srcset=""></div>
            </div>
            <div>
                <div class="img_box"><img class="img-fluid" src="img/3.jpg" alt="" srcset=""></div>
            </div>

        </div>

        <div class="feed_photo_list">

            <div>
                <div class="img_box"><img class="img-fluid" src="img/4.jpg" alt="" srcset=""></div>
            </div>
            <div>
                <div class="img_box"><img class="img-fluid" src="img/5.jpg" alt="" srcset=""></div>
            </div>
            <div>
                <div class="img_box"><img class="img-fluid" src="img/1.jpg" alt="" srcset=""></div>
            </div>



        </div>

        <div class="feed_photo_list">

            <div>
                <div class="img_box"><img class="img-fluid" src="img/2.jpg" alt="" srcset=""></div>
            </div>
            <div>
                <div class="img_box"><img class="img-fluid" src="img/3.jpg" alt="" srcset=""></div>
            </div>
            <div>
                <div class="img_box"><img class="img-fluid" src="img/4.jpg" alt="" srcset=""></div>
            </div>

        </div>

    </div>



</div>

프로필 페이지 입니다.

주요 기능으로는 모달창 입니다.

이미지 클릭시 모달이 열립니다.

modal body를 w - 100% h - 100% 를 주고,

그 안에 모달을 만들었습니다.

제이쿼리 show hide로 구현 하였습니다.

modal body 색은 회색으로 하고 그안에 모달 박스를 주므로써 화면이 띄워지는 효과를 줍니다.

modal body 가 show 가 되었을때. 마우스 터치 스크롤이 안되게 설정 하였습니다.

modal_body 활성시 마우스 휠 터치 금지

    $('.img_box').click(function () {
        $('.feed_modal').css('display', 'flex')
        $('body').addClass('hidden').on('scroll touchmove mousewheel', function (e) {
            e.preventDefault();
        });
    })

또한 모달 컨텐츠 밖을 클릭했을시 모달창이 닫히게 구현 했습니다.

    $(document).mouseup(function (e) {
        if ($(".feed_modal").has(e.target).length === 0) {
            $(".feed_modal").css('display', 'none');
            $('body').removeClass('hidden').off('scroll touchmove mousewheel');
        }
    });

마우스 업 즉 마우스가 클릭 되었을때 이벤트 입니다.

타겟이 feed_modal 클래스 외에 것을 클릭할 경우 feed_modal을 display none이 되면서 화면이 닫히는 효과를 얻게 됩니다.

나머지는 모달창안에 좋아요및 댓글 쓰기 기능을 구현하였습니다.

3일동안 어려운 코딩 이였는데 반응형으로 만들지 못했던게 너무 아쉽네요.

좀더 시간이 있었다면 더 완성도 높게 만들었을것 같습니다.

https://github.com/minmincoding/insta_clone

이민기

지나가는사람

이전 포스트

한주동안 과제만 한것 같네요.

다음 포스트

인스타 클론 코딩 목업 이미지

1개의 댓글

김준태

2022년 5월 4일

안녕하세요 민기님, 김준태 튜터입니다!
코드를 살펴보았는데요, 몇 가지 부분만 보완하시면 좋을 것 같습니다.

지금 하나의 요소에 클래스가 너무 많이 적용되고 있습니다. 부트스트랩을 최대한 활용하려고 하신 것 같은데, 부트스트랩은 어디까지나 편의를 위한 것이고 실제 현업에서는 부트스트랩을 거의 쓰지 않습니다. 아직은 배우시는 단계시니 최대한 요소마다 기능 측면에서 클래스 이름을 짓고, css 에 하나씩하나씩 작성해나가시는 것을 추천드립니다! 다른 개발자랑 의사소통되는 것이 중요하니, 코드를 어느정도는 간결하게 작성하는 것도 중요합니다!
html 태그 내부에다가 style="" 이렇게 작성하시는건 최대한 지양하시는게 좋습니다! 작성할 때는 당장 편한데요, 프로젝트가 커지게 되면 나중에 스타일을 관리하기가 어려워 집니다.

이외에는 잘 작성하셨습니다. 수고많으셨어요!

답글 달기