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

워드프레스 테마 만들기 9편. CSS 이용하여 레이아웃 만들기.

by i.got.it 2014. 10. 30.

 

본 글은 "워드프레스 테마 만들기" 시리즈 글 9편이며, 8편에 연결된 내용임.

 

워드프레스 테마 만들기 8편. searchform.php추가. 보기 -> http://igotit.tistory.com/163  

 

 

 

 

개요.

   
 

본 글에서는 테마의 style.css 에 css 구문 추가하여 웹페이지에서 보이는 레이아웃을 만드는 과정을 설명한다.

 

본 글에서는 CSS개념같은 기초적인 사항은 별도의 설명없이 진행된다. 최소한 아래 CSS의 개념은 알고있는 상태에서 가능한 작업이다.

 

CSS 요점정리 보기 -> http://igotit.tistory.com/146

CSS 선택자 활용정보 요약 -> http://igotit.tistory.com/166

CSS 파일 만들기 -> http://igotit.tistory.com/169

 

설명.

현재의 테마의 첫페이지가 웹페이지에서 보이는 모습은 아래와 같이 헤더, 내용부분, 사이드바, 푸터 순으로 위에서 아래로 단일한 배치를 갖고 있다.

 


 

위 페이지는 index.php 로 표현되는 페이지이며, index.php 코드에서 제일 먼저 header.php가 인클루드 되고, 그다음 컨텐츠 영역, sidebar.php, footer.php 순서대로 html이 만들어지고 있으므로 웹서버에서는 순차적으로 파싱되어 위의 그림처럼 html 이 순서대로 표현되는것은 당연한 상황이다.

 <?php get_header(); ?>

<p>테마만들기 시험중. 테마명 : igotit Skeleton</p>

<p>이미지 추가시험</p>

<img src = "https://googledrive.com/host/0B-X3LExoaBouaWJtT3RyVjhOZDg/Tree_igotit.jpg" width=400>
<hr>

<?php

if (have_posts()) :
   while (have_posts()) :
      the_post();
         the_ID();?> :
         <a href=<?php the_permalink();?>><?php the_title();?> </a>
         <br>
<?php
   endwhile;
endif;

?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

CSS를 사용하지 않으면서 웹페이지의 배치를 바꾸려면 (예: sidebar 를 오른쪽에 배치하고 싶다.) 위 index.php 에  좌/우 분리되는 테이블을 만들고 본문 내용부분은 왼쪽, 사이드바 영역을 테이블의 오른쪽에 기록하여 달성할 수 있다. 과거에는 테이블로 페이지의 레이아웃을 흔히 만들어왔었다.

 

그러나, 테이블로 레이아웃을 설정해버리면 레이아웃 변경해야 할 때마다 index.php 를 수정하는 작업 해야한다. 코드와 디자인의 분리가 달성되지 못하는 상황이 벌어진 것이다.

 

CSS로 설정하게 되면 레이아웃의 결정이 CSS에서 이뤄지게 되므로, 레이아웃 변경해야 하는 경우 index.php 는 수정하지 않고 CSS파일만 변경하면 되므로 코드와 디자인의 분리가 달성된다.

 

본 글에서의 최종적으로 만들어진 레이아웃 모습. : 위 그림과 같은 배치상태를 CSS를 이용하여 아래 그림처럼 레이아웃을 설정한다.



 

 

 

 

 

 

1. php 에서 블럭과 아이디 지정

   
 

html 에서 블럭으로 처리할 구간 아이디 지정하기.

CSS로 레이아웃 만들기 위하여 가장 먼저 할 일은 웹페이지에서 보일때 서로 분리되어 모듈로 보일것 들을 지정하는 것으로 시작한다.

즉, 우리는 헤더영역과 사이드바영역, 푸터영역, 그리고 내용이 보이는 영역은 분리하여 배치하려고 할것이다.

따라서,html 상에서 해당영역을 <div id=""> </div> 로 블럭을 정의해야한다.

 

header.php 에 블럭과 아이디 지정.

아래 파란색 부분. 

...

 <body>
<div id="header">
<?php wp_nav_menu();?>
</div>

 

footer.php 에 블럭과 아이디 지정.

