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 영역, 댓글 컨테이너 그리고 시간을 보여주는 타이머 영역과, 댓글 필드 부분으로 이루어져 있습니다.