워드프레스 테마 만들기 10편. CSS 이용하여 박스 그리드 표현하기.

 

	개요.
	본 글에서는  CSS를 이용하여 박스 그리드 만드는 방법을 보이고 포스트 목록에 적용하여 글들이 박스 그리드로 리스팅되게 한다.   설명. CSS는 html 의 특정 블럭을 웹페이지에서 표현할때 다양화 할 수 있다는 장점이 있다.  박스 그리드 표현에 대해 간단히 예를 통해서 구현방법을 익혀본다. 본 글에서는 포스트 리스트를 박스 그리드로 표현하는 것을 구현해본다. 즉, 웹페이지에서 보이는 아래 붉박의 포스트 리스트를 각각을 박스로 처리해서 그리드로 표현한다.

 

 

	1. 각 포스트에 클래스 지정하기.
	우리는 CSS에서 각 포스트를 선택해야 하므로 index.php 에서 포스트 표현하는 부분에 아래 처럼 <div class="test_box"> </div> 기록한다. 모든 포스트는 동일한 클래스 이름 test_box 를 갖게된다.    <?php get_header(); ?> <div id="content"> <p>테마만들기 시험중. 테마명 : igotit Skeleton</p> <p> <img src = "https://googledrive.com/host/0B-X3LExoaBouaWJtT3RyVjhOZDg/Tree_igotit.jpg" width=400> </p> <?php if (have_posts()) :    while (have_posts()) : the_post(); ?>          <div class="test_box"><?php the_ID();?> :          <a href=<?php the_permalink();?>><?php the_title();?> </a>    </div> <?php    endwhile; endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>

 

 

	2. style.css 수정하기.
	style.css 의 마지막 줄에 아래를 추가한다. 앞의 1에서 html 측에 설정한 test_box를 선택자로 하여 내부 속성에서 display : inline-blcok; 으로 한것이 중요하다. 이것대신 float: left; 로 해도 되나 display : inline-blcok; 이 더 편하다.  /*test_box*/ .test_box{  display: inline-block;  width: 120px;  height: 80px;  margin: 1em;  border: 1px solid #000000; }   위 style.css와 index.php 를 테마 폴더에 올리고 결과 확인해보면 아래 그림의 붉은 박스내의 영역 처럼 박스 그리드로 처리된 포스트 들이 보인다.

 

 

 

 

본 글이 포함된 통합 정리 글   WordPress 활용정보 정리 : http://igotit.tistory.com/23

 

 

175.