오늘은 블로그에서 반복되는 글 목록 형식을 HTML과 CSS로 만들어 보았다.
전체를 다 만들지는 않았고, <div>
태그를 사용해서 정렬을 하는 정도만 사용했다.
<div class="container">
<div class="blog-content">
<div>
<img src="top.jpg" class="blog-profile">
<div class="blog-name">
<h4 style="margin:5px;">이름</h4>
<p style="margin:5px;">날짜</p>
</div>
</div>
<div style="clear:both"></div>
<div style="margin-top:10px;">
<h4>블로그 글</h4>
<p>가성비 맛집 발견</p>
</div>
</div>
</div>
<div class="blog-img">
<img src="top.jpg" style="width: 120%" />
</div>
</div>
레이아웃을 만들때는 <div>
를 사용해서 세분화하려고 하기
<div>
태그는 한 줄의 공간을 모두 차지하려는 성질이 있음.
위 사진 처럼 2개의 div를 나열하기 위해서는 2가지 방법이 있다.
<div>
를 중앙 정렬할때