2022.05.20 Day 11 - Instagram Clone(메인 페이지)

성민규·2022년 5월 20일
0

Instagram Clone


위와 같이 인스타그램 메인페이지를 Clone 중에 있습니다.
아직 작업이 완성되지는 않았으며, 전체페이지를 보여주기 위해서 화면비율을 80%로 축소하여 캡쳐하였습니다.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <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=Lobster&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/4e5b2f86bb.js" crossorigin="anonymous"></script>
    <title>Justgram</title>
</head>
<body>
    <div class="container">
        <nav class="nav-container">
            <div class="nav-icon-text">
                <div class="icon-insta">
                    <i class="fa-brands fa-instagram fa-xl icon-logo"></i>
                </div>
                <div class="text-insta">
                    <span>Justgram</span>
                </div>
            </div>
            <div class="input-search">
                <input class="search" placeholder="검색">
            </div>
            <div class="nav-right">
                <div class="icon-compass-box">
                    <a href="#">
                        <img class="icon-compass" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png" alt="compass image">
                    </a>
                </div>
                <div class="icon-heart-box">
                    <a href="#">
                        <img class="icon-heart" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png" alt="heart image">
                    </a>
                </div>
                <div class="icon-profile-box">
                    <a href="#">
                        <img class="icon-profile" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/profile.png" alt="profile image">
                    </a>
                </div>
            </div>
        </nav>
        <main class="main-container">
            <div class="feeds">
                <article class="feed">
                    <div class="feed-head">
                        <header class="feed-profile">
                            <div class="profile-img">
                                <img id="profile-img" src="../profile.jpg" alt="profile-image">
                            </div>
                            <div class="profile-text">
                                <div class="profile-name">
                                    <a>
                                        star._.meanstar
                                    </a>
                                </div>
                                <div class="profile-location">
                                    <a>
                                        서울시
                                    </a>
                                </div>
                            </div>
                        </header>
                        <button class="profile-moreinfo">
                        </button>
                    </div>
                    <div class="feed-img">
                        <img id="feed-img" src="../justgram-feed.jpg" alt="feed-image">
                    </div>
                    <section class="feed-buttons">
                        <div class="buttom-left">
                            <button class="button-heart">

                            </button>
                            <button class="button-comment">
   
                            </button>
                            <button class="button-dm">
   
                            </button>
                        </div>
                        <div class="button-right">
                            <button class="button-bookmark">

                            </button>
                        </div>
                    </section>
                    <section class="feed-heart">
                        <a href="#">star._.meanstar</a>"님 "
                        <a href="#">여러명</a>"이 좋아합니다"
                    </section>
                    <div class="feed-text">
                        <a>
                            star._.meanstar
                        </a>
                        <span>
                            안녕하세요. 첫 피드입니다.
                        </span>
                        <span>
                            ... 더보기
                        </span>
                    </div>
                    <div class="feed-uploaded">
                        <time>1일 전</time>
                    </div>
                    <div class="feed-comment-box">
                        <div>
                            <a href="#">

                            </a>
                        </div>
                    </div>
                    <section class="feed-comment-input">
                        <textarea placeholder="댓글 달기...">

                        </textarea>
                        <button class="comment-button">
                            게시
                        </button>
                    </section>
                </article>
            </div>
            <div class="main-right">
                <div class="main-right-profile">
                    <div class="profile-img">
                        <img id="profile-img" src="../profile.jpg" alt="profile-image">
                    </div>
                    <div class="profile-text">
                        <div class="profile-name">
                            <a>
                                star._.meanstar
                            </a>
                        </div>
                        <div class="profile-nickname">
                            민규
                        </div>
                    </div>
                </div>
                <div class="main-right-story">
                    <div class="story-header">
                        <div>
                            스토리
                        </div>
                        <div>
                            <a href="#">
                                모두 보기
                            </a>
                        </div>
                    </div>
                    <div class="story-contents">
                        <div class="story-content">
                            <div class="profile-img">
                                <img id="profile-img" src="../profile.jpg" alt="profile-image">
                            </div>
                            <div class="profile-text">
                                <div class="profile-name">
                                    <span>
                                        star._.meanstar
                                    </span>
                                </div>
                                <div class="upload-time">
                                    <time>
                                        19시간 전
                                    </time>
                                </div>
                            </div>
                        </div>
                        <div class="story-content">
                            <div class="profile-img">
                                <img id="profile-img" src="../profile.jpg" alt="profile-image">
                            </div>
                            <div class="profile-text">
                                <div class="profile-name">
                                    <span>
                                        star._.meanstar
                                    </span>
                                </div>
                                <div class="upload-time">
                                    <time>
                                        3시간 전
                                    </time>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-right-recommend">
                    <div class="recommend-header">
                        <div>
                            회원님을 위한 추천
                        </div>
                        <div>
                            <a href="#">
                                모두 보기
                            </a>
                        </div>
                    </div>
                    <div class="recommend-contents">
                        <div class="recommend-content">
                            <div class="recommend-profile">
                                <div class="profile-img">
                                    <img id="profile-img" src="../profile.jpg" alt="profile-image">
                                </div>
                                <div class="profile-text">
                                    <div class="profile-name">
                                        <span>
                                            star._.meanstar
                                        </span>
                                    </div>
                                    <div class="common-follow">
                                        <span>
                                            king님 외 2명이 팔로우합니다.
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <button>
                                팔로우
                            </button>
                        </div>
                        <div class="recommend-content">
                            <div class="recommend-profile">
                                <div class="profile-img">
                                    <img id="profile-img" src="../profile.jpg" alt="profile-image">
                                </div>
                                <div class="profile-text">
                                    <div class="profile-name">
                                        <span>
                                            star._.meanstar
                                        </span>
                                    </div>
                                    <div class="common-follow">
                                        <span>
                                            king님 외 2명이 팔로우합니다.
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <button>
                                팔로우
                            </button>
                        </div>
                    </div>
                </div>
                <div class="main-right-info">
                    <div class="information">
                        <div>
                            <a>
                                Justgram 정보
                            </a>
                            <a>
                                지원
                            </a>
                            <a>
                                홍보 센터
                            </a>
                            <a>
                                API
                            </a>
                            <a>
                                채용 정보
                            </a>
                            <a>
                                개인정보처리방침
                            </a>
                            <a>
                                약관
                            </a>
                            <a>
                                디렉터리
                            </a>
                            <a>
                                프로필
                            </a>
                            <a>
                                해시태그
                            </a>
                            <a>
                                언어
                            </a>
                        </div>
                        <div>
                            © 2022 JUSTGRAM FROM JUSTCODE
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <script src="../js/main.js"></script>
</body>
</html>

