Blog 글 목록 만들기

팁0) 뭘 만들든 레이아웃은 항상 박스부터 만들고 시작하면 됩니다.

여러분이 만들 디자인위에 전부 박스를 그리는겁니다.

그리고 이 박스들을 전부 <div>로 구현해놓으면 됩니다.

그리고 안에 글넣고 그림넣고 하면 끝입니다.

기억하셔야할게 <div>는 그냥 쓰면 display : block 때문에 위아래로 배치됩니다.

좌우로 나란히 배치하고 싶으면 float, 혹은 inline-block 쓰면 됩니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="blog-content">
        <div>
          <img src="v.jpg" class="blog-profile">
          <div class="blog-name">
            <h4 style="margin: 8px">이름</h4>
            <p style="margin: 8px"> 날짜</p>
          </div>
        </div>
        <div style="clear: both;"></div>
        <div>
          <h4>블로그 글 제목</h4>
          <p> 블로그 내용</p>
        </div>

    </div>
    <div class="blog-img">
      <img src="v.jpg" width="100%">
    </div>

  </div>
</body>
</html>
main.css
.container {
    width: 800px;
}


.blog-content {
    width: 80%;
    height: 200px;
    background: #eee;
    float: left;

}
.blog-img {
    width: 20%;
    height: 200px;
    background: coral;
    float: left;
}

.blog-profile {
    width: 50px;
    display: block;
    float: left;
}
.blog-name{
    float: left;

이후의 margin 세부조정 등과 같은 요소들은 직접 해보면 됩니다.

레이아웃 어떻게 짜는지가 중요!

🎈TIP. PC 레이아웃을 만들때에는 container 만들고 width 지정 해주는게 좋다. 안그러면 브라우저 축소시에 내부 div 박스가 찌그러짐

Previousinline-blockNextCSS Selector

Last updated