인스타그램 피드 레이아웃

2023. 3. 7. 11:42ㆍzerobase/HTML&CSS

728x90

기본 구조 잡기

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="wrap">
        <div class="instargram">
            <div class="header"></div>
            <div class="img"></div>
            <div class="footer"></div>
        </div>
    </div>
</body>

</html>
body {
    background-color: #c6c6c6;
    margin: 0px;
}

.wrap {
    background-color: white;
    width: 375px;
    height: 100vh;
    margin: 0 auto;

    display: flex;
    align-items: center;
}

.instargram {
    width: 100%;
    height: 550px;
    border: 1px solid black;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px 375px 1fr;
    grid-template-areas:
        "header"
        "img"
        "footer";

    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}

.header {
    grid-area: header;
    width: 100%;
    height: 100%;
}

.img {
    grid-area: img;
    width: 100%;
    height: 100%;
}

.footer {
    grid-area: footer;
    width: 100%;
    height: 100%;
}

    ● grid로 영역 나누기

Header 영역 완성하기

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="./style.css">

    <style>
        p {
            margin: 0px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="instargram">
            <div class="header">
                <div class="header-left">
                    <img class="header-img" src="../img/최수영.png" width="38px" height="38px">
                    <p>째재</p>
                </div>
                <div class="header-right">
                    <p class="right-menu">···</p>
                </div>
            </div>
            <div class="img"></div>
            <div class="footer"></div>
        </div>
    </div>
</body>

</html>
body {
    background-color: #c6c6c6;
    margin: 0px;
}

.wrap {
    background-color: white;
    width: 375px;
    height: 100vh;
    margin: 0 auto;

    display: flex;
    align-items: center;
}

.instargram {
    width: 100%;
    height: 550px;
    border: 1px solid black;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px 375px 1fr;
    grid-template-areas:
        "header"
        "img"
        "footer";

    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}

.header {
    grid-area: header;
    width: auto;
    height: auto;
    margin: 5px 10px;

    font-weight: bold;
}

.header-left {
    float: left;
    display: flex;
    align-items: center;
}

.header-img {
    border: 1px solid black;
    border-radius: 50%;
    margin-right: 10px;
}

.header-right {
    float: right;
    height: 100%;

    display: flex;
    align-items: center;
}

.right-menu {
    cursor: pointer;
    user-select: none;
}

.img {
    clear: both;
    grid-area: img;
    width: 100%;
    height: 100%;
}

.footer {
    grid-area: footer;
    width: 100%;
    height: 100%;
}

    ● header에 공간부여하고 이미지 넣기

    ● .right-menu { cursor: pointer; user-select: none;}

Img 영역 완성하기

<div class="img">
                <img src="../img/최수영.png" width="100%" height="100%">
            </div>

    ● img class안에 이미지 삽입 후 사이즈 조절

Footer 영역 완성하기

<div class="footer">
                <div class="top-left">
                    <span>heart</span>
                    <span>comment</span>
                    <span>DM</span>
                </div>
                <div class="top-center">
                    <ul>
                        <li style="background-color: blue;"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="top-right">
                    <span>sheared</span>
                </div>
                <div class="like">
                    <p>
                        <b>100 Likes</b>
                    </p>
                </div>
                <div class="comment">
                    <p>
                        <b>Lorem</b> ipsum, dolor sit amet consectetur adipisicing elit. Asperiores numquam explicabo
                        accusamus,
                        amet neque vero ex dolorum rerum at praesentium eligendi corporis ad facere minus, et, qui alias
                        accusantium? Temporibus.
                    </p>
                </div>
            </div>
.footer {
    grid-area: footer;
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px auto auto;
    grid-template-areas:
        "top-left top-center top-right"
        "like like like"
        "comment comment comment";
}

.top-left {
    grid-area: top-left;
    display: flex;
    font-size: 10px;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-around;
}

.top-center {
    grid-area: top-center;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.top-right {
    grid-area: top-right;
    display: flex;
    font-size: 10px;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.like {
    grid-area: like;
    font-size: 12px;
    margin: 0px;
}

.comment {
    grid-area: comment;
    font-size: 10px;
    margin: 0px;
}

ul {
    padding: 0px;
    display: flex;
    justify-content: space-between;
    list-style: none;
    width: 50%
}

li {
    width: 7px;
    height: 7px;
    background-color: lightgray;
    border-radius: 50%;
}

    ● grid로 영역 잡은 뒤에 코딩해주면 좀 더 편리하게 할 수 있음

 

'zerobase > HTML&CSS' 카테고리의 다른 글

HTML 한 걸음 더(2)  (0) 2023.03.08
HTML 한 걸음 더(1)  (2) 2023.03.08
CSS 레이아웃  (0) 2023.03.06
HTML 기본 태그  (0) 2023.03.05
HTML/CSS 첫 걸음  (0) 2023.03.05

관련글

티스토리툴바