본문 바로가기

웹 프로그래밍/CSS

[CSS] body 태그를 가운데 정렬 하기 : margin-left, margin-right

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	body{
		width : 900px;
		margin-left : auto; /* 가운데 정렬 */
		margin-right: auto; /* 가운데 정렬 */
	}
	
	header{
		background-color: red;
		height : 150px;
	}
	#aside01{
		background-color: yellow;
		height : 800px;
		width : 150px;
		float : left;
	}
	section{
		background-color: olive;
		height : 400px;
		width : 600px;
		/* float : right; */
	}
	
	#aside02{
		background-color: yellow;
		height : 800px;
		width : 150px;
		float : right;
	}
	
	section{
		background-color: olive;
		height : 400px;
		width : 600px;
		float : right;
	}
	
	footer{
		background-color: orange;
		height : 150px;
		clear : both;
	}
	a:link{ /* 위와 똑같은 의미다 */
		color : lime;
		/* text-decoration: underline; */
		text-decoration: none;
	}
	
	a:visited { /* a 태그 중 방문기록이 있는 것. 설정 안하면 보라색으로 나타난다. */
		color : lime;
	}
	
	a:hover { /* 마우스 올렸을 때 */
		background-color: lightgray;
		text-decoration: underline;
	}
	
	#numberlist li { /* 자식 중 li인 것 */
		float : left; /* 마진을 안 주면 붙어버린다 */
		margin : 0px 30px 0px 0px; /* top - bottom - left - right */
		/* margin : 10px 10px; 2개를 적으면, left - right */
		font-size : 12pt;
		list-style : none;
		
	}
	
</style>

</head>
<body>
	<header>
		<img src = "../html/images/header.png">
	</header>
	<aside id="aside01">
		<ul id = "numberlist">
		<li><a href = "https://www.kebhana.com/index.html">하나은행</a><hr></li>
		<li>TWO</li>
		<li>THREE</li>
		<li>FOUR</li>
		<li>FIVE</li>
		<li>SIX</li>
		<li>SEVEN</li>
		<li>EIGHT</li>
		<li>NINE</li>
		<li>TEN</li>
	</ul>
	
	</aside>
	<aside id="aside02">aside부분</aside>
	<section id="section01">
		<a href = "https://www.kebhana.com/index.html">하나은행</a><hr>
		<a href = "https://www.hanacard.co.kr/index2.jsp">하나카드 바로가기</a><hr>
	</section>
	
	<section id="section02">
		<a href = "https://news.naver.com/">네이버 뉴스 바로가기</a><hr>
		<a href = "https://comic.naver.com/index.nhn">네이버 만화 바로가기</a><hr>
	</section>
	<footer>footer부분</footer>
</body>
</html>