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

h1 {padding: 1rem; background-color: #0af; 
	border-bottom: 1px; solid:#333; color: #fff;}
h2 {background-color: #333; color: #fff;}

.basic {width: 800px; height: 600px; border: 3px solid #333; margin: auto; }
.basic > h3 {margin:0; width: 100%; height: 50px; 
	border-bottom: 2px solid #333; text-align: center;}

/* margin ==========================*/
.margin > ul {margin:0; padding: 0; list-style: none;}

.margin > ul > li {width: 50px; height: 50px;
	box-sizing: border-box;border: 2px solid #377;
	text-align: center;line-height: 50px; float: left;}

.margin > ul > li:nth-child(2n) {background-color: #af0;}

.margin > ul > li:nth-child(1) {margin: 30px;}
.margin > ul > li:nth-child(2) {margin: 30px 10px;}
.margin > ul > li:nth-child(3) {margin: 30px 10px 50px;}
.margin > ul > li:nth-child(4) {margin: 30px 10px 50px 80px;}

/*margin: 여백을 주어 공간을 만드는것, 공간의 형태는 투명한 영역을 나타낸다.
가로일때(float사용시)
-float은 크기가 더해짐 / 위(부모)의 사이에 떠짐 
{margin : 위 오른쪽 아래 왼쪽 / 시계방향} 4개 : 위, 우, 아래, 좌 (시계방향);
{margin : 위 | 좌우 | 아래;} 3개 : 위, 좌우, 아래;
{margin : 위아래 | 좌우 ;} 2개 : 위아래, 좌우;
{margin : 전체 ;} - 1개 : 위, 우, 아래, 좌 모두 적용;
	*2개이상 사용할경우 띄어쓰기로 구분하여 사용 
	auto: 위아래:0 좌우: 균등하게 맞추어라 (가운데정렬);
		*단 auto 경우시 float 기능과 함께 사용하면 가운데 오질 않는다. (float 모드로 움직임) 
*/

hr {margin: 0; width: 100%; clear: both}

.margin > ol {list-style: none; padding: 0; margin: 0;
	width: 100%; height: 300px; background-color: #dda;}

.margin > ol > li {width: 50px; height: 50px; background-color: #337}

.margin > ol > li:nth-child(2n){background-color: #fff;}

.margin > ol > li:nth-child(1){margin: 20px;}
.margin > ol > li:nth-child(2){margin-top: 50px;}
.margin > ol > li:nth-child(3){margin: 20px; margin-right: 50px;}


/*margin(float과 같이 안쓸때):
- 위(부모)와 같이 떠진다. / 부모를 데리고 내려온다 (그래서 버그마진효과)
- float이 없을경우는 같이 마진 부분이 있을경우 큰값이 먹힘
margin collapsing (마진 겹친형상) :두개의 마진값중에서 큰값이 마진값/
부모 엘레멘트하고도 같은 원리 ;
*/

/*.margin > ol > li:nth-child(3){margin-top: 20px; margin-bottom: 20px
	margin-left: 20px; margin-right: 50px;
	margin: 20px 50px 20px 20px;

	정답: margin: 20px; margin-right: 50px; (순서 바뀌면 안됨; 바뀌면 margin 값이 먹힘)} */


/* padding ==========================*/

.padding > ul{margin: 0 ; padding: 0; list-style: none;
	width: 100%; height: 500px; background-color: #ddd;}
.padding > ul > li {
	width: 60px; height: 60px; background-color: #fa0; }
.padding > ul > li:nth-child(2n){background-color: #0cc;
	color: #fff }

.padding > ul {padding-top:50px;}
.padding > ul > li:nth-child(1){padding: 10px;}
.padding > ul > li:nth-child(2){padding: 20px;}
.padding > ul > li:nth-child(3){padding: 10px;}
.padding > ul > li:nth-child(4){margin: 20px;}
.padding > ul > li:nth-child(5){padding-top: 40px;
	background-color: transparent;}
.padding > ul > li:nth-child(5) > span {
	display: block; width: 100%; height:100%; background-color: #3a7;
}

/*padding : 크기는 유지; 본질은 변하지 않지만 뭔가 붙는다. 
자기자신이 늘어나는것처럼 보여서 (안쪽여백)
magin이랑 글씨 위치는 같다. 똑같다 세팅 (but auto가 없다.)
 */

/* border ==========================*/
.border > ul {margin:0; padding: 0; list-style: none;}

.border > ul > li {width:70px; height: 70px; background-color: #ccd; float: right; margin: 1rem;}
.border > ul > li:nth-child(1){
	border-width: 5px; border-style: solid; border-color: #061;
}
.border > ul > li:nth-child(2){
	border:5px dotted #faf;}   
	/*줄여서 사용가능: 축약형 border는 순서상관없다 */
.border > ul > li:nth-child(3){
	border:5px dotted #faf; border-top-style: solid; border-bottom: 3px solid #333; border-left-width: 10px; border-right-color: transparent;}
.border > ul > li:nth-child(4){
	border: 20px solid #ccd;}

/* float: right 순서 바꾸기 ol 에서 준후 li----*/
.border > ol {margin:0; padding: 0; list-style: none; float: right;}

.border > ol > li {width:70px; height: 70px; background-color: #ccd; float: left; margin: 1rem;}
.border > ol > li:nth-child(1){
	border-width: 5px; border-style: solid; border-color: #061;
}
.border > ol > li:nth-child(2){
	border:5px dotted #faf;}   
	/*줄여서 사용가능: 축약형 border는 순서상관없다 */
.border > ol > li:nth-child(3){
	border:5px dotted #faf; border-top-style: solid; border-bottom: 3px solid #333; border-left-width: 10px; border-right-color: transparent;}
.border > ol > li:nth-child(4){
	border: 20px solid #ccd;}

/*border - padding과 유사하지만 색깔 변경 가능*/

/* option ======================*/

.option {margin: 50px; width: 200px;height: 200px; 
	background-color: #ccc;
	padding: 25px;
	border: 25px solid #444;
	box-sizing: border-box;
}

/*
.option {margin: 50px; width: 200px;height: 200px; 
	background-color: #ccc;
	padding: 25px;
	border: 25px solid #ccc;
가장 끝에 있는것이 border이다. 

--
	padding: 25px;
	box-sizing: border-box; => 아무리 패딩을 높여도 크기X
	안에 그림이 ... 하하하 안으로 나옴
	box-sizing 박스의 크기를 border-box 보더까지 처리해라 
	안으로 그려진다.
	box-sizing: content-box;
*/

/* outline ======================*/

.outline > p {margin:  auto;
	width: 300px; height: 300px;
	background-color: #fa9;
	outline: 20px solid #0fa;
	outline-offset: 30px;}

	/*.outline > p {margin:  auto;
	width: 300px; height: 300px;
	background-color: #fa9;
	outline-width: 20px; outline-style: solid;outline-color: #fa9
	outline-offset: 30px;}

	outline offset = explored는 없다. 
	허공에 떠다니는 안개  다른아이의 영향을 미치지 않는다. 
	a 태그 focus가 잡혓을때 표시 할때 사용 (밀림없이 처리.)
*/

/*float left
float right
*/


/*clear: both 
- float 처리된 요소에 의해 부모의 크기를 지정가능하도록 float을 강제종료
float 을 사용했을때 h= 자동으로 하면 ? 어떻게 해야하나 clear both
*/