1. 박스모델 boxmodels

< boxmodels >

1. border

• border-style | border-color | border-width (두께)
• solid 실선 | dashed 파선 | dotted 점선 | ridge 뾰족하게 | double 두줄 | groove 교차 | inset | outset 등이 있음

2. padding

• 값이 2개 : 첫번째 값은 top, bottom이고, 두번째 값은 right, left이다.
• 값이 3개 : 첫번째 값은 top이고, 두번째 값은 right, left이고, 세번째 값은 bottom이다.
• 값이 4개 : 시계방향.

3. margin

• 방향은 top, right, left, bottom이 있다.

<style>
	.box p {
	width: 600px;
	margin : 30px;
	background-color: pink;}
.box2 p{
	border: 5px solid black;
	padding: 20px;}
.box3 p{
	box-sizing: border-box;}
</style>
...
<div class="box">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab earum reprehenderit saepe, quis iusto dicta cum natus commodi enim accusamus accusantium sit tempore libero qui et facere neque dolores provident?</p>
</div>

<div class="box box2">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab earum reprehenderit saepe, quis iusto dicta cum natus commodi enim accusamus accusantium sit tempore libero qui et facere neque dolores provident?</p>
</div>

<div class="box box2 box3">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab earum reprehenderit saepe, quis iusto dicta cum natus commodi enim accusamus accusantium sit tempore libero qui et facere neque dolores provident?</p>
</div>

위 코딩이 적용된 웹화면

---

2. 배경스타일

1. background:색상 이미지 반복 고정 위치(좌) 위치(상);

• 위치는 % 또는 px 로 설정하는 방법을 많이 쓴다.

• 배경이 가지는 기본값을 모두 포함하고 있음에 유의한다.

2. background-color:배경색상;

3. background-image:url(이미지파일명);

4. background-repeat:반복; (repeat | no-repeat | repeat-x | repeat-y)

<style>
.box { background-repeat: no-repeat; }
</style>
...
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis id provident non explicabo, neque nesciunt quo aperiam vel inventore reprehenderit facilis repellat necessitatibus magnam! Sunt quia recusandae inventore, assumenda, voluptate non at rem expedita a alias officia. Facilis doloremque porro sed, vel necessitatibus, aliquam officiis iusto reprehenderit exercitationem, consequatur eum quos dolorum. Unde ipsam voluptatibus maiores nostrum aperiam, expedita facere quam adipisci, officia deleniti libero rerum delectus optio? Amet dolorum magnam quis aliquid odio perspiciatis iusto dolor, eum earum eius mollitia delectus, quos porro laboriosam cumque laborum? Ex tempora maiores dolorem, ea reiciendis unde. Nisi incidunt qui ad ipsa placeat.
</div>

위 코딩이 적용된 웹화면

5. background-attachment:고정; (fixed | scroll)

• 스크롤 되는 상황에서 배경이 같이 스크롤 되게 할지에 대한 설정이다.

6. background-position:x축 y축; 위치(left center right | top center bottom)

<style>
.box { background-position: top, center; }
</style>
...
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis id provident non explicabo, neque nesciunt quo aperiam vel inventore reprehenderit facilis repellat necessitatibus magnam! Sunt quia recusandae inventore, assumenda, voluptate non at rem expedita a alias officia. Facilis doloremque porro sed, vel necessitatibus, aliquam officiis iusto reprehenderit exercitationem, consequatur eum quos dolorum. Unde ipsam voluptatibus maiores nostrum aperiam, expedita facere quam adipisci, officia deleniti libero rerum delectus optio? Amet dolorum magnam quis aliquid odio perspiciatis iusto dolor, eum earum eius mollitia delectus, quos porro laboriosam cumque laborum? Ex tempora maiores dolorem, ea reiciendis unde. Nisi incidunt qui ad ipsa placeat.
</div>

위 코딩이 적용된 웹화면

7. background-size:cover;

• 이미지를 덮고 넘치는 부분은 잘린다.

8. background-clip:content-box;

• 패딩에는 이미지가 적용되지 않음.

  <style>
  .box2{ background-clip: content-box; }
  </style>
  ...
  <div class="box box2">
  	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, error? Ad labore quidem temporibus cum fugit perferendis aut consequatur incidunt perspiciatis debitis, iste hic minima sunt repellat molestiae nemo obcaecati explicabo natus illum laudantium voluptates minus quaerat blanditiis illo. Assumenda sit tenetur ut commodi, iure nisi incidunt molestiae aliquid, impedit atque beatae. Tempore ea labore maxime quos, saepe neque numquam! Distinctio, dicta, delectus. Laudantium doloribus mollitia dolore consequuntur, eaque quibusdam, ex ipsa perspiciatis fugit molestiae delectus odio esse, amet et, porro minus tempora? Ea incidunt reprehenderit quas, id repudiandae ad. Pariatur aliquam architecto perferendis, labore dolor nisi, eos tenetur officiis.
  </div>

  위 코딩이 적용된 웹화면
  

9. background-origin:content-box;

• content창에 맞춰서 삽입된다.

  ---

3. 테이블 관련 스타일

1. table-layout

