개인 프로젝트2: 인스타그램 데스크탑 UI클론 3

hyelog·2022년 5월 2일
CSSTILhtml내일배움캠프스파르타코딩클럽
0

TIL

목록 보기
8/20
post-thumbnail

개인 프로젝트2: 인스타그램 데스크탑 UI클론 3


Goal

프론트엔드의 레이아웃을 보고 알맞은 태그와 속성을 이용해 배치를 할 수 있다.


display 속성 inline, block

  • inline 문자 일부분 선택 지정
    inline 속성을 가진 태그의 예 <span> <b> <a> <img>

  • block 넓은 범위 묶어 지정
    block 속성을 가진 태그의 예<p> <div> <ol> <ul> <table>

  • inline-block
    inline-block 속성을 가진 태그의 예 <button> <input> <select> 



inline

  • 엘리먼트 나란히 배치
  • inline 엘리먼트는 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지.
    width와 height 속성을 지정해도 무시됨.
    margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.

block

  • block 엘리먼트는 전후 줄바꿈 후 혼자 한 줄을 차지.
  • width height margin padding 속성이 모두 반영.


inline-block

  • 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치.
  • width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능.


.css {float: 속성}

none: 기본값, 띄우지 않음
left: 왼쪽
right: 오른쪽
initial: 기본값으로 설정함
inherit: 부모 요소로부터 상속

*절대 위치 요소는 float 속성 무시




인스타그램 데스크탑 UI클론 코드

<!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">

    <!-- 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 src="https://kit.fontawesome.com/96160613e1.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">

    <title>Instagram</title>
</head>
<body>
<!--nav: 로고, 검색창, 창 이동할 수 있는 픽토그램 6종-->
<nav id="nav"> <!--size, color, shadow-->
    <div class="box-nav">
        <div class="box-logo"> <!--img margin, padding-->
            <img alt="Instagram" class="img-logo" src="img/instagram_logo.png">
        </div>
        <div class="box-input"> <!--color, radius, font color size-->
            <input class="search" type="text" value="검색">
        </div>
        <div class="icons"> <!--margin, padding, size-->
            <i class="fa-solid fa-house"></i>
            <i class="fa-regular fa-paper-plane"></i>
            <i class="fa-regular fa-square-plus"></i>
            <i class="fa-regular fa-compass"></i>
            <i class="fa-regular fa-heart"></i>
            <img class="img-profile" alt="profile" src="img/profile.jpg">
        </div>
    </div>
</nav>

