👦 내일배움캠프/TIL(Today I Learned)

TIL_220428_인스타 데스크탑 UI 클론

개인 프로젝트 인스타 데스크탑 UI 클론

github : https://github.com/DHL68/github-DHL68/tree/main/%EB%82%B4%EC%9D%BC%EB%B0%B0%EC%9B%80%EC%BA%A0%ED%94%84/project/p-instargram-desktop-UI-clone

GitHub - DHL68/github-DHL68: github-DHL68-practice

github-DHL68-practice. Contribute to DHL68/github-DHL68 development by creating an account on GitHub.

github.com

무엇을 느꼈는가.

오늘 클론 프로젝트 시작 전에 튜터님과 대화를 나누었다.

대략 내용은 이러하다.

내가 지금 프로젝트를 하면서 해왔던 공부 방법에 대해서 의구심이 들기 시작했다.

'이게 맞는 건가' 하며 공부한 내용을 돌아보게 되고,

'이렇게 한다고 내 실력이 늘 수 있는건가?' 라며 해왔던 공부 방법에 변화를 주려고 했다.

그러다 확실하게 짚고 넘어가고 싶어서 상담을 받게 되었다.

튜터님은 내가 하고 있던 공부 방법에 대해서 잘하고 있다는 말과 함께 자신감을 불어넣어 주셨고,

의심치 말고 자신의 것으로 만드는데 전념할 수 있도록 조언을 해주셨다.

지금까지 이 방법으로 프로젝트를 넘겨왔다 해도 과언이 아닌데,

막상 돌아보니 내가 직접 만들어 냈던게 없더라.

하지만 그게 아니라 내가 지금까지 지나온 과정들이 코드의 흐름을 크게 잡아주고,

이해하면서 지금의 응용할 수 있는 단계.

그리고 이해하면서 조금씩은 나의 스타일을 불어넣어 나의 느낌과 경험이 묻어나는 결과물을 만들기까지.

더 많이 보고 느끼고 경험하자.

지금 내가 할 수 있는 것을 하고,

내가 이뤄낼 수 있는 것을 찾아내자.

그리고 적용하고,

나의 손이 묻어난 결과물을 꾸준하게 만들어보자.

어느순간 내 것으로 가득 물든 결과물로 이어질 것이라 믿는다.

프로젝트의 목적
- 레이아웃을 만드는 것을 확실하기 익히고 가기 위한 프로젝트
- 프론트엔드 기술 향상

프로젝트의 목표
- 프론트엔드의 레이아웃을 보고 알맞은 태그와 속성을 이용해 배치
- 원하는 레이아웃을 구성했다면, 자유롭게 레이아웃을 변경해서 창의적인 결과물을 뽑아냄

프로젝트 방향 제시
- 기존 인스타그램의 UI를 따라 구현해보고, 결과물에 따라 와이어 프레임을 따로 구성해 하나씩 적용해 나아가는 방향으로 진행

진행 단계

0.1 file set

- 프로젝트를 진행하기에 앞서 앞으로 협업을 위해 조금씩 습관을 만들어가기 위해서 폴더링

0.2 ADD navbar & 0.3 ADD icon

- 부트스트랩 네비게이션 바 사용

- 구글 아이콘 사용 Material icon

- 3개의 영역으로 나누어 좌측 중앙 우축으로 배치할 수 있게 justify-content: space-between; 을 사용

<!--  네비게이션 바  -->
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="position: fixed; width: 100%;">
    <!--  부모 영역 1 : 일정 간격의 양쪽 끝 정렬  -->
    <div class="container-fluid" style="justify-content: space-between; flex-wrap: nowrap; min-width: 768px">
        <!--  home 자식 영역 1  -->
        <a class="navbar-brand" href="#">
            <img style="width: 100px;"
                 src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png">
        </a>

        <!--  search 자식 영역 2  -->
        <input style="width: 350px" class="form-control me-2 nav-input-box" type="search" placeholder="Search"
               aria-label="Search">

        <!--  menu 자식 영역 3  -->
        <div>
            <!--  material icon  -->
            <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>

0.4 ADD feed, story, profile layout

- 피드 레이아웃 생성

