빡공단 19일차

8670 단어 클론코딩인스타그램CSS빡공단htmlCSS

[19강] 레이아웃 잡기

인스타그램 페이지 레이아웃만 잡기


<body>
       <nav>

        </nav> <!-- header 부분 -->
        <div id="container"> <!-- main 화면 부분 -->
            <section> <!-- main 중 aside를 제외한 부분 -->
                <article id="story"> <!-- 스토리 부분 -->

                </article>
                <article id="content"> <!-- 내용 부분 -->
                    <div class="post"></div> <!-- 글이 올라오는 부분 -->
                </article>
            </section>
            <aside> <!-- 오른쪽의 aside bar -->
               
            </aside>
        </div>
    </body>
body {
    margin: 0;
}

➰ 여백을 없애기 위해 body의 margin을 0으로 둔다.



⭐ nav(header) 잡기

➰ 헤더부분

nav {
    height: 54px;
    background-color: red;
}

➰ 높이 54px, 배경을 빨간색으로 구분!



⭐ container 잡기

#container {
    display: flex;
}

: container 안에 content 부분과 aside 부분을 가로로 배치해야 하기 때문에 display: flex로 바꿔준다.


🌕 story 부분 잡기

➰ 스토리부분

#story {
    height: 84px;
    padding: 16px 0; /* 두 개로만 적으면 왼쪽부터 위아래, 오른쪽왼쪽 양옆의 padding이 설정됨*/
    border: solid black 1px;
}

➰ 높이 84px, padding을 위아래로만 16px을 줬다. 테두리를 줘 스토리 부분을 구분했다.


🌕 content 부분 잡기

➰ 콘텐츠 부분 완성

🌔 section

section {
    flex: 1; /* flex의 자식일 경우에 차지할 수 있는 부분을  전부 다 차지.*/
    background-color: yellow;
}

➰ content를 section과 aside로 분류. display: flex를 이용해 가로로 배치

➰ flex: 1을 이용해 aside의 크기를 제외한 나머지를 모두 section으로 차게 한다.

➰ 배경을 노란색으로 구분.

🌔 aside

aside {
    width: 293px;
}

@media (max-width: 1000px) {
    aside {
        display: none;
    }
}

➰ aside의 가로를 293px로 두면 이제 나머지는 다 section이 된다.

➰ 미디어쿼리를 이용해 가로 크기가 1000px보다 작아지면 aside바가 화면에서 사라지게 만든다.
➰ 빈곳이 aside 부분.




🍒 정리

드디어 인스타그램 웹 페이지 틀을 만들었다! 아직 따라하기밖에 안 해서 뭐가 뭔지 잘 모르겠지만, 빨리 다 배우고 혼자 만들고 싶다!
이렇게 구역부터 먼저 나누고 해야하는 걸, 나는 일단 다 만들어놓고 배열하려고 하니 안 맞는 게 많았다. 이런 노하우?를 이제야 알다니. 이제라도 알았으니 인스타그램 만들기랑 게시판 만들기에 잘 활용해야겠다.
그렇다면 오늘 배운 것을 써먹기 위해 오후에는 게시판 틀부터 짜야겠다!!

[백준] BOJ_1697 숨바꼭질 JAVA
javascript object 쿼리문 연습

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage