반응형
출처 : http://demun.tistory.com/2213
반응형 웹디자인의 첫번째 조건인 글꼴 크기를 정하는 방법에 대해서 알아봤습니다.
이제 글꼴 크기를 정했으니 레이아웃에 반영되는 너비 width 를 지정하는 방법에 대해서 알아보겠습니다.
예를들어 아래와 같은 px 로 지정한 css 설정이 있다고 가정합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>반응형 웹디자인의 조건 - 너비</title>
<style>
#wrapper {
width: 960px;
margin: 0 auto;
}
#header {
width: 940px;
margin: 10px;
}
#content {
width: 698px;
float: left;
}
#sidebar {
width: 218px;
}
#footer {
width: 940px;
margin: 10px;
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
<div id="sidebar">sidebar</div>
<div id="footer">footer</div>
</div>
</body>
</html>
기본만 정했으니 참고하시고 여기서도 타킷 ÷ 컨텍스트 = 결과 공식을 사용해서 width를 반응형으로 수정해보겠습니다.
css
#wrapper {
width: 96%; /* 가장큰것이 100%라고 가정하고 96%로 지정합니다. */
margin: 0 auto;
}
#header {
width: 97.9166667%; /* 940 ÷ 960 */
margin: 10px;
}
#content {
width: 72.7083333%; /* 698 ÷ 960 */
float: left;
}
#sidebar {
width: 22.7083333%; /* 218 ÷ 960 */
}
#footer {
width: 97.9466667%; /* 940 ÷ 960 */
margin: 10px;
clear: both;
}
여기서 마진값도 %해도 되는데 고정적으로 마진을 사용해도 무방해서 이처럼 처리했습니다.
중요한것은 바로 target ÷ context = result 라는 것입니다.
반응형
'Development > HTML' 카테고리의 다른 글
| 웹표준가이드(1) / 올바른 DOCTYPE 사용 (0) | 2013.05.29 |
|---|---|
| 반응형 웹디자인의 조건 글꼴 크기 (0) | 2013.05.28 |
| IE8 이하에 HTML5 적용 (0) | 2012.07.25 |
| Visual Studio 2010 HTML 유효성 검사 (2) | 2012.07.09 |
| HTML UI 에 대해서 (0) | 2012.03.12 |
댓글