- 스토리 레이아웃 생성

- 프로필 레이아웃 생성 (CSS 꾸미기 단계)

- 네비게이션 바 & 프로필 레이아웃 위치 고정 style="position: fixed;

<!--  story layout 0  -->
<div style="display: flex; flex-direction: row; justify-content: center; text-align: center; padding-top: 74px; background-color: #FAFAFA;">

    <!--  feed layout  -->
    <div style="min-width: 600px; margin-right: 300px; margin-bottom: 24px;">
        <div style="border: solid gray 1px; background-color: white">
            <!--  profile image & name chart  -->
            <div style="display: flex; flex-direction: row; align-items: flex-start; padding: 14px 4px 14px 16px;">
                <!--  profile image & name list  -->
                <div style="display: flex; flex-direction: column; margin-right: 14px;">
                    <!--  image  -->
                    <div class="box-story">
                        <img class="profile-story"
                             src="https://static-cdn.jtvnw.net//jtv_user_pictures//871927b3-06f4-4657-ba6a-327396d1196e-profile_image-300x300.png">
                    </div>
                    <!--  name  -->
                    <div style="font-size: 12px;">
                        핑구
                    </div>
                </div>
                <div style="display: flex; flex-direction: column; margin-right: 14px;">
                    <!--  image  -->
                    <div class="box-story">
                        <img class="profile-story"
                             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBrMudtOfPfEgbPytwkL1SPyBfIGHDuh5vkA&usqp=CAU">
                    </div>
                    <!--  name  -->
                    <div style="font-size: 12px;">
                        에비츄
                    </div>
                </div>
                <div style="display: flex; flex-direction: column; margin-right: 14px;">
                    <!--  image  -->
                    <div class="box-story">
                        <img class="profile-story"
                             src="data:image/jpeg;base64,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">
                    </div>
                    <!--  name  -->
                    <div style="font-size: 12px;">
                        메타몽
                    </div>
                </div>
                <div style="display: flex; flex-direction: column; margin-right: 14px;">
                    <!--  image  -->
                    <div class="box-story">
                        <img class="profile-story"
                             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFSXLEpg7cfaY_ZkzY1it13ZHk8WgY_2hR0X9Xs5sKnsCAiZ-Dg5WlQj39JYN_alNkjPo&usqp=CAU">
                    </div>
                    <!--  name  -->
                    <div style="font-size: 12px;">
                        루피
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--  profile layout  -->
    <div style="width: 400px; height: 1000px; background-color: sandybrown; position: fixed; left: 62%;">
        오른쪽
    </div>
</div>

<!--  content layout 1  -->
<div style="display: flex; flex-direction: row; justify-content: center; text-align: center; margin-bottom: 24px; background-color: #FAFAFA;">
    <!--  feed layout  -->
    <div style="min-width: 600px; margin-right: 300px; margin-bottom: 24px;">
        <div style="border: solid gray 1px; background-color: white">
            <!--  profile image & name  -->
            <div style="display: flex; flex-direction: row; align-items: center; padding: 14px 4px 14px 16px;">
                <!--  image  -->
                <div class="box" style="background: #BDBDBD;">
                    <img class="profile"
                         src="https://static-cdn.jtvnw.net//jtv_user_pictures//871927b3-06f4-4657-ba6a-327396d1196e-profile_image-300x300.png">
                </div>
                <!--  name  -->
                <div style="margin-left: 14px;">
                    핑구
                </div>
            </div>

            <!--  feed  -->
            <div class="feed-box"><img class="feed-main"
                                       src="data:image/jpeg;base64,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">
            </div>

            <!--  section  -->
            <section style="display: flex; flex-direction: row; justify-content: space-between; margin: 10px 16px 10px 16px;">
                <!--  3 icon  -->
                <div>
                    <span style="margin-right: 6px;" class="material-icons-outlined">favorite_border</span>
                    <span style="margin-right: 6px;" class="material-icons-outlined">mode_comment</span>
                    <span style="margin-right: 6px;" class="material-icons-outlined">send</span>
                </div>
                <!--  bookmark icon  -->
                <div>
                    <span class="material-icons-outlined">bookmark_border</span>
                </div>
            </section>

            <!--  heart history  -->
            <div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 6px;">
                <div class="box" style="background: #BDBDBD; width: 20px; height: 20px; margin-left: 14px;">
                    <img style="margin-right: 4px;" class="profile"
                         src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBrMudtOfPfEgbPytwkL1SPyBfIGHDuh5vkA&usqp=CAU">
                </div>
                <div style="text-align: left;"> 에비츄 <b>외 4명</b>이 좋아합니다.</div>
            </div>

            <!--  comment  -->
            <div style="text-align: left; margin-left: 14px; margin-bottom: 6px;"><b>핑구</b> 요즘 남극 친구들이 많이 보이지 않습니다. 찾아주세요.</div>
            <div style="text-align: left; margin-left: 14px; margin-bottom: 6px;"><b>핑구 아빠</b> 그만 놀고 집으로 돌와라</div>
            <div style="text-align: left; margin-left: 14px; margin-bottom: 6px;"><b>북극곰</b> 거긴 살만 하니?</div>
            <!--  comment input  -->
            <div style="border-top: solid 1px gray">
                <input type="text" class="form-control" style="padding-left: 16px; padding-right: 16px; box-shadow: none; border: none; outline: none;"
                       placeholder="댓글 달기..">
            </div>
        </div>
    </div>
    <!--  profile layout  -->
    <div style="width: 400px; height: 1000px; background-color: sandybrown; position: fixed; left: 62%;">
        오른쪽
    </div>
