<자주쓰는 CSS 포지셔닝>

• position속성 : relation & absolute

(부모요소)Relative/Absolute(자식요소)

자식은 부모의 보살핌 안에서 벗어날 수 없다.

자식요소는 부모요소의 boundry 안에서 움직인다.

(body인 경우에는 position:relative를 줄 필요가 없다.)

위치이동: "top, right, bottom, left 프로퍼티" 를 통해서 이동
top, right,bottom,left은 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티

• flex 속성 (display:flex)

시작은 부모요소에 ' display:flex '을 주는 것으로 시작한다.

display:flex 를 부모요소에게 적용하면 그 자식요소들은 모두 inline요소의 성질을 갖는다.

부모요소에서 적용시킬 수 있는 속성

1. justify-content: 가로선상에 정렬할 수 있다.

• lex-start: 요소들을 왼쪽으로 정렬(디폴트값)
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬
• center: 요소들을 컨테이너의 가운데로 정렬
• space-between: 요소들 사이에 동일한 간격을 둡니다.
• space-around: 요소들 주위에 동일한 간격을 둡니다.

2. align-items : 세로선상에 정렬할 수 있다. align-self는 개별 요소에 적용할 수 있는 또 다른 속성.

• flex-start: 요소들을 꼭대기로 정렬(default)
• flex-end: 요소들을 바닥으로 정렬
• center: 요소들을 세로선 상의 가운데로 정렬
• baseline: 요소들을 시작위치에 정렬
• stretch: 요소들을 컨테이너에 맞도록 늘립니다.

3. flex-direction: 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정.

• row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
• column: 요소들을 위에서 아래로 정렬합니다.
• column-reverse: 요소들을 아래에서 위로 정렬합니다.

  ---

  *{box-sizing:border-box};

=> padding 과 border로 인한 세세한 계산을 하지않아도 되게 해준다.

• position속성을 활용한 중앙정렬

1. 부모요소에

.parent{
	position: relative;
}

2. 자식 요소에

.children{
   width: a px
	position: absolute;
   
   left:50%;
   top:50%;

   transform: translate(-50%,-50%);
}

자식요소에 꼭 width 값을 주도록 하자!

항상 적용하는 것이 아니므로 상황에 따라 판단하여 사용!