BLOG ARTICLE layout | 1 ARTICLE FOUND

  1. 2008.11.02 4. 기본 레이아웃 설정

이번 장에서는 어느 페이지로 이동하던지 사이트 전체에서 상단과 하단의 내용을 동일하게 유지하기 위해, 사이트의 기본 레이아웃을 설정해 보겠습니다.   

1. 레이아웃 설정
어플리케이션 루트폴더에서 레이아웃 폴더(/app/views/layouts)로 이동합니다.

1) general.html.erb 생성
기본 레이아웃인 general.html.erb 파일을 작성합니다. ApplicationController에서 layout을 이 파일로 지정함으로써 모든 페이지에 적용되어 사용할 수 있습니다.

* general.html.erb
<%= render :partial => "layouts/header" %>
<%= @content_for_layout %>
<%= render :partial => "layouts/footer" %>

여기서는 공용으로 사용되는 헤더와 푸터를 출력하고 그 사이에 해당 View의 컨텐츠를 출력합니다. erb 파일에서는 "<%"와  "%>"내에서 eRuby 문법을 사용할 수 있습니다. "<%="는 해당 내용을 출력합니다.

<%= render :partial => "layouts/header" %>
partial의 layouts/header는 app/views/layouts 폴더에서 이름에 밑줄을 붙인 _header.html.erb 파일의 내용을 출력합니다.


2) _header.html.erb 생성
상단에 공통으로 보여질 헤더 템플릿입니다.

* _header.html.erb
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ko">
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Pragma" content="no-cache">
    <title>:: 내 ROR 홈페이지</title>
    <%= stylesheet_link_tag 'default' %>
    <%= javascript_include_tag :defaults %>
</head>
<body>
<h1 id="site-title">내 ROR 홈페이지</h1>
<ul id="main-menu">
    <li>소개</li>
    <li>앨범</li>
    <li>게시판</li>
</ul>
<div id="contents-body">

타이틀과 메타태그와 기본 스타일시트와 자바스크립트의 링크를 지정하고 상단에서 항상 출력할 사이트 제목과 메뉴목록을 지정합니다.

<%= stylesheet_link_tag 'default' %>
/public/stylesheets의 default.css 파일을 스타일시트의 링크를 생성합니다.

<%= javascript_include_tag :defaults %>
/public/javascripts에는 레일즈가 생성해 놓은 기본으로 사용하는 자바스크립트 파일들이 있습니다. 위의 설정으로 모든 기본 자바스크립트의 링크가 생성됩니다.


3) _footer.html.erb 생성
페이지의 하단에서 공통적으로 출력될 내용입니다. 여기서는 간단한 인사말만 출력해 봅니다.

* _footer.html.erb
</div>
<div id='footer'>반갑습니다. 여기는 제 홈페이지입니다.</div>
</body>
</html>


4) 레이아웃 지정
app/controllers/application.rb을 열어 아래와 같이 layout 'general'을 추가하여, 위에서 작성한 general 템플릿 파일을 기본 레이아웃으로 지정합니다.

* ApplicationController.rb
class ApplicationController < ActionController::Base
  layout 'general'
  helper :all # include all helpers, all the time

  protect_from_forgery # :secret => 'ccc2786e4f2c9f0b9fd22843cd5fc608'
end


5) 확인
리로드를 하여 현재까지의 작업을 확인합니다.


2. public 폴더 작업
위에서 기본 레이아웃을 위한 템플릿 파일들을 만들어 보았습니다. 이제 스타일시트를 작성해 보겠습니다.
 
1) 자바스크립트
public 폴더의 javascripts 폴더에는 기본적인 자바스크립트 파일들이 ROR에 의해서 생성되어 있습니다. 빈 application.js와 프로토타입, 스크립타큘러스의 js 파일들이 있습니다. 이 파일들은 erb에서 'javascript_include_tag :defaults'를 사용하여 간편하게 모든 자바스크립트 파일들을 링크할 수 있습니다.

* 프로토타입
프로토타입은 1.6.0.1버젼입니다. 최신버젼은 1.6.0.3이며 필요하시면 해당사이트에서 최신버젼을 다운로드 받아 교체할 수 있습니다.

* 스크립타큘러스
기본적인 controls.js, dragdrop.js, effects.js 파일이 설치되며, 몇가지 파일들은 빠져 있습니다. 필요하시면 해당사이트에서 최신버젼을 다운로드 받아 설치할 수 있습니다. 다운로드 받은 후에 압축을 풀고 test 폴더를 웹에서 확인하시면 쉽게 사용방법을 익힐 수 있습니다. 


2) 스타일시트 작성
public 폴더의 stylesheet 폴더에서 기본 레이아웃으로 사용할 default.css를 아래와 같이 또는 변경하여 작성합니다.

* default.css
body {
    padding:10px;
    color:#3f3f3f;
    font-size:10pt;
    font-family:돋움, Gulim, Arial, sans-serif;
}

#site-title {
    color:#64A8C3;
}

#main-menu {
    float:left;
    padding:0;
}

#main-menu li {
    float:left;
    font-size:1.2em;
    font-weight:bold;
    list-style:none;
    margin-right:12px;
}

#contents-body {
    clear:both;
    width:600px;
    margin:20px 0;
    padding:10px;
    border:2px dotted #efefef;
    background-color:#f5f5f5;
}

#footer {
    width:600px;
    text-align:center;
}

3) 확인
이제 리로드를 하여 지금까지의 작업을 확인합니다.

 
사진을 올릴 수 있는 앨범과 간단한 게시판을 하나 만들어 보고 삽질기를 끝낸 후에, 실무 프로젝트에 도입을 해볼려고 합니다. 구현방법이나 용어등에 모두 자신이 없네요. 역시나 많은 지도편달 부탁 드립니다.