</div>

<!--  content layout 2  -->
<div style="display: flex; flex-direction: row; justify-content: center; text-align: center; background-color: #FAFAFA;">
    <!--  feed layout  -->
    <div style="min-width: 600px; margin-right: 300px; margin-bottom: 24px;">
        <div style="border: solid gray 1px; background-color: white">
            <!--  profile image & name  -->
            <div style="display: flex; flex-direction: row; align-items: center; padding: 14px 4px 14px 16px;">
                <!--  image  -->
                <div class="box" style="background: #BDBDBD;">
                    <img class="profile"
                         src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBrMudtOfPfEgbPytwkL1SPyBfIGHDuh5vkA&usqp=CAU">
                </div>
                <!--  name  -->
                <div style="margin-left: 14px;">
                    에비츄
                </div>
            </div>

            <!--  feed  -->
            <div class="feed-box"><img class="feed-main"
                                       src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdLiMBz5rpPVP-Ua56yjo9t4DiIrjw9I8qKw&usqp=CAU">
            </div>

            <!--  section  -->
            <section style="display: flex; flex-direction: row; justify-content: space-between; margin: 10px 16px 10px 16px;">
                <!--  3 icon  -->
                <div>
                    <span style="margin-right: 6px;" class="material-icons-outlined">favorite_border</span>
                    <span style="margin-right: 6px;" class="material-icons-outlined">mode_comment</span>
                    <span style="margin-right: 6px;" class="material-icons-outlined">send</span>
                </div>
                <!--  bookmark icon  -->
                <div>
                    <span class="material-icons-outlined">bookmark_border</span>
                </div>
            </section>

            <!--  heart history  -->
            <div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 6px;">
                <div class="box" style="background: #BDBDBD; width: 20px; height: 20px; margin-left: 14px;">
                    <img style="margin-right: 4px;" class="profile"
                         src="data:image/jpeg;base64,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">
                </div>
                <div style="text-align: left;"> 메타몽 <b>외 19명</b>이 좋아합니다.</div>
            </div>

            <!--  comment  -->
            <div style="text-align: left; margin-left: 14px; margin-bottom: 6px;"><b>에비츄</b> 어제 먹다 남은 아이스크림.. 동생이 다 먹어버렸다 가만안둬...</div>
            <div style="text-align: left; margin-left: 14px; margin-bottom: 6px;"><b>라이츄</b> 아이스크림은 선 넘었지!!</div>
            <div style="text-align: left; margin-left: 14px; margin-bottom: 6px;"><b>에비츄 동생</b> 거.. 좀 먹을 수도 있지..</div>
            <!--  comment input  -->
            <div style="border-top: solid 1px gray">
                <input type="text" class="form-control" style="padding-left: 16px; padding-right: 16px; box-shadow: none; border: none; outline: none;"
                       placeholder="댓글 달기..">
            </div>
        </div>
    </div>
    <!--  profile layout  -->
    <div style="width: 400px; height: 1000px; background-color: sandybrown; position: fixed; left: 62%;">
        오른쪽
    </div>
