들어가면서... |
이전 페이지에 존재하는 book_list 프로젝트에 CSS를 적용해보도록 한다.
CSS를 적용하는 방법에 알아보도록 한다. 그 전에 알아야 할 사실이 몇가지 있다.
- 생성된 각 컨트롤러 마다 하나의 [controller_name].CSS.SCSS 파일이 생성된다.
> SCSS 확장자는 새롭게 적용된 SCSS문법을 기존의 CSS에 대응시키도록 자동으로 변경시킨다.
> SCSS는 추가적으로 계층적 접근법으로 CSS를 정의할 수 있게 해준다.
- 모든 페이지는 하나의 Layout 이 겉을 감싸고 있다.
> Layout의 위치: app/views/layouts/application.html.erb
- 각 페이지마다 다른 Layout을 적용해야 하기 때문에 Layout에서 컨트롤러에 대해서 다르게 적용되게 변경해야 한다.
아래의 순서에 맞춰서 CSS를 적용시켜보도록하자.
Layout 변경 |
1. Layout파일을 연다.
> vi app/views/layouts/application.html.erb
2. 컨텐츠를 감싸는 Body(Wrapper)에 클래스 이름을 적용시켜준다. 클래스 이름은 컨트롤러의 이름으로 해준다.
<!DOCTYPE html> <html> <head> <title>BookList</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 %>'> <%= yield %> </body> </html>
View에 Class를 정의 |
1. 변경할 View를 켜서 적절한 Class이름을 정의해준다. (index.html.erb 파일만 변경해보겠다.)
> vi app/views/books/index.html.erb
<h1>Listing books</h1>
<table>
<thead class="list_header">
<tr>
<th>Cover</th>
<th>Description</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<% @books.each do |book| %>
<tr class="<%= cycle('list_line_odd', 'list_line_even') %>">
<td><%= image_tag(book.image_url, class: 'list_image') %></td>
<td class="list_discription">
<dl>
<dt><%= book.name %></dt>
<dd><%= truncate(strip_tags(book.description), length: 300) %></dd>
<dd class="list_review_count"><%= book.review_count %> Reviews!</dd>
</dl>
</td>
<td class="list_book_price"><%= book.price %> KRW</td>
<td class="list_action"><%= link_to 'Show', book %><br />
<%= link_to 'Edit', edit_book_path(book) %><br />
<%= link_to 'Destroy', book, method: :delete, data: { confirm: 'Are you sure?' } %>
</td>
</tr>
<% end %>
</tbody>
</table>
<br>
<%= link_to 'New Book', new_book_path %>
여기서 특징적인 부분만 설명하도록 하겠다.
1. cycle template : 두개의 값을 돌아가면서 적용시켜 준다.
2. image_tag template : <image> tag역할을 하며 각각의 파라미터는 Image URL과 테그의 속성값들이다.
3. truncate(strip_tag([text]), length: [number]) : text를 number길이만틈 잘라내어 보여준다.
SCSS 정의 |
이제 CSS 파일에 CSS만 적용시켜 주면된다.
작성전에 SCSS의 특징인 계층적인 정의에 대해서 알아보자.
<div class="wrap">
<div class="test1">
</div>
</div>
라는 형식의 HTML에서 기존 CSS는 이렇게 정의했을 것이다.
.wrap{
width:960px;
padding:10px 0px 10px 0px;
}
.wrap .test1{
width:300px;
margin-left: 50px;
}
위와 같은 형식을 SCSS에서는 다음과 같이 정의해주면 된다.
width:960px;
padding:10px 0px 10px 0px;
.test1{
width:300px;
margin-left:50px;
}
}
필자 생각으로는 SCSS의 방식이 훨씬 보기 좋고 획기적으로 보인다.
이제 이를 이용해서 CSS를 정의해보자.
> vi app/assets/stylesheets/book.css.scss
// Place all the styles related to the Books controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.books{
width: 960px;
table{
border-collapse: collapse;
tr td{
padding: 10px;
vertical-align: top;
}
.list_header{
font-weight:bold;
font-size: 20px;
background: #C2B0D7;
th{
padding: 10px 15px;
}
}
.list_image{
width: 90px;
height: 120px;
}
.list_discription{
dl {
margin: 0;
}
dt{
font-weight:bold;
font-size: 16px;
margin-bottom:20px;
}
dd{
margin: 0;
color: #708090;
font-size: 12px;
}
.list_review_count{
vertical-align: bottom;
text-align: right;
color: #333;
padding-top: 10px;
}
} // list discription
.list_book_price{
vertical-align: middle;
text-align: center;
}
.list_action{
a{
text-decoration:none;
}
vertical-align:middle;
text-align:center;
} // list action
.list_line_even{
background: #C4C4C4;
}
.list_line_odd{
background: #B0C4D4;
}
} // table
}
이렇게 적용된 페이지는 다음과 같은 페이지를 보여준다.
역시 나의 디자인이란... 최대한 노력해본건데 ㅋㅋㅋ....
마무리... |
CSS 적용이 먼가 더 간단해진 건 없지만, Selector 에서 편리함을 제공해주는 것 같다.
이제 왠만큼 웹페이지를 레일즈를 통해서 뽑아낼 준비가 거의다 되가는 느낌이 든다...