HTML과 CSS로 기본 사이트 틀 만들기

html css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	*{margin:0;padding:0;}
	#header{
		height:100px;
		line-height:100px;
		font-size:30px;
		border-bottom:3px solid #000;
		text-align:center;
	}
	#footer{
		border-top:1px solid #666;
		height:70px;
		line-height:70px;
		text-align:center;
	}
	#content{
		width:800px;
		height:300px;
		margin:0 auto;
		border-left:1px solid #bebebe;
		border-right:1px solid #bebebe;
		background:#f5f5f5;
	}
</style>
</head>
<body>
<header id="header">
	Site Header
</header>
<section id="content">
	Site Content
</section>
<footer id="footer">
	Copyright (C) 2017 Junil-Hwang All Right Reserved
</footer>
</body>
</html>

 

Site Header
Site Content
Copyright (C) 2017 Junil-Hwang All Right Reserved

 

* 중요한 내용

기본적으로 width, height, font-size, text-align 같은 것들은 직관적으로 이해할 수 있는 내용입니다.

그러나
margin:0 auto;
이 부분에는 잠깐 의구심이 들 수 있습니다.
여기서 auto의 역할은 사이트의 너비(해상도)에 상관 없이 width가 지정되어 있다면,
예를들어 브라우저의 너비가 1600px이고, #content의 너비가 800px일 때 margin:0 auto를 사용해주면 저절로 좌우 여백이 400px 씩 할당됩니다.

1200px일 경우 저절로 200px씩 할당되고,
800px보다 작을 경우 좌우 여백은 생기지 않습니다.
이렇게 margin:0 auto;는 레이아웃을 저절로 가운데로 오도록 만들어줍니다.