ERB의 link_to와 HTML의 <a>태그를 비교해 보겠다.



HTML 코드

  <a href="path" class="some_class", style="some_css">링크</a>



ERB 코드

  <%= link_to "링크", path,  :class => "some_class", :style => "some_css" %>





그런데 HTML에서 <a> 태그 안에 다른 태그를 삽입하는 경우는 어떨까?

예를 들어 다음과 같은 코드를 보자.


HTML

  <a href="path" class="some_class", style="some_css">

      <i class="icon"></i> 아이콘

  </a>



이는 ERB로 이렇게 해석할 수 있다.

  <%= link_to path, :class => "some_class", :style => "some_css" do %>

      <i class="icon"></i> 아이콘

  <% end %>





참고자료




'Ruby On Rails' 카테고리의 다른 글

TDD - Running Test  (0) 2013.05.13
TDD - fixture  (0) 2013.05.13
HTML <a> 태그와 ERB의 link_to 변환  (0) 2013.05.02
Omniauth - 페이스북 로그인 에러 901  (0) 2013.05.02
Omniauth - 페이스북 로그인 에러 191  (0) 2013.05.02
Bootstrap - navbar-form  (0) 2013.05.01
Posted by 하남각목


navbar위에 navbar-form클래스를 이용해 로그인 폼을 만드는 방법이다.

다음 코드를 원하는 위치에 넣어주자.

 form_for의 클래스를 지정해 줄때는 :html => {:class => "navbar-form"} 으로 해준다.

 필드나 체크박스의 인자로 보내지는 모델의 원소는 html에서 name으로 변해 들어간다.

  예를 들어  :email 을 인자로 갖는 필드에는 user[email]로 이름이 지정된다.



다음은 결과이다.




참고자료





Posted by 하남각목

  Bootstrap을 설치하지 않은 경우에는 '이곳'을 참고하여 설치하고 돌아오자.


ERB에서 Button을 꾸며보자.

ERB는 Embeded Ruby의 줄임말로 HTML에 루비코드를 삽입한 것이다.


  ERB(Embeded Ruby)보다 HAML(HTML Abstraction Markup Language)을 사용하라는 말이 있는데, 이에 대한 포스트는 나중에 HAML을 공부한 뒤 올리겠다.



부트스트랩을 이용하여 버튼을 꾸미는 것은 정말 간단하다.

그냥 다음 클래스를 html 태그에 삽입하면 된다.


다음과 같이 html코드에 클래스를 지정해준다.

  <button class="btn btn-primary">Large</button>

  <label class="btn btn-link">small</label>


결과물.



그런데 실제로 루비온레일즈로 개발하다보면 html코드에 클래스를 넣는 것보다는

erb코드에 클래스를 넣는 경우가 많다.



그런 경우 태그에 클래스를 넣지말고 

다음과 같이 erb메서드의 인자로 클래스를 넣어주면된다.


  <%= button_to 'Large', path, class: "btn btn-primary" %>

  <%= link_to 'small', path, class:"btn btn-link" %>




참고자료

1. Bootstrap




Posted by 하남각목

Sublime Package Control이 없다면 '이곳'을 참고하여 Sublime Package Control을 먼저 다운받자.


ERB Insert and Toggle Commands는 ERB를 단축키를 사용하여 삽입 및 변경할 수 있는 플러그인이다.

이를 설치하기 위해 Shift + Ctrl + P 를 눌어 Sublime Package Control을 실행시키고

Package Control: Install Package를 선택한다.



ERB Insert and Toggle Commands를 검색하여 설치하자.



설치 후 Preferences에서 Key Bindings - User 파일을 열자.




Default (OSX).sublime-keymap 파일이 열린다.

이곳에 다음을 붙여넣자.

[

{ "keys": ["ctrl+shift+."], "command": "erb" }

]




Sublime Text에서 Shift + Ctrl + . 을 눌러보자.

<%= %>, <%# %>, <%= -%>, <% %>, <% -%>이 번갈아 생길것이다.




참고자료

1. SublimeERB - Github




Posted by 하남각목