Today

오늘은 블로그에서 반복되는 글 목록 형식을 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가지 방법이 있다.

1. float:left를 사용하기
2. display:inline-block

<div>를 중앙 정렬할때

• margin-left: auto, margin-right: auto; 를 사용하기