CSS

* {
    box-sizing: border-box;
}

input:focus {
    outline: none;
}

#feed-img {
    width: 400px;
    height: 600px;
}

#profile-img{
    display: flex;
    width: 30px;
    height: 30px;
    border-radius: 30px;
}

.container {

}

.nav-container {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 8vh;
    background-color: white;
    border-bottom: 1px solid #e0e0e0;
}

.nav-icon-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
}

.icon-insta {
    padding-right: 16px;
    border-right: 2px solid black;
}

.text-insta {
    margin-left: 16px;
    font-size: 24px;
    font-family: 'Lobster', cursive;
}

.input-search {
    display: flex;
    width: 160px;
    height: 24px;
}

.search {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    background-color: #efefef;
}

.nav-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 140px;
}

.icon-compass-box {
    width: 24px;
    height: 24px;
}

.icon-compass {
    width: 100%;
    height: 100%;
}

.icon-heart-box {
    width: 24px;
    height: 24px;
}

.icon-heart {
    width: 100%;
    height: 100%;
}

.icon-profile-box {
    width: 24px;
    height: 24px;
}

.icon-profile {
    width: 100%;
    height: 100%;
}

.main-container {
    display: flex;
    justify-content: center;
    padding-top: 8vh;
}

.feeds {
    border: 1px solid black;
}

.feed {
    display: flex;
    flex-direction: column;
}

.feed-head {
    display: flex;
    justify-content: space-between;
}

.feed-profile {
    display: flex;
    align-items: center;
    height: 40px;
}

.profile-img {
    margin: 6px;
}

.profile-text {
    font-size: 12px;
    margin: 6px;
}

.profile-name {
    margin: 2px;
}

.profile-location {
    margin: 2px;
}

.profile-moreinfo {
  
}

.profile-nickname {
    margin: 2px;
}

.upload-time {
    margin: 2px;
}

.common-follow {
    margin: 2px;
}

.feed-img {
    display: flex;
}

.feed-buttons {
    display: flex;
    justify-content: space-between;
}

.button-left {

}

.button-heart {

}

.button-comment {

}

.button-dm {

}

.button-right {

}

.button-bookmark {

}

.feed-heart {
    font-size: 12px;
    margin: 8px;
}

.feed-text {
    font-size: 12px;
    margin: 8px;
}

.feed-uploaded {
    font-size: 12px;
    margin: 8px;
}

.feed-comment-box {

}

.feed-comment-input {

}

.comment-button {

}

.main-right {
    display: flex;
    flex-direction: column;
    border: 1px solid black;
}

.main-right-profile {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin: 8px;
}

.main-right-story {

}

.story-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin: 8px;
}

.story-contents {
  
}

.story-content {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin: 8px;
}

.main-right-recommend {
  
}

.recommend-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin: 8px;
}

.recommend-contents {

}

.recommend-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin: 8px;
}

.recommend-profile {
    display: flex;
}

.main-right-info {

}

.information {

}

실습하면서 느낀 점

첫 번째, 틀구성의 중요성
레이아웃을 적용할 게 많은 페이지이므로 틀구성을 어떻게 하냐에 따라 수정사항이 현격하게 줄어듭니다. 코드가 길어짐에 따라 수정사항이 하나 생길 때에도 걸리는 시간이 많이 소모됩니다. 그에 따라 처음에 틀구성을 파악하여 제대로 시작하는 것이 프로그래밍에 있어 중요하다는 것을 다시 한번 더 느꼈습니다.
두 번째, flex의 활용성
공부를 하면서 flex가 매우 효율적이고 유용하다는 점은 인지하였지만, 실습에 적용하면서 생각했던 것보다 훨씬 많이 사용했습니다. 아직 페이지를 완성하지 않았음에도 불구하고 매우 많이 쓴다는 것을 느끼 수 있었습니다. 사용빈도가 높기 때문에 그 속성에 대한 지식도 확실하게 잡아서 가는 것이 중요하다고 느꼈습니다.
세 번째, 클래스명과 ID명의 중요성, 공통 css파일의 필요성
실습을 진행하면서 인스타그램 메인페이지를 예를 들면, 프로필 사진과 프로필 명(위의 코드에서 feed-profile, story-content, recommend-profile)처럼 같은 유형의 레이아웃이 자주 등장하게 되면서 그 부분에 있어 클래스명과 ID명을 통일시키고 공통 css파일을 활용한다면 코딩을 훨씬 효율적으로 할 수 있을 것이라는 생각을 하게 되었습니다.
아직 실습경험이 많지 않지만 이렇게 코딩하는 습관을 길러야겠다는 생각이 들었습니다.

완성 후에 또 한번 더 포스팅하겠습니다.

profile
끈기있고 꾸준하게!!

0개의 댓글