How To – 블로그 레이아웃

w3.css

블로그 레이아웃

CSS를 사용하여 반응형 블로그 레이아웃 만드는 방법을 알아보자.

화면 너비에 따라 2개 열에서 전체 너비 열까지 다양하게 변경되는 반응형 블로그 레이아웃 만드는 방법을 알아보자.

블로그 레이아웃 만드는 방법

1단계) HTML 추가

<div class="header">

  <h2>Blog Name</h2>

</div>

<div class="row">

  <div class="leftcolumn">

    <div class="card">

      <h2>TITLE HEADING</h2>

      <h5>Title description, Dec 7, 2017</h5>

      <div class="fakeimg" style="height:200px;">Image</div>

      <p>Some text..</p>

    </div>

    <div class="card">

      <h2>TITLE HEADING</h2>

      <h5>Title description, Sep 2, 2017</h5>

      <div class="fakeimg" style="height:200px;">Image</div>

      <p>Some text..</p>

    </div>

  </div>

  <div class="rightcolumn">

    <div class="card">

      <h2>About Me</h2>

      <div class="fakeimg" style="height:100px;">Image</div>

      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>

    </div>

    <div class="card">

      <h3>Popular Post</h3>

      <div class="fakeimg">Image</div><br>

      <div class="fakeimg">Image</div><br>

      <div class="fakeimg">Image</div>

    </div>

    <div class="card">

      <h3>Follow Me</h3>

      <p>Some text..</p>

    </div>

  </div>

</div>

<div class="footer">

  <h2>Footer</h2>

</div>

2단계) CSS 추가

* {

  box-sizing: border-box;

}

body {

  font-family: Arial;

  padding: 20px;

  background: #f1f1f1;

}

.header {

  padding: 30px;

  font-size: 40px;

  text-align: center;

  background: white;

}

.leftcolumn {

  float: left;

  width: 75%;

}

.rightcolumn {

  float: left;

  width: 25%;

  padding-left: 20px;

}

.fakeimg {

  background-color: #aaa;

  width: 100%;

  padding: 20px;

}

.card {

  background-color: white;

  padding: 20px;

  margin-top: 20px;

}

.row:after {

  content: "";

  display: table;

  clear: both;

}

.footer {

  padding: 20px;

  text-align: center;

  background: #ddd;

  margin-top: 20px;

}

@media screen and (max-width: 800px) {

  .leftcolumn, .rightcolumn {

    width: 100%;

    padding: 0;

  }

}