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?
- 새로 배운 것을 활용하여 아이디어를 등록하는 폼을 새로 만듭니다.
- 여러분이 추가하고 싶은 페이지를 디자인합니다.
- 레일스에 대한 다른 가이드를 읽습니다.