6. Layout에 대한 이해

6. Layout에 대한 이해

html 문서는 html 태그로 시작해서 head와 body 를 가진다.

하지만 hello_world.html에는 그런것들이 없다.

어디로 갔을까?

마지막에 만든 hello_wor

ld.html는 h1태그만 쓰고있다

 

이번에 배울 내용은 layout에 대한 내용이다

 

app/view/layouts/application.html.erb라는게 있다.

우리가 익숙히 알고있던 html의 구조가 나온다

그리고 앞에서 배운 erb코드들이 있다

 

css, js등을 추가해준다는 내용이 있다.

 

바디에는 yield라는 게 있다.

우리가 작성했던 hello_world.html 코드가 여기 들어간다.

 

이를 응용해보면, 매뉴처럼 모든 사이트에 동일하게 나오는 내용은 yield 위쪽에 붙여놓으면 될 것이고, 회사 정보나 연락처 같은 푸터는 아래쪽에 붙여두면 된다.

 

뷰가 달라졌을때 yield가 어떻게 달라지는지 알아보자.

 

우리에게 문의할 수 있는 form을 작성해보자.

home_controller.rb들어가서

contact 함수 만들어주고,

뷰에는 contact.html.erb 파일 추가해준다.

 

뷰에는 contact.html.erb 파일 추가했으면, 이제 route에 (도매인)/contact 라고 들어왔을때 홈 컨트롤러에 있는 컨택트 액션으로 이어지도록 한다음 저장.

 

 

그리고 contact.html.erb 에는 contact page라는 내용을 써주자.

 

도메인/contact에 접속하면 잘 나온다.

그럼 이제 이 내용을 타이핑 하자(혹은 붙여넣자)

<div id="global-header">
      <div class="container">
        <div class="logo">My Profile</div>
        <ul class="menu">
          <a href="/">
            <li class="item">Hello World</li>
          </a>
          <a href="/contact">
            <li class="item">Contact</li>
          </a>
        </ul>
      </div>
    </div>

로고가 마이프로필이고, 헬로우월드 누르면 / 로 갈거고, 컨택트는 컨택트로 갈거다.

어떤 페이지는 메뉴가, 어떤 페이지는 푸터가 필요없을 수 있는데, 이럴 경우 application.html을 여러개 만들 수 있다. 이런 경우는 공식문서를 살펴보면 나온다.