• 각 셀마다 글자수가 달라서 일정한 폭을 설정하기 위해 삽입

<style>
.tbl {table-layout: fixed;}
</style>
...
<table class="tbl">
	<caption>table caption</caption>
	<thead>
		<tr>
			<th scope="col">table header cell1-1</th>
			<th scope="col">table header cell1-2</th>
			<th scope="col">table header cell1-3</th>
			<th scope="col">table header cell1-4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>table data cell1-1, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur fugit quas debitis optio consequatur, et nesciunt, recusandae sint quod quo.</td>
			<td>table data cell1-2</td>
			<td>table data cell1-3</td>
			<td>table data cell1-4</td>
		</tr>
		<tr>
			<td>table data cell2-1</td>
			<td>table data cell2-2</td>
			<td>table data cell2-3</td>
			<td>table data cell2-4</td>
		</tr>
		<tr>
			<td>table data cell3-1</td>
			<td>table data cell3-2</td>
			<td>table data cell3-3</td>
			<td>table data cell3-4</td>
		</tr>
		<tr>
			<td>table data cell4-1</td>
			<td>table data cell4-2</td>
			<td>table data cell4-3</td>
			<td>table data cell4-4</td>
		</tr>
	</tbody>
</table>

위 코딩이 적용된 웹화면

2. border-collapse

• 표의 선을 하나로 합친다.

  <style>
  .tbl {table-layout: fixed;}
  </style>

>위 코딩이 적용된 웹화면
>![65.PNG](https://velog.velcdn.com/post-images%2Fdenmark-choco%2Ff356f050-312a-11ea-9544-732f0cf770d7%2F65.PNG)
 
 

**3. caption-side**

 - 표제목위치 : top, bottom, left, right

**4. empty-cells**

 - 텍스트가 없는 빈 셀을 지울 수 있다. border-collapse이 설정되면 삽입불가.
 
 
 
 
 --------------------------------------



#  4. 플롯 float 지정하기


**1. float : 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성.**

...

~~~

위 코딩이 적용된 웹화면

2. 플롯과 마진을 이용하기.

<style>
.wrap .thumb {
			float: left; /*left, right*/
			margin: 0 0 15px 0;
			}
            .wrap .text p {
			margin-left: 115px;			
			}
</style>
...
<div class="wrap">
	<h1>float example</h1>
	<p class="thumb"><img src="http://placehold.it/100x120?text=Profile" alt=""></p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia alias placeat blanditiis ad fugit eveniet est voluptas dolorem aut architecto tempore delectus sapiente suscipit enim incidunt dolores, expedita corporis ipsam, sint quia sunt repellendus! Enim dolorum iste pariatur fuga laboriosam amet eum voluptates illum esse nihil, voluptatum a culpa laudantium aliquam ipsa numquam quisquam corporis sunt tenetur accusamus, officiis aperiam nostrum in magnam! Dolor excepturi ipsum et laudantium non! Quae obcaecati nihil commodi ipsa unde modi inventore fugit. Harum veritatis alias ratione fugit, autem corporis est adipisci quia officia ipsam. Velit, magni, excepturi. Laudantium ad dolore quibusdam labore sint aperiam.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia alias placeat blanditiis ad fugit eveniet est voluptas dolorem aut architecto tempore delectus sapiente suscipit enim incidunt dolores, expedita corporis ipsam, sint quia sunt repellendus! Enim dolorum iste pariatur fuga laboriosam amet eum voluptates illum esse nihil, voluptatum a culpa laudantium aliquam ipsa numquam quisquam corporis sunt tenetur accusamus, officiis aperiam nostrum in magnam! Dolor excepturi ipsum et laudantium non! Quae obcaecati nihil commodi ipsa unde modi inventore fugit. Harum veritatis alias ratione fugit, autem corporis est adipisci quia officia ipsam. Velit, magni, excepturi. Laudantium ad dolore quibusdam labore sint aperiam.</p>
</div>

위 코딩이 적용된 웹화면

---

5. 플롯 float 해지하기

1. clear

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>clear</title>
	<style>
		img {
			vertical-align: top;
		}
		.area {
			width: 800px;
			margin: 0 auto;
			border:3px solid red; 
			/*border는 float을 인지하지 못한다.*/
		}
		.area:after {
			content:'';
			display: block;
			clear: both;
		}
		.area .thumb {
			float: left;
			border:3px solid black;
		}
		.cls {
			clear: both;
		}		
	</style>
</head>
<body>

<div class="area">
	<div class="thumb"><img src="http://placehold.it/100x120?text=1" alt=""></div>
	<div class="thumb"><img src="http://placehold.it/100x120?text=2" alt=""></div>
	<div class="thumb"><img src="http://placehold.it/100x120?text=3" alt=""></div>
	<div class="thumb"><img src="http://placehold.it/100x120?text=4" alt=""></div>
	<div class="thumb"><img src="http://placehold.it/100x120?text=5" alt=""></div>
	<!-- clear 위치 -->
</div>
<p class="cls">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem iusto ab dolorem ullam totam, cum nostrum quia illo commodi vero repellendus culpa nihil, incidunt ipsam ratione eveniet consequuntur exercitationem. Commodi ex similique obcaecati illo atque cumque libero. Totam similique itaque reiciendis, sapiente tempore accusantium, vero voluptatum, harum officia cupiditate, sequi maxime laboriosam blanditiis. Fugiat quam et officia laboriosam veritatis cumque ad, nesciunt saepe dicta odit unde architecto voluptatum assumenda, voluptatibus vel qui at nulla, quas, quisquam rerum dolorum culpa porro. Error ipsa commodi mollitia neque? Error impedit hic, magni ratione id laudantium ut recusandae voluptas alias obcaecati explicabo soluta nisi.</p>

</body>
</html>

• .area .thumb에 float이 지정되어서 float을 인식하지 못하는 border가 작용되지 않는 경우, .area:after로 block한 후 clear하면 border가 적용된다.

위 코딩이 적용된 웹화면

---

6. 포지션 position

1. position : 태그들의 위치를 결정

• absolute(절대) | relative(상대, absolute의 기준이거나 현재위치를 기준) | fixed(고정, 가장 바깥쪽이 기준) | static(포지션이 지정되 있는 요소를 지정되기 이전의 상태로 만들어줄때 사용한다.)

	<style>
		.box{
			position: fixed;
			left: 100px;
			background-color: lime;
			width: 400px;
			padding: 20px;
			font: 12px/1.6 verdana,sans-serif;
			/*글자크기/줄간격/서체*/
			}
	</style>
...
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi aliquid sequi dolorum neque ut molestias temporibus numquam, necessitatibus quam saepe!</div>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt error, quia distinctio? Rem iste aliquam assumenda inventore distinctio facere debitis, impedit est saepe sed deserunt similique soluta officiis ipsum cum repellendus neque ipsa vel expedita sit. Nemo, ab, amet. Praesentium impedit quas, rem, totam vero fuga qui quidem ullam voluptates?</p>

위 코딩이 적용된 웹화면

2. position 기준(relative이 absolute의 기준)

• 포지션은 바깥쪽 포지션 기준으로 위치 지정

• 바깥쪽 포지션이 없으면 body 가 기준

• z-index : 숫자가 클수록 앞으로 올라온다.

• border은 float, position을 인식하지 못한다.

	<style>
		}
		.area {
			position: relative;		
			width: 800px;
			margin: 0 auto;
			border: 5px dashed red;
		}
		.a {
			position: absolute;
			left: 0;
			top: 0;		
			background-color: rgba(255,0,0,.7);
		}
		.b {
			position: absolute;
			left: 50px;
			top: 50px;
			background-color: rgba(0,255,0,.7);
		}
		.c {
			position: absolute;
			left: 100px;
			top: 100px;
			background-color: rgba(0,0,255,.7);
		}

	</style>
