<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  * { margin : 0; padding : 0; box-sizing : border-box; text-align : center; }
  li { list-style-type : none; }
  .box { clear : both; width : 80%; height : 50%; background-color : #eeeeee;	
	 margin : 0 auto; }
  .col_1 { width : 8.33%; }
  .col_2 { width : 16.66%; }
  .col_3 { width : 25%; }
  .col_4 { width : 33.33%; }
  .col_5 { width : 41.66%; }
  .col_6 { width : 50%; }
  .col_7 { width : 58.33%; }
  .col_8 { width : 66.66%; }
  .col_9 { width : 75%; }
  .col_10 { width : 83.33%; }
  .col_11 { width : 91.66%; }
  .col_12 { width : 100%; }
  [class*="col_"] { float : left; padding : 15px; font-size: 25px;}
  header { height : 100px; background-color : green; }
 /* 클래스 main */
  .main li { float : left; 	height : 300px; }
  .main li:nth-child(1) { background-color : yellow; }
  /* 메인 클래스 li 중 첫번째 요소*/
  .main li:nth-child(2) { background-color : skyblue; }
 /* 클래스 banner */
  .banner li { float : left; height : 200px; }
  .banner li:nth-child(1), .banner li:nth-child(3) { background-color : pink; }
 /* 베너 클래스 li 중 1,3 번재 요소에 각각 적용*/
  .banner li:nth-child(2), .banner li:nth-child(4){ background-color : purple; }
  
   footer { clear : both; height : 100px; background-color : green; }
</style>
</head>
<body>
	<header>
		<div class="box"> <!--box 클래스 하나에만 적용-->
				헤더
		</div> 
	</header>
	<section>
		<div class="box main"> <!--box와 main 클래스 둘 다 적용-->
			<ul>
				<li class="col_8">요소</li>
				<li class="col_4">요소</li>
			</ul>
		</div> 
		<div class="box banner"> <!--box와 banner 클래스 둘 다 적용-->
			<ul>
				<li class="col_3">요소</li>
				<li class="col_3">요소</li>
				<li class="col_3">요소</li>
				<li class="col_3">요소</li>
			</ul>
		</div> 
	</section>
	<footer>
		<div class="box"> <!--box 클래스 하나에만 적용-->
				푸터
		</div>
	</footer>
</body>
</html>
