CSS 반응형 레이아웃을 살펴보겠습니다..

CSS:

.article {

  float: left;

  margin: 5px;

  padding: 5px;

  width: 300px;

  height: 300px;

  border: 1px solid black;

}  

HTML:

<h1>CSS Responsive Layout</h1>

<h3>브라우저의 폭을 줄였다 넓혔다 해보세요.</h3>

<div class="article">

  <h3>온라인 강좌 학교</h3>

  <p>홈페이지제작에 필요한 다양한 기술 교육</p>

  <p>300여가지의 무료온라인 교육</p>

</div>

<div class="article">

  <h3>꼭 필요한 유료강좌</h3>

  <p>그누보드5강좌</p>

  <p>PHP강좌</p>

  <p>앱강좌</p>

  <p>.....</p>

  <P>365ok에서만 맛볼 수 있는 풍부한 웹강좌</p>

</div>

<div class="article">

  <h3>TJ빌더</h3>

  <p>TJ빌더는 그누보드의 반응형 프로젝트입니다.</p>

  <p>TJ시리즈...</p>

</div> 

미리보기:

http://365ok.co.kr/dn/css/responsivelayout.html