반응형 웹디자인의 조건 너비 width

반응형 웹디자인의 첫번째 조건인 글꼴 크기를 정하는 방법에 대해서 알아봤습니다.

이제 글꼴 크기를 정했으니 레이아웃에 반영되는 너비 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를 반응형으로 수정해보겠습니다.


#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 라는 것입니다.


[Code/css] - 반응형 웹디자인의 조건 글꼴 크기

[일상/도서] - 반응형 웹디자인 Ethan Marcotte

[일상/도서] - HTML5와 CSS3로 작성하는 반응형 웹 디자인


개    개