</div>

<!--  content layout 3  -->
<div style="display: flex; flex-direction: row; justify-content: center; text-align: center; background-color: #FAFAFA;">
    <!--  feed layout  -->
    <div style="min-width: 600px; margin-right: 300px; margin-bottom: 24px;">
        <div style="border: solid gray 1px; background-color: white">
            <!--  profile image & name  -->
            <div style="display: flex; flex-direction: row; align-items: center; padding: 14px 4px 14px 16px;">
                <!--  image  -->
                <div class="box" style="background: #BDBDBD;">
                    <img class="profile"
                         src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFSXLEpg7cfaY_ZkzY1it13ZHk8WgY_2hR0X9Xs5sKnsCAiZ-Dg5WlQj39JYN_alNkjPo&usqp=CAU">
                </div>
                <!--  name  -->
                <div style="margin-left: 14px;">
                    루피
                </div>
            </div>

            <!--  feed  -->
            <div class="feed-box"><img class="feed-main"
                                       src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdMR1nBzgeXte2IMFTtx529lt_dbYu_uhYuioj7LIwpDQ8aLKM3TiHyCS8BlCJiNuHIOg&usqp=CAU">
            </div>

            <!--  section  -->
            <section style="display: flex; flex-direction: row; justify-content: space-between; margin: 10px 16px 10px 16px;">
                <!--  3 icon  -->
                <div>
                    <span style="margin-right: 6px;" class="material-icons-outlined">favorite_border</span>
                    <span style="margin-right: 6px;" class="material-icons-outlined">mode_comment</span>
                    <span style="margin-right: 6px;" class="material-icons-outlined">send</span>
                </div>
                <!--  bookmark icon  -->
                <div>
                    <span class="material-icons-outlined">bookmark_border</span>
                </div>
            </section>

            <!--  heart history  -->
            <div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 6px;">
                <div class="box" style="background: #BDBDBD; width: 20px; height: 20px; margin-left: 14px;">
                    <img style="margin-right: 4px;" class="profile"
                         src="https://static-cdn.jtvnw.net//jtv_user_pictures//871927b3-06f4-4657-ba6a-327396d1196e-profile_image-300x300.png">
                </div>
                <div style="text-align: left;"> 핑구 <b>외 32명</b>이 좋아합니다.</div>
            </div>

            <!--  comment  -->
            <div style="text-align: left; margin-left: 14px; margin-bottom: 6px;"><b>루피</b> 아.. 머리 망했다.. ㅠㅠ</div>
            <div style="text-align: left; margin-left: 14px; margin-bottom: 6px;"><b>핑구</b> 대체 무슨 일이 있었던거야..</div>
            <div style="text-align: left; margin-left: 14px; margin-bottom: 6px;"><b>크롱</b> 머맄ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ</div>
            <!--  comment input  -->
            <div style="border-top: solid 1px gray">
                <input type="text" class="form-control" style="padding-left: 16px; padding-right: 16px; box-shadow: none; border: none; outline: none;"
                       placeholder="댓글 달기..">
            </div>
        </div>
    </div>
    <!--  profile layout  -->
    <div style="width: 400px; height: 1000px; background-color: sandybrown; position: fixed; left: 62%;">
        오른쪽
    </div>
</div>

진행률 30%..

'👦 내일배움캠프 > TIL(Today I Learned)' 카테고리의 다른 글

TIL_220502_인스타 데스크탑 UI 클론 (0)	2023.01.01
TIL_220501_인스타 데스크탑 UI 클론 (0)	2023.01.01
TIL_220427 (0)	2023.01.01
TIL_220426 (0)	2023.01.01
TIL_220425 (0)	2023.01.01

Contents

새소식

인기 검색어

TIL_220428_인스타 데스크탑 UI 클론

'👦 내일배움캠프 > TIL(Today I Learned)' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바