스타일시트 작성

posts.scss 파일에 아래와 같이 추가한다.

// devise 모든 뷰 파일에 포함되는 _links.erb 파일의 <a>를 블럭으로 표시함. .devise-links { a { margin:.5em 0; display:block; // background-color: red; } } // checkbox right margin -> 5px 로 지정함. input.boolean { margin-right:5px; } legend h2 { font-weight: bold; font-style: italic; border-right: 10px solid #eaeaea; border-left: 10px solid #eaeaea; padding:0 .5em; } .alert-box { margin-top: .5em; } a.close { color:white !important; } #posts { // padding:0 1em; margin-bottom: 4em; } .post { margin-bottom:2em; .title { } .author { text-align: right; margin-bottom: 2.5em; } .content { p { line-height: 1.5em; margin-bottom:.5em; } // margin-bottom:2em; } .actions { } }

그리고 custom.scss 파일을 생성하고 아래와 같이 작성한다.

.button { @include button; background-color: white; color: #999999; border:1px solid #cccccc; } .input small { display:block !important; text-align: right; margin:5px 2px; color: #ff0000 !important; } .tiny { margin-bottom:0; } #blog-banner { margin-bottom: 3em; } #footer { text-align: center; height:3em; padding: 1em 0; border-top:1px solid #eaeaea; }

방근 전에 작성한 posts.scsscustom.scss 파일을 application.scss 파일에 임포트하고 아래와 같이 media query 부분을 추가한다.

@import 'foundation_and_overrides'; @import 'foundation-icons'; @import 'custom'; @import 'posts'; @media only screen and (min-width: 64.063em) { .large-9 { padding-right:4em; } } @media only screen and (min-width: 40.063em) and (max-width: 64.062em) { .medium-9 { padding-right: 2em; } }

이제 이전보다 훨씬 깔끔하게 보일 것이다. 화면의 크기변화에 따라 페이지 레이아웃이 변화는 것을 확인한다.

지금까지 작업한 내용을 로컬 저장소로 커밋한다.

$ git add . $ git commit -m "제05장 : 스타일시트 작성" $ git tag "제05장"


소스보기 https://github.com/luciuschoi/foundblog_app/tree/제05장