HTML과 CSS로 디자인합니다.

Created by Alex Liao, @alexliao

앱은 잘돌아가지만 기본 뼈대만 만들어둔 것 같습니다. 좀 더 멋지게 웹사이트를 디자인하겠습니다. 튜터리얼대로 따라하면서 바꾼 앱은 여기서 볼 수 있습니다.

1.Adjust the application layout

app/assets/stylesheets/application.css 파일을 수정합니다.

body { padding-top: 100px; }

위의 코드를 아래와 같이 수정합니다.

body { padding-top: 60px; }

그런 다음, app/assets/stylesheets/scaffolds.css.scss 파일을 지웁니다. 이 파일은 레일스의 기본 스타일로 더이상 필요하지 않습니다.

브라우저의 새로고침 버튼을 눌러서 http://localhost:3000/ideas 페이지로 이동합니다. 크게 달라진 건 없지만 다음 단계로 진행합니다.

2.Refine the navigation

“아이디어(idea)”는 앱에서 가장 중요한 객체입니다. “New Idea” 버튼을 네비게이션 바에서 항상 보이도록 추가하겠습니다.

app/views/layouts/application.html.erb 파일을 수정합니다.

<li class="active"><a href="/ideas">Ideas</a></li>

위의 코드 아래에 다음과 같이 추가합니다.

<li ><%= link_to 'New Idea', new_idea_path %></li>

3.Design the idea list

아이디어 전체 목록을 보여주는 페이지를 디자인하겠습니다. 테이블 태그를 div 태그로 레이아웃을 바꾸겠습니다.

Coach: 테이블 태그와 div 태그를 간략히 설명합니다.

app/views/ideas/index.html.erb 파일을 아래와 같이 수정합니다.

<h1>Listing ideas</h1>

<% @ideas.in_groups_of(3) do |group| %>
  <div class="row">
    <% group.compact.each do |idea| %>
      <div class="col-md-4">
        <%= image_tag idea.picture_url, width: '100%' if idea.picture.present? %>
        <h4><%= link_to idea.name, idea %></h4>
        <%= idea.description %>
      </div>
    <% end %>
  </div>
<% end %>

Coach: 새로운 코드를 한줄씩 설명하세요. 부트스트랩의 12 그리드 레이아웃을 간략히 설명하세요.

새로고침 버튼을 누릅니다! 목록이 보기에 깔끔합니다. “New Idea” 버튼을 눌러서 텍스트와 사진을 담은 아이디어 몇개를 생성합니다. 현대 웹 디자인의 기본 원리 중 하나는 ‘컨텐츠가 제일 잘 꾸민다’입니다.

4.Design the idea details page

아이디어의 제목을 클릭하면 아이디어의 세부 내용을 보여주는 페이지로 이동합니다. 레일스가 스캐폴드로 만든 것이지만 전보다 훨씬 보기에 좋습니다.

app/views/ideas/show.html.erb 파일을 아래와 같이 수정합니다.

<p id="notice"><%= notice %></p>

<div class="row">
  <div class="col-md-9">
    <%= image_tag(@idea.picture_url, width: '100%') if @idea.picture.present? %>
  </div>

  <div class="col-md-3">
    <p><b>Name: </b><%= @idea.name %></p>
    <p><b>Description: </b><%= @idea.description %></p>
    <p>
      <%= link_to 'Edit', edit_idea_path(@idea) %> |
      <%= link_to 'Destroy', @idea, data: { confirm: 'Are you sure?' }, method: :delete %> |
      <%= link_to 'Back', ideas_path %>
    </p>
  </div>
</div>

Coach: 새로운 코드를 한줄씩 설명하세요.

What next?