<!--main: 스크롤, 모달, section: nav, article: 포토 콘텐트 이미지 슬라이스, 아이콘 4종, likes, 텍스트 콘텐트(더보기), 댓글, 게시 버튼-->
<main class="main">
    <div class="block"></div> <!-- nav 아래 컬러 블록 색칠하려고 만든 div -->
    <section class="contents"> <!-- 포스팅 섹션 전체 -->
        <article class="card-content">
            <div class="post">
                <header class="card-hdr">
                    <img alt="profile" class="img-profile-hdr" src="img/profile.jpg">
                    <span class="hdr-text">id.instagram</span>
                    <div class="ellipsis">
                        <i class="fa-solid fa-ellipsis"></i>
                    </div>
                </header>
                <div class="content-photo">
                    <img alt="photo" class="photo" src="img/forest.jpg">
                </div>
                <div class="box-button">
                    <div class="button-left">
                        <i class="fa-regular fa-heart"></i>
                        <i class="fa-regular fa-comment"></i>
                        <i class="fa-regular fa-paper-plane"></i>
                    </div>
                    <div>
                        <!-- 사진 슬라이드 -->
                    </div>
                    <div class="bookmark">
                        <i class="fa-regular fa-bookmark"></i>
                    </div>
                </div>
                <div class="likes">
                    <img alt="likes-profile" class="likes-profile" src="img/profile.jpg">
                    <span class="likes-text">id.instagram님 외 n명이 좋아합니다</span>
                </div>
                <div class="content-text">
                    <span class="content-id">id.instagram </span>
                    <span class="content-reply">인스타그램 포스트</span>
                    <div class="reply-more">댓글 모두 보기</div>
                    <div class="reply-date">n일 전</div>
                </div>
                <div class="reply">
                    <div class="box-smile">
                        <i class="fa-regular fa-face-smile"></i>
                    </div>
                    <div class="reply-input">댓글 달기...</div>
                    <div class="reply-button">게시</div>
                </div>
            </div>
            <div class="post">
                <header class="card-hdr">
                    <img alt="profile" class="img-profile-hdr" src="img/profile.jpg">
                    <span class="hdr-text">id.instagram</span>
                    <div class="ellipsis">
                        <i class="fa-solid fa-ellipsis"></i>
                    </div>
                </header>
                <div class="content-photo">
                    <img alt="photo" class="photo" src="img/cat.jpg">
                </div>
                <div class="box-button">
                    <div class="button-left">
                        <i class="fa-regular fa-heart"></i>
                        <i class="fa-regular fa-comment"></i>
                        <i class="fa-regular fa-paper-plane"></i>
                    </div>
                    <div>
                        <!-- 사진 슬라이드 -->
                    </div>
                    <div class="bookmark">
                        <i class="fa-regular fa-bookmark"></i>
                    </div>
                </div>
                <div class="likes">
                    <img alt="likes-profile" class="likes-profile" src="img/profile.jpg">
                    <span class="likes-text">id.instagram님 외 n명이 좋아합니다</span>
                </div>
                <div class="content-text">
                    <span class="content-id">id.instagram </span>
                    <span class="content-reply">인스타그램 포스트</span>
                    <div class="reply-more">댓글 모두 보기</div>
                    <div class="reply-date">n일 전</div>
                </div>
                <div class="reply">
                    <div class="box-smile">
                        <i class="fa-regular fa-face-smile"></i>
                    </div>
                    <div class="reply-input">댓글 달기...</div>
                    <div class="reply-button">게시</div>
                </div>
            </div>
            <div class="post">
                <header class="card-hdr">
                    <img alt="profile" class="img-profile-hdr" src="img/profile.jpg">
                    <span class="hdr-text">id.instagram</span>
                    <div class="ellipsis">
                        <i class="fa-solid fa-ellipsis"></i>
                    </div>
                </header>
                <div class="content-photo">
                    <img alt="photo" class="photo" src="img/beach.jpg">
                </div>
                <div class="box-button">
                    <div class="button-left">
                        <i class="fa-regular fa-heart"></i>
                        <i class="fa-regular fa-comment"></i>
                        <i class="fa-regular fa-paper-plane"></i>
                    </div>
                    <div>
                        <!-- 사진 슬라이드 -->
                    </div>
                    <div class="bookmark">
                        <i class="fa-regular fa-bookmark"></i>
                    </div>
                </div>
                <div class="likes">
                    <img alt="likes-profile" class="likes-profile" src="img/profile.jpg">
                    <span class="likes-text">id.instagram님 외 n명이 좋아합니다</span>
                </div>
                <div class="content-text">
                    <span class="content-id">id.instagram </span>
                    <span class="content-reply">인스타그램 포스트</span>
                    <div class="reply-more">댓글 모두 보기</div>
                    <div class="reply-date">n일 전</div>
                </div>
                <div class="reply">
                    <div class="box-smile">
                        <i class="fa-regular fa-face-smile"></i>
                    </div>
                    <div class="reply-input">댓글 달기...</div>
                    <div class="reply-button">게시</div>
                </div>
            </div>
            <!--            <div class="modal">-->
            <!--            </div>-->
        </article>
        <!--side: 추천 프로필 이미지, 정보 텍스트, 팔로우 버튼-->
        <div class="side">
            <div class="side-title">
                <div class="side-text">회원님을 위한 추천</div>
                <div class="side-text-btn">모두 보기</div>
            </div>
            <div class="account-profile">
                <div class="box-profile">
                    <img class="img-account" alt="profile" src="img/github.jpeg">
                    <span class="account-name">github</span><br>
                    <div class="account-text">
                        <span class="account-state">spartacoding님 외 30명이 팔로우합니다</span>
                        <span class="follow">팔로우</span>
                    </div>
                </div>
                <div class="box-profile">
                    <img class="img-account" alt="profile" src="img/sparta.png">
                    <span class="account-name">spartacoding</span><br>
                    <div class="account-text">
                        <span class="account-state">spartacoding님 외 30명이 팔로우합니다</span>
                        <span class="follow">팔로우</span>
                    </div>
                </div>
                <div class="box-profile">
                    <img class="img-account" alt="profile" src="img/behance.jpeg">
                    <span class="account-name">Behance</span><br>
                    <div class="account-text">
                        <span class="account-state">spartacoding님 외 30명이 팔로우합니다</span>
                        <span class="follow">팔로우</span>
                    </div>
                </div>
            </div>
            <footer id="footer">
                소개 ・ 도움말 ・ 홍보 센터 ・ API ・ 채용 정보 ・ <br>개인정보처리방침 ・ 약관 ・ 위치 ・ 인기 ・ 계정 ・ 해시태그 ・ 언어<br><br>
                © 2022 INSTAGRAM UI CLONE HWANGHYE
            </footer>
        </div>
    </section>
</main>
</body>
</html>
#nav {
    height: 60px;
    border-bottom: 1px solid #DBDBDB;
}

.box-nav {
    display: flex; /* nav 안 다른 요소들 나란히 정렬 */
    height: 60px;
    width: 975px;
    margin: auto;
}

.box-logo {
    height: 60px;
    width: 340px; 
    line-height: 60px; /* img 감싸는 영역 정렬을 위해 필요 */
}

.img-logo {
    /*float: left;*/
    height: 29px;
    width: 103px;
    vertical-align: middle; /* 세로 중앙 정렬 */
}

.box-input {
    height: 60px;
    width: 268px;
    line-height: 60px;
}

.search {
    height: 36px;
    width: 268px;
    border: none;
    border-radius: 8px;
    padding: 3px 16px 3px 16px;
    background-color: #EFEFEF;
    font-size: 16px;
    color: lightgray;
    outline: none;
    vertical-align: middle;
}

