@charset "UTF-8";
/*layout_basic_01.css*/

/* reset */
html, body, 
h1, h2, h3, h4, h5, h6, 
hr {margin: 0; padding: 0; border: 0;
			behavaior: url(../ie/PIE-1.0.0/PIE.htc);}
hr {border-top: 1px solid #333;}
ol, ul {margin: 0; padding: 0; list-style:none;}
body {background-color: #337;}
h1,h2 {color: #fff; text-align: center; }
h1>a {color: inherit; text-decoration: none;}
hr {border-color: #fff}
#box {width: 600px; height: auto;
	margin: 100px auto; 
	text-align: center; color: #fff; font-size: 50px;}


header, main, footer, article, section, aside, nav {display: block;}

#headBox {width: 100%; height: 100px;
	background-color: #f0a; }
#mainBox {width: 100%; height: auto;}

/* 부모안에 있는 것을 사용할때는 그냥 숫자 pixel로 해도 되지만 
100%로 하는것이 권장!!
높이는 %로 사용 XXXX */

#mainBox:after,
#mainBox::after {content: " "; display: block; width: 0; height: 0;
	clear: both;}
.con_wrap {width: 70%; height:300px; float: left;}
.article_area {width: 100%; height: 150px;
	background-color: #777;}
.cont_area {width: 100%; height: 150px;
	background-color: #333;}

.side_area {width: 30%; height: 300px; float: right;
	background-color: #7fa;}

	/* margin은 마이너스도 가능
.article_area {width: 70%; height: 150px; float: left;
	background-color: #777;}
.cont_area {width: 70%; height: 150px; float: left;
	background-color: #333;}
.side_area {margin-top: -150px; width: 30%; height: 300px; float: left;
	background-color: #7fa;}
 */


/* 
3등분하는방법
1) 33.3% 33.4% 33.3% 
2) 33.333333% 33.333334% 33.333333 (소수점 6자리)
3) window + R (실행창) = calc (계산기)
	calc(100% / 3) 3등분하는방법
1) 33.3% 33.4% 33.3% 
2) 33.333333% 33.333334% 33.333333 (소수점 6자리)
3) window + R (실행창) = calc (계산기)
	calc(100% / 3)  *스페이스 중요, explor 하위버전 동작X =두개 써줘야함
	{width: calc(100% / 3); width: 33.3%;}
4) .article_area {
		width: -webkit-calc(100% / 3); chrome, safari, vivaldi, chromium edge 
		width:    -moz-calc(100% / 3); firefox
		width:     -ms-calc(100% / 3); microsoft: IE, edge
		width:     -o-calc(100% / 3);  opera
		width:        calc(100% / 3);  공용

	*벤더 프리픽스(prefix): 아직 권고에 들지 못하는 (표준으로 승인되지않은) 기능들을 각 브라우저에서 사용할 수 있도록 내장되어 있다면, 이를 강제로 쓰게 만드는 기능 (최신기능 사용하겠다라는 의미!);  /
	http://css3pie.com/ 추가 다운 
  <!--[if lte IE9]>
    <script src="../ie/PIE-1.0.0/PIE.js"></script>
  <![endif]-->
  behavaior: url(../ie/PIE-1.0.0/PIE.htc)

#mainBox:after,
#mainBox::after {content: " "; display: block; width: 0; height: 0;
	clear: both;}
.side_area {width: calc(100% / 3); width: 33.3%; height: 300px; float: left;
	background-color: #7fa;}
.article_area {width: calc(100% / 3); width: 33.4%; height: 300px; float: left;
	background-color: #777;}
.cont_area {width: calc(100% / 3); width: 33.3%; height: 300px; float: left;
	background-color: #333;}
*/

/* float사용시 형제도 다 float을 사용해야한다. */
#footBox {width: 100%; height: 100px;
	background-color: #0af;}