'Layout' 태그의 글 목록

Layout

TABLE, 정말 레이아웃에 쓰면 그렇게 나쁜 것인가? 2011.05.14
CodeIgniter 레이아웃 이용하기 2010.03.22

TABLE, 정말 레이아웃에 쓰면 그렇게 나쁜 것인가?

2011. 5. 14. 13:44

WEB 2.0 이 대두되면서부터 TABLE 태그로 레이아웃을 짜면 아주 아주 나쁜 행위라고 많은 사람들이 얘기하고 있다. 그런데, 정말로 TABLE 대신 모두 DIV 로 레이아웃을 구성해야만 하는 것인가? 이 것은 절대로 그런 것만은 아니라고 말하고 싶다.

기존의 TABLE 을 이용한 레이아웃은 확실하게 문제가 있었다. 가장 큰 문제점은 디자인을 위해서 심하게 중첩된 TABLE을 사용하여 너무나도 복잡스런 코드를 양산하여 유지보수를 어렵게 만든다는 것이었다. 이 문제를 해결하는 가장 간단한 방법은, TABLE을 중첩시키지 말고 최대한 CSS 를 이용하여 디자인하는 것이다. 굳이 DIV 태그로 대체하지 않아도 된다는 것이다.

물론, TABLE을 이용한 레이아웃에는 이 외에 몇가지 사소한 문제점이 더 있다. http://ilmol.com/wp/2005/06/09/25/ 에서 일몰님이 얘기한 것 만 봐도 DIV로 하는 것이 더 나은 것처럼 보인다. 대부분의 이런 주장들은 웹페이지를 문서의 관점에서 보면 아주 타당하다. TABLE 보다 더욱 다루기 편하고, 빠르고, 유연하다는 것을 인정한다. 문서라고 본다면 CSS를 제거하여도 내용을 파악하는데 문제가 없어야 좋은 웹페이지라고 볼 수 있다.

그러나, 웹은 문서로써의 개념도 가지고 있지만, 어플리케이션으로써 이용되는 경우도 많이 있다. PC에서 동작되는 프로그램, FLEX, Silverlight 를 보면, TABLE 형태의 레이아웃 태그가 지원이 되며, 레이아웃을 위해서 가장 많이 쓰이는 것을 확인할 수 있다. 그렇지만, 여기에서 그런 레이아웃 태그를 사용한 것에 대해서 문제시 하는 경우는 거의 없다.

DIV 태그도 레이아웃을 구현하는데 절대적인 것은 아니다. 아직 브라우저 마다 구현이 다르며, 버그를 가지고 있어서 여러가지 브라우저에서 같게 보이게 하려면 많은 공수가 들어간다.

내가 주장하는 바는,

디자인에 대한 것은 CSS를 통해서 구현하며,
TABLE 과 DIV의 장단점을 알고, 상황에 맞추어 적절하게 사용하는 것이 좋다.

보통, TABLE을 레이아웃으로 사용하기에 괜찮은 경우는 아래와 같은 상황이 될 것이다.

어플리케이션 성격이 아주 강하며,
형태가 자주 변하지 않는 정적인 화면 구조를 갖는 경우

아무래도, DIV와 TABLE을 적절히 섞어 쓰는 것이 좋을 듯 하다. 모두 다 DIV로 하거나, TABLE로만 하는 것은 옳지 않다. 그동안 잘 써온 TABLE을 너무 미워하지 말자. *^^*

또 다른 TABLE 레이아웃 옹호 글로 http://www.flownet.com/ron/css-rant.html 이 있다.

저작자표시 비영리 동일조건

'ETC > IT' 카테고리의 다른 글

perl 스크립트를 통한 해킹 사고 (0)	2011.06.23
(Freeware for Business) 다씨 : 국산 이미지뷰어 (0)	2011.06.23
(Freeware for Business) Viu 2 : 이미지뷰어 (0)	2011.05.11
초간단 Git 사용법 (0)	2011.04.27
CentOS 5.x 설치 (0)	2011.03.29

CodeIgniter 레이아웃 이용하기

2010. 3. 22. 15:01

CodeIgniter 에는 기본으로 레이아웃을 사용할 수 있지가 않다. 여러개의 뷰로드하기 를 통해서 같단히 레이아웃 효과를 낼 수 있지만, 부족한 부분이 있다.

CodeIgniter 에서 Layout 을 위한 방법이 여러가지 존재한다. 다음을 참고하자.

Layout Library 를 이용한 방법

http://codeigniter.com/wiki/layout_library/ 에서 Layout Library를 구하고, 사용법을 확인할 수 있다.
이 라이브러리는 CakePHP 스타일의 레이아웃을 사용할 수 있도록 해준다.

/application/libraries/Layout.php 에 다음 소스를 저장한다.

