들어가면서... |
레일즈에서는 페이지에서 사용하는 공통된 레이아웃을 제공해준다. 이를 이용하여 네비게이션, Header, Footer를 손쉽게 적용시켜 줄 수 있다. 또한, 이제까지는 특정한 메인 페이지없이 진행되었는데 메인 페이지를 설정하여 편하게 웹으로 접근이 가능한 형태로 변경하는 법을 보겠다.
이번 페이지에서의 목표는 일단, 메인페이지 위치를 설정한 후 간단한 네비게이션을 다는게 목표이다. 또한, 페이지 이동 구성을 만들어 볼 것이다.
메인페이지 변경 |
지금까지는 메인페이지를 키면 Rails에 대한 간략한 정보를 얻는 페이지가 있었을 것이다. 이제는 메인페이지를 켰을때 원하는 페이지가 나오도록 설정하도록 하겠다. 일단, 페이지 연결정보에 대한 모든 파일은 /config/routes.rb 에 저장되있다. 이 파일을 열어보도록 하자.
BookList::Application.routes.draw do
get "market/index"
resources :books
# The priority is based upon order of creation: first created -> highest priority.
# See how all your routes lay out with "rake routes".
# You can have the root of your site routed with "root"
# root 'welcome#index'
# Example of regular route:
# get 'products/:id' => 'catalog#view'
...
이런 형식으로 쭉 연결 설정이 주석처리로 되어있을 것이다. 위에서 색칠한 설명에과 예시를 보고 아랫줄에 한 줄을 추가시켜주자.
# You can have the root of your site routed with "root"
# root 'welcome#index'
root to: 'market#index', as: 'market'
이렇게만 해준다면, 메인페이지의 변경이 끝나게 된다. root to: 'controller#action' 만 추가 시켜 주면 된다. 여기에 추가적인 정보가 들어갈 수 있지만, 생략하기로 한다. 이제는 한번 확인을 해보자. localhost:3000 페이지를 들어가면 설정한 페이지로 이동하는 것을 확인할 수 있을 것이다.
Application Layout |
Application Layout이라는 것이 존재한다. 이는 예전에 CSS를 적용하기 위한 설명에서 한번 열어본적이 있을 것이다. Application Layout은 페이지 전체에 걸친 겉 껍질을 만들어 준다고 생각하면 된다. 이를 이용해 페이지마다 공통으로 들어가는 네비게이션, 상/하단 고정 메뉴, 사이드바 등을 위치시킬 수 있게 된다.
이를 위한 작업을 위해서 우리가 수정해줘야 할 View파일은 app/views/layouts/applicaiton.html.erb 이다. 이 파일을 켜서 상단에 네비에이션을 만들어보았다. 각 컨트롤러에 대한 뷰는 <%= yield %> 에 위치하게 된다.
<!DOCTYPE html> <html> <head> <title>Study</title> <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <%= csrf_meta_tags %> </head> <body class="<%= controller.controller_name %>"> <div id="header"> <%= @page_title || "Destiny Book store" %> <div id="navigation"> <ul> <li><a herf="#">Home</a></li> <li><%= link_to "Catalog", market_index_path %></li> <li><%= link_to "Edit List", books_path %></li> <li><a herf="#">Bucket</a></li> </ul> </div> </div> <div id="body"> <%= yield %> </div> </body> </html>
이 상태에서 새로고침을 하면 정돈은 되지 않았지만 상단에 페이지가 지속적으로 똑같은 페이지가 존재하는 것을 알 수 있을 것이다. 현재상태에선 만들어진 페이지가 두개뿐이기 때문에 두 개의 링크만이 존재한다. 이제는 이 레이아웃을 꾸며줘야 한다.
이미 확인한 분도 있을지 모르지만, 여기서는 class를 사용하기보다 id를 사용한 모습을 볼 수 있다. 이는 공통적으로 하나만 존재하는 값이기 때문에 id로 지정하였다. 이제 css를 수정해야 한다. css파일은 app/assets/stylesheets/aplication.css 이다. 파일이 SCSS가 아니라 CSS임에 주의하여 파일을 작성한다.
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree .
*/
#header{
width: 960px;
padding: 10px;
font-size: 40px;
text-align: center;
}
#navigation{
float:right;
}
#navigation ul li{
list-style: none;
text-align: center;
float:left;
width: 80px;
}
#body{
width: 960px;
}
이제 페이지를 새로고침을 하면 상단에 네비게이션이 추가된 모습을 볼 수 있을 것이다. 또한 컨텐츠가 보이는 곳의 너비도 지정하여 통일감 있는 페이지의 모습을 볼 수 있다.
마치며... |
간단한 기능을 살펴보았다. 앞으로 더 나아가 어서 레일즈를 파해치고싶다.