1. CSS

ㄱ.margin

• margin은 객체 바깥쪽 여백을 줄때 사용한다. (상 좌 하 우 순서로 px을 준다.)

ㄴ.pading

• pading은 객채에 안쪽의 크기를 줄때 사용한다. (상 좌 하 우 순서로 px을 준다.)

ㄷ.border

• border은 객체의 테두리를 줄때 사용한다(radious등)

ㄹ.position

• position중에 relative는 원래 웹에서 가지고 있는 값을 없애준다?
• position중에 fixed는 웹사이트 창 기준으로 움직인다.
• position중에 absolute는 position을 담은 객체를 담은 기준으로함

	<header class="box">		
    <div>1>/<div>				//이때 div는 box를 기준으로 움직이는게 absolute
</body>

ㅁ.flex box

• flexbox는 container안에서 작용하는것과 container안의 item에 작용하는것들이 있는데
• container안에서 작용하는것들은 diplay:flex-direction, flex-wrap, justify-content, align-items, align-contet등이 있다.
• item에 적용되는것들은 order, flex-grow, flex-shrink, flex등이 있다.

ㅂ.display

• display:flex는 좌에서 우로 정렬됨
• display:flex-direction row는 좌에서 우측으로 ,row-reverse는 반대로됨
• display:column은 위에서 아래로, column-reverse 반대로됨
• flex-wrap을 안하면 한줄에 모든객체가 다 담기지만 wrap을 하면 객체가 다음줄로 넘어가게됨 반응형처럼

ㅅ.justify-content(수평)

• justify-content(수평적 움직임) : flex-end는 오른쪽끝에, center는 가운데, space-around는 각각의 객체에 공간을 줌, space-evenly, space-between등이 있음

ㅇ.align-item(수직)

• align-items(수직적 움직임) : center은 가운데위치 baseline 객체안에 글자가 있으면 객체의 크기가 달라도 글자를 중앙에두고 정렬함

ㅈ.align-content

• align-content : space-between은 양옆은 딱붙고 가운데를 중심으로 공간이 동일하게 분리됨.

ㅊ. 반응형

• flexgrid, flexbox등을 사용하고 px값으로 고정된값을 주는것보단 %나 vh, vw를 사용하는게 좋고 미디어쿼리(@media)를 사용해야함
• min-width= ~이상만 적용하겠다
• max-width= ~까지만 적용하겠다