아래 파란색 부분.

<div id="footer">
footer.php 워드프레스에서 테마 만들기 방법<b>보기</b> -> <a href="http://igotit.tistory.com/85" target=_blank>http://igotit.tistory.com/85</a>
</div>
</body>
</html>

 

sidebar.php 에 블럭과 아이디 지정.

아래 파란색 부분.

<div id="sidebar">
<?php dynamic_sidebar('Main Sidebar'); ?>
</div>

 

index.php 에서 내용부분 블럭과 아이디 지정.

테마의 index.php 의 내용부분에 content 블럭을 지정하고 아이디를 content 로 할당했다.

 

<?php get_header(); ?>
<div id="content">
<p>테마만들기 시험중. 테마명 : igotit Skeleton</p>
<p>이미지 추가시험</p>
<img src = "https://googledrive.com/host/0B-X3LExoaBouaWJtT3RyVjhOZDg/Tree_igotit.jpg" width=400>
<hr>
<?php
if (have_posts()) :
   while (have_posts()) :
      the_post();
         the_ID();?> :
         <a href=<?php the_permalink();?>><?php the_title();?> </a>
         <br>
<?php
   endwhile;
endif;
?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

 

 

 

  끝. - php(html) 에서 블럭과 아이디 지정함.

 

 

 

 

 

2. style.css 에서 블럭아이디 별로 css 구문 작성.

   
 

앞의 1에서 html 에 블럭을 지정하였고, 각 블럭에 아이디를 할당해뒀다.

이제 style.css에서 css구문으로 각 아이디 별로 속성 설정으로 원하는 레이아웃이 나오게 한다.

 

style.css에 구문추가.

우리의 테마 만들기 과정에서 처음으로 style.css에 내용 추가 작업이다. 아래 파란색 부분이 추가된 CSS구문들.

앞의 1의 html 에서 지정한 아이디들을 대상으로 선택하고 있고(즉, #header, #content, #sidebar, #footer), 각각마다 공통적으로 border: 설정을 하고있다. 이는 웹페이지에서 보일때 해당 블럭의 경계지점을 쉽게 파악할려고 넣어둔 것이다.

각 구문의 속성들을 이것 저것 수정하다보면 감이 잡힌다.  

 

/*
Theme Name: igotit skeleton
Theme URI: http://igotit.kr/
Author: igotit
Author URI: http://igotit.kr
Description: Theme Skeleton
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: skeleton
Text Domain: igotitskeleton
*/

 /*Layout*/
#header{
 margin-bottom: 10px;
 border: 1px solid #000000;
}
#content{
 width: 700px;
 float: left;
 margin-bottom: 10px;
 border: 1px solid #000000;
}
#sidebar{
 margin-left: 710px;
 min-width: 300px;
 border: 1px solid #000000;
}
#footer{
 clear: both;
 border: 1px solid #000000;
}

 

웹페이지에서 레이아웃 확인하기.

 

위 CSS가 적용된 웹페이지는 아래그림과 같다. 레이아웃만 적당히 잡아도 볼만한 모습이 나오기 시작한다. 


 


 

 
 

 

 

 

 

본 글이 포함된 통합 정리 글

 

WordPress 활용정보 정리 : http://igotit.tistory.com/23

 

 

173.

 

 

 

저작자표시 비영리 변경금지

'지속가능티끌 > 웹,워드프레스' 카테고리의 다른 글

워드프레스 테마 만들기 11편. CSS 이용하여 메뉴 만들기.  (0) 2014.10.31
워드프레스 테마 만들기 10편. CSS 이용하여 박스 그리드 표현하기.  (0) 2014.10.30
워드프레스 테마 만들기 8편. 검색창 템플릿 searchform.php 추가하기.  (0) 2014.10.30
CSS 파일 만들기.  (0) 2014.10.29
CSS 선택자 활용정보 요약.  (0) 2014.10.29

관련글

댓글


 
.

비트코인



암호화폐       외환/나스닥/골드         암호화폐/외환/나스닥/골드
     
현물 |선물 인버스 |선물 USDT       전략매니저(카피트레이딩)         프랍 트레이더 온라인 지원가능. MT4,MT5



티스토리툴바