[Rails] 배경색, 색상, 글꼴 등을 무작위로 게시

개시하다

본 보도에서
Ruby Sample 방법을 사용하여 설치

미리 준비하다

관심 없으신 분들은 넘어가셔도 돼요.
다음은 복사해주세요~!
terminal

rails new sample
rails db:create  
rails g model Example body:string
rails db:migrate
rails g controller examples
code .

config/routes.rb

  resources :examples
  root 'examples#index'

app/controllers

    def index
        @examples = Example.all
        @example = Example.new
    end
    def create
        example = Example.new(example_params)
        if example.save
            redirect_to :action => "index"
        end
    end
    private
    def example_params
        params.require(:example).permit(:body)
    end

다음은 index.html.app/views/examples에서erb 파일을 만들고 아래 내용을 복사합니다
app/views/examples/index.html.erb

<%= form_for @example do |f| %>
    <%= f.label :body %>
    <%= f.text_field :body , :size => 140 %>
    <br>
    <%= f.submit "exampleする" %>
<% end %>

<div class="examples-container">
    <% @examples.each do |t| %>
    <div class="example">
        <%= t.body %>
    </div>
<% end %>

sample 코드

한번 해보세요.
app/views/examples/index.html.erb

<%= form_for @example do |f| %>
    <%= f.label :body %>
    <%= f.text_field :body , :size => 140 %>
    <br>
    <%= f.submit "exampleする" %>
<% end %>

<!-- 追記箇所 -->
<% colors = %w|#51617A #5A9AFB #A6C8FA #2C4B7A #839EC7| %>
<!-- 追記箇所 -->
<div class="examples-container">
    <% @examples.each do |t| %>
    <!-- 追記箇所 -->
    <%= content_tag :div, style: "background-color: #{colors.sample}" do %>
    <div class="example">
        <%= t.body %>
    </div>
    <% end %>
    <!-- 追記箇所 -->
<% end %>

다음은 여기에 보충된 아래 부분에 대해 설명한다.

<% colors = %w|#51617A #5A9AFB #A6C8FA #2C4B7A #839EC7| %>
<div class="examples-container">
    <% @examples.each do |t| %>
    <%= content_tag :div, style: "background-color: #{colors.sample}" do %>
    <div class="example">
        <%= t.body %>
    </div>
    <% end %>
<% end %>

우선

<% colors = %w|#51617A #5A9AFB #A6C8FA #2C4B7A #839EC7| %>

부분은 컬러스라는 이름으로 배열!
%w이기 때문에colors의 내용을 배열하는 형식

["#51617A", "#5A9AFB", "#A6C8FA","#2C4B7A","#839EC7"]

.
그 다음

<%= content_tag :div, style: "background-color: #{colors.sample}" do %>

#{colors.sample}로 아까 배열에서 배경색을 선택할 수 있습니다!

sample 방법

sample 메서드는 Ruby 언어에서 임의로 요소를 선택하여 배열에서 반환하는 메서드입니다.
예컨대

array = [1,2,3,4,5,6,7]

이후

array.sample

, 1~7의 수치 중 하나를 무작위로 선택합니다!
이걸로 응용해 보세요!

응용편

<% colors = %w|#51617A #5A9AFB #A6C8FA #2C4B7A #839EC7| %>
+ <% widthes = %w|10em 20em 30em| %>
<div class="examples-container">
    <% @examples.each do |t| %>
+ <%= content_tag :div, style: "background-color: #{colors.sample};width:#{widthes.sample};height:#{widthes.sample}" do %>
    <div class="example">
        <%= t.body %>
    </div>
    <% end %>
<% end %>

면 세로, 가로의 너비는 10em, 20em, 30em에서 임의로 꺼낼 수 있습니다!
정말 재미있다!

끝맺다

나는 이 기능이 많은 일을 할 수 있다고 생각한다.무작위로 배경 사진을 바꾸어 투고 화면의 색깔을 선명하게 합니다!
제품은 네 생각대로
GeekSalonWeb 멘토님이 보내주셨습니다!