<?php  
if (!defined('BASEPATH')) exit('No direct script access allowed');
 
class Layout
{
    var $obj;
    var $layout;
 
    function Layout($layout = "layout_main")
    {
        $this->obj =& get_instance();
        $this->layout = $layout;
    }
 
    function setLayout($layout)
    {
        $this->layout = $layout;
    }
 
    function view($view, $data=null, $return=false)
    {
        $loadedData = array();
        $loadedData['content_for_layout'] = $this->obj->load->view($view,$data,true);
 
        if($return) {
            $output = $this->obj->load->view($this->layout, $loadedData, true);
            return $output;
        } else {
            $this->obj->load->view($this->layout, $loadedData, false);
        }
    }
}
?>

라이브러리 로딩은 2가지 방법이 있는데, 첫번째는 컨트롤러의 생성자에서

$this->load->library('layout', 'layouts/default');
// 위에서 layout 라이브러리를 로딩할 때, 두번째 인자가 적용되지 않으므로,
// 아래와 같이 별도로 default layout 을 설정해주어야 한다.
$this->layout->setLayout("layouts/default");

와 같이 적어주는 방법과 두번째는 /application/config/autoload.php 에

$autoload['libraries'] = array('layout');

를 적어주어서, 매번 컨트롤러 생성자에 적어주지 않게 하는 방법이 있다. 그리고 나서, 컨트롤러에서 아래와 같이 해주면, 레이아웃과 내용이 로딩 될 것이다.

// layout 을 적용하지 않고 출력하고자 할 때
// $this->load->view('admin/list');
 
// 다른 layout 을 적용하고자 할 때
// $this->layout->setLayout("layouts/default");
 
$this->layout->view('admin/list');

/application/views/layouts/default.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>CI 레이아웃</title>
</head>
<body>
<?= $content_for_layout ?>
</body>
</html>

Hook을 이용한 Layout 처리

Hook을 이용한 Layout 정리, http://codeigniter.com/forums/viewthread/57902/ 를 참고하였습니다.

HOOK 사용 설정

config/config.php
```
$config['enable_hooks'] = TRUE;
```

config/hooks.php

$hook['display_override'][] = array(
    'class'    => 'Yield',
    'function' => 'doYield',
    'filename' => 'Yield.php',
    'filepath' => 'hooks'
);

HOOK 파일 추가

hooks/Yield.php

<?php  if (!defined('BASEPATH')) exit('No direct script access allowed');
 
class Yield
{
    function doYield()
    {
        global $OUT;
        $CI =& get_instance();
        $output = $CI->output->get_output();
        $CI->yield = isset($CI->yield) ? $CI->yield : TRUE;
        $CI->layout = isset($CI->layout) ? $CI->layout : 'default';
        if ($CI->yield === TRUE) {
            if (!preg_match('/(.+).php$/', $CI->layout)) {
                $CI->layout .= '.php';
            }
            $requested = APPPATH . 'views/layouts/' . $CI->layout;
            $layout = $CI->load->file($requested, true);
            $view = str_replace("{yield}", $output, $layout);
        } else {
            $view = $output;
        }
        $OUT->_display($view);
    }
}
?>

default.php 레이아웃 파일 추가

views/layouts/default.php

<html>
<header>
</header>
<body>
  <div>
  </div>
  {yield}
  <div>
  </div>
</body>
<html>

컨트롤러에서 레이아웃 사용법

class Test extends Controller {
 
    //레이아웃 파일 설정
    var $layout = 'my_layout_file';
 
    function Test()
    {
        parent::Controller();
    }
 
    function index()
    {
        // 로드되는 view 파일들은 레이아웃 파일안에 {yield} 와 항상 replace  됨.
        $this->load->view('main');
        $this->load->view('sidebar');
    }
 
    function ajax_call()
    {
        // 레이아웃 파일을 사용하지 않을시
        $this->yield = FALSE;
 
        echo json_encode($array);
    }
 
    function need_another_layout()
    {
        $this->layout = 'another_layout';
    }
}

참고
layout 파일안에 데이타를 넘겨줘야 할 경우, 다른 view파일을 로드할때 데이타를 같이 넘겨주거나,
```
$this->load->vars($data);
```
위처럼 글로벌로 넘겨주면 됩니다.

저작자표시 비영리 동일조건

'Language > PHP' 카테고리의 다른 글

CentOS+Apache+PHP+CodeIgniter+PGSQL (0)	2011.04.27
WAMP (Windows+Apache+MySQL+PHP) 설치 (0)	2010.08.23
CodeIgniter 설치 (Debian+Apache+PHP+CodeIgniter+MySQL) (0)	2010.03.21
메일박스 이동... (0)	2008.10.29
imap_open 실행시 느리게 연결되는 현상 해결 (0)	2008.10.10

PREV 1 NEXT

취미로 코딩하기