728x90
반응형
가변 그리드 레이아웃은 사이트의 모든 요소들을 상대적 크기로 지정해 브라우저의 크기에 따라 탄력적으로 보여주는 방법입니다. 가변 그리드 레이아웃에서는 CSS를 하나만 정의하면 됩니다.
1. 고정 그리드 레이아웃
| <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Fluid Grid Layout</title> <style> #wrapper { width: 960px; margin: 0 auto; } header { width: 960px; height: 120px; background-color: #066cfa; border-bottom: 1px solid black; } .header-text { font-size: 40px; color: white; text-align: center; line-height: 120px; } .content { float: left; width: 600px; height: 400px; padding: 15px; background-color: #ffd800; } .right-side { float: right; width: 300px; height: 400px; padding: 15px; background-color: #00ff90; } footer { clear:both; height: 120px; background-color: #c3590a; } </style> </head> <body> <div id="wrapper"> <header> <h1 class="header-text">Fixed Grid Layout</h1> </header> <section class="content"> <h4>본문</h4> </section> <aside class="right-side"> <h4>사이드바</h4> </aside> <footer> <h4>푸터</h4> </footer> </div> </body> </html> |
2. 가변 그리드 레이아웃 만들기
픽셀(px)을 이용한 레이아웃을 만들어 놓았다면 간단한 계산법으로 만들수 있다.
1) 전체를 감싸는 요소 확인하기
#wrapper의 너비값 960px을 백분율 값으로 변환
#wrapper {
width: 96% (화면의 양옆에 여백을 두기 위해 100%가 아닌 96%로 지정)
margin: 0 auto;
}
2) 각 요소의 너비 값 계산하기
기준이 되는 요소를 찾았다면 그 요소의 너비값으로 각 요소의 값을 계산합니다.
(요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비) * 100
| 요소 | 고정 그리드 | 가변 그리드 |
| header | 960px | 100% |
| .content | 600px | 62.5% |
| padding | 15px | 1.5625% |
| .right-side | 300px | 31.25% |
| padding | 15px | 1.5625% |
| footer | 960px | 100% |
728x90
반응형