...
<div class="area">
	<div class="box a">A Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi aliquid sequi dolorum neque ut molestias temporibus numquam, necessitatibus quam saepe!</div>
	<div class="box b">B Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi aliquid sequi dolorum neque ut molestias temporibus numquam, necessitatibus quam saepe!</div>
	<div class="box c">C Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi aliquid sequi dolorum neque ut molestias temporibus numquam, necessitatibus quam saepe!</div>
</div> 
<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt error, quia distinctio? Rem iste aliquam assumenda inventore distinctio facere debitis, impedit est saepe sed deserunt similique soluta officiis ipsum cum repellendus neque ipsa vel expedita sit. Nemo, ab, amet. Praesentium impedit quas, rem, totam vero fuga qui quidem ullam voluptates?</p>

위 코딩이 적용된 웹화면
<area가 기준이 되어 box a,b,c가 배치>

3. position 기준(relative이 relative의 기준)

• margine을 이용해서 배치.

	<style>
		.area {
			position: relative;
			width: 800px;
			margin: 0 auto;
			border: 5px dashed red;
		}
		.a {
			position: relative; 
			left: 0;
			top: 0;
			background-color: rgba(255,0,0,.7);
		}
		.b {
			position: relative;
			left: 50px;
			margin-top: -100px;
			background-color: rgba(0,255,0,.7);
		}
		.c {
			position: relative;
			left: 100px;
			margin-top: -100px;
			background-color: rgba(0,0,255,.7);
		}

	</style>
...
<div class="area">
	<div class="box a">A Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi aliquid sequi dolorum neque ut molestias temporibus numquam, necessitatibus quam saepe!</div>
	<div class="box b">B Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi aliquid sequi dolorum neque ut molestias temporibus numquam, necessitatibus quam saepe!</div>
	<div class="box c">C Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi aliquid sequi dolorum neque ut molestias temporibus numquam, necessitatibus quam saepe!</div>
</div> 
<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt error, quia distinctio? Rem iste aliquam assumenda inventore distinctio facere debitis, impedit est saepe sed deserunt similique soluta officiis ipsum cum repellendus neque ipsa vel expedita sit. Nemo, ab, amet. Praesentium impedit quas, rem, totam vero fuga qui quidem ullam voluptates?</p>

위 코딩이 적용된 웹화면
<area가 기준이 되어 box a,b,c가 배치>

---