main_container 영역을 만들고 main_container 안에 inner를, inner 안에 contents_box를 만들고 안에 contents들을 배치하여 contents 부분을 만들어보도록 하겠습니다.

간단하게 틀을 작성해보면 다음과 같습니다.

파일명 : index.html

**...**

                <div class="search_box">
                    <input type="text" placeholder="검색" id="search-field">
                    <div class="fake_field">
                        <span class="sprite_small_search_icon"></span>
                        <span>검색</span>
                    </div>
                </div>

                <div class="right_icons">
                    <div class="sprite_camera_icon"></div>
                    <div class="sprite_compass_icon"></div>
                    <div class="sprite_heart_icon_outline"></div>
                    <div class="sprite_user_icon_outline"></div>
                </div>
            </section>
        </header>

        **<section id="main_container">**
            **<div class="inner">**
                **<div class="contents_box">**
                    **<article class="contents">**
                    **</article>**
                **</div>**
            **</div>**
        **</section>**	
    </section>
</body>
</html>

margin을 주게 되면 margin 병합 현상이 일어나게 되므로, 컨텐츠를 밀 때에는 기본적으로 위에서 아래로 밀어주고 아래 컨텐츠가 위로 밀 때에는 padding-top을 이용하게 됩니다.

파일명 : css/style.css

**...**

**#main_container{
    padding-top: 130px;
    display: flex; /* 컨텐츠가 가운데에 위치할 수 있도록 함 */
    justify-content: center; /* x축 가운데 정렬 */
}

#main_container .inner{
    width: 935px;
    /* height: 500px; */
    /* background: red; */
}

.contents_box{

}

.contents{
    width: 614px;
    height: 500px;
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px; /* 테두리를 둥글게 만듬 */
    margin-bottom: 60px; /* 다른 contents들이 밀려야 되기 때문에 사이에 여백을 준다 */
    background: white;
}**

이제 contents영역을 분할해 보겠습니다.

아래 사진을 보면 작성자 정보가 있는 탑, 이미지를 보여주는 이미지 섹션, 아이콘, like 영역, 댓글 컨테이너 그리고 시간을 보여주는 타이머 영역과, 댓글 필드 부분으로 이루어져 있습니다.