.icons {
    height: 60px;
    width: 278px;
    line-height: 60px;
    text-align: right;
    margin-left: 40px;
}

.fa-solid, .fa-regular {
    font-size: 24px;
    padding: 7px;
    text-align: center;
    vertical-align: middle;
}

.img-profile {
    height: 24px;
    width: 24px;
    border-radius: 70%;
    vertical-align: middle;
}

.main {
    background-color: #FAFAFA;
}

.block {
    height: 30px;
}

.contents {
    width: 975px;
    margin: 30px auto;
    display: flex;
}

.post {
    width: 614px;
    border: 1px solid #DBDBDB;
    margin-bottom: 20px;

}

.card-hdr { /* 프로필 사진, 아이디, 모달 */
    height: 60px;
    width: 612px;
    line-height: 60px;
    background-color: #FFFFFF;
    display: flex;
}

.img-profile-hdr {
    height: 42px;
    width: 42px;
    border-radius: 70%;
    vertical-align: middle;
    margin-top: 8px;
    margin-left: 12px;
    margin-right: 12px;
}

.hdr-text {
    font-size: 14px;
    font-weight: 600;
}

.ellipsis {
    position: relative;
    margin-left: 400px;
}

.content-photo { /* 포토 콘텐츠 */
    height: 614px;
    width: 614px;
}

.photo {
    height: 614px;
    width: 612px;
    object-fit: cover;
}

.box-button {
    display: flex;
    height: 54px;
    width: 614px;
    line-height: 54px;
}

.button-left {
    margin-left: 20px;
    width: 200px;
}

.bookmark {
    height: 54px;
    width: 54px;
    line-height: 54px;
    text-align: center;
    position: absolute;
    right: 600px;
}

.likes {
    height: 24px;
    width: 614px;
}

.likes-profile {
    height: 20px;
    width: 20px;
    border-radius: 70%;
    margin-left: 15px;
    margin-right: 5px;
}

.likes-text {
    width: 524px;
    font-size: 14px;
    font-weight: 600;
}

.content-text {
    height: 85px;
    padding: 8px 16px 0 16px;
}

.content-id {
    height: 18px;
    font-size: 14px;
    font-weight: 600;
}

.content-reply {
    height: 18px;
    font-size: 14px;
    margin-left: 5px;
}

.reply-more {
    height: 18px;
    margin-top: 5px;
    font-size: 14px;
    color: #8E8E8E;
}

.reply-date {
    height: 18px;
    margin-top: 5px;
    font-size: 10px;
    color: #8E8E8E;
}

.reply {
    display: flex;
    height: 53px;
    width: 612px;
    line-height: 53px;
    border-top: 1px solid #DBDBDB;
    background-color: white;
}

.box-smile {
    height: 40px;
    width: 40px;
    vertical-align: middle;
    margin-left: 12px;
}

.reply-input {
    height: 40px;
    width: 500px;
    vertical-align: middle;
    color: #8E8E8E;
}

.reply-button {
    font-weight: 600;
    color: #E6F4FE;
}

.side {
    width: 320px;
    position: relative;
    margin-left: 30px;
}

.side-title {
    display: flex;
    height: 25px;
    width: 320px;
    line-height: 25px;
    margin-bottom: 20px;
}

.side-text {
    display: inline;
    font-size: 14px;
    font-weight: 600;
    color: #8E8E8E;
    vertical-align: middle;
    margin-right: 140px;
}

.side-text-btn {
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}

.account-profile {
    height: 50px;
    width: 320px;
}

.box-profile {
    height: 56px;
    width: 340px;
    line-height: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    /*display: flex;*/
    position: relative;
}

.img-account {
    height: 32px;
    width: 32px;
    border-radius: 70%;
    border: 1px solid #DBDBDB;;
    vertical-align: bottom;
    margin-right: 5px;
}

.account-name {
    font-size: 14px;
    font-weight: 600;
    vertical-align: top;
}

.account-text {
    display: flex;
    position: relative;
    height: 22px;
    width: 300px;
    bottom: 15px;
}
.account-state {
    font-size: 12px;
    color: #8E8E8E;
    bottom: 120px;
    margin-left: 42px;
}

.follow {
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
    color: #1DA0f6;
}

#footer {
    position: absolute;
    height: 90px;
    width: 300px;
    top: 270px;
    font-size: 12px;
    color: #8E8E8E;
}
profile
hyelog
다 놓치고 있습니다
이전 포스트

개인 프로젝트2: 인스타그램 데스크탑 UI클론 2

다음 포스트

GIT 특강

1개의 댓글

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

안녕하세요 신혜님, 김준태 튜터입니다!
코드를 살펴보았는데요, 전체적으로 깔끔하게 잘 작성하신 것 같습니다.
한 가지만 피드백을 드리자면, 현재는 footer 에 absolute 를 이용해서 배치를 하셨는데, absolute 를 적용시키지 않고도 충분히 배치가 가능해보입니다. 다른 방식으로 배치가 가능하다면 absolute 사용은 최대한 지양하시는게 좋습니다! 나중에 시간나실때 꼭 한번 고민해보시기 바랍니다!
수고많으셨어요!

답글 달기