본문 바로가기
지속가능티끌/웹,워드프레스

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

by 리치굿맨 2014. 10. 30.

 

 

 

개요.

   
 

본 글에서는  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.


댓글0


   
현물 |선물 인버스 |선물 USDT     현물 | 선물 USDT |봇제작툴/카피트레이딩     현물 |선물 인버스 |선물 USDT     선물 인버스 |선물 USDT