티스토리 뷰
Frontend Skills-특정 뷰의 body에만 layout적용하기
>어떤 뷰파일에는 background를 입히고, 다른 나머지 뷰파일에는 적용하고 싶지않을때가 있습니다. 그럴때 유용한 방법입니다.!
아래와 같은 코드를 특정 뷰에다가 넣어줍니다.
<body class="container example">저는 ruby on rails로 프로젝트를 진행하고 있어 알맞은 .html.erb 파일에 위의 코드를 아래와 같이 넣어주었습니다.
//이렇게 추가해줍니다.
<body class="container login">
//아래는 기존코드
<div class="login-bg">
<div class="login-template">
<h2>Are you in CAU-likelion?</h2>
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="login-form-inputs">
<%= f.input :email, class: "form-control",placeholder:"Enter email",required: false, autofocus: true,label: false %>
<%= f.input :password, placeholder:"Enter password",required: false,label: false %>
<%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
</div>
<div class="form-actions">
<%= f.button :submit, "Log in" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>다음은 css파일에 추가할 코드입니다.
body.login{
background: url('/assets/img/team-bg.jpg')
no-repeat center center fixed;
background-size: cover;
background-size: cover;
background-size: cover;
background-size: cover;
}위와 같이 body.특정이름{
//css
|결과
|마치며이렇게, 특정 html파일에만 배경화면을 입히고 싶을때는 위와 같이 간단히 적용할 수 있었습니다.
'Front end > Frontend Skills' 카테고리의 다른 글
| FrontEnd Skills - mobx 사용시 Decorating class property failed. 에러 뜰때 해결방법 (0) | 2018.08.15 |
|---|---|
| Frontend Skills - 모듈, browserify, polyfill과 babel (0) | 2018.07.25 |
| Frontend Skills -Babel 설치하기, 그리고 spread operator es5코드로 바꾸기 (1) | 2018.07.12 |
| Frontend Skills - interval을 두고 글자가 바뀌는 효과 입히기 (0) | 2018.03.01 |
| Frontend skills- type writing 기능 이용하기 (0) | 2018.02.28 |
댓글