목차
1. negative margin
2. position
3. flexbox

1. negative margin

정의 : 마진값을 역으로 줌, 마진을 역으로 줘 차지하는 공간을 줄여주는 것

그렇다면 margin은 무엇인가?

margin : 요소가 실제로 차지하고 있는 공간을 의미

즉, margin의 영역과 요소의 영역에는 차이가 있다는 것을 의미한다.
만약, 우리가 margin에 양의 값을 제공한다면, 요소의 크기는 그대로 남기고 실제로 차지한 공간만을 늘린다.

반대로, margin에 음의 값을 제공하면, 요소의 크기는 그대로 남기고 실제로 차지한 공간만 줄인다. 이를 negative margin이라 부른다.

여기서, 핵심은 실제 차지란 공간만 줄이고, 요소의 크기는 그대로라는 것이다. 이는 브라우저를 속이는 행동이라고 한다.

Q. 그렇다면 이것을 사용하는 이유는 무엇인가?
A. 실제 영역이 사라지고 요소가 그대로 남기에 부분 확대와 같은 시각적 효과를 낼 수 있다.

2. position

position은 요소의 위치를 옮길때 사용하는 것으로, 같은 역할을 하는 transform과 달리 공간을 유지하지 않고 이동한다는 것이 특징이다.

position의 inital value는 static이며, positoin에 static이 아닌 값이 올 경우, 해당 속성이 부여된 선택자의 요소들이 앞으로 튀어나온다(화면상 맨 앞으로 드러남)

• position : relative는 후술할 absolute의 containg block이 되어준다. 그리고 순서에 상관없이 앞으로 튀어나오기에, 유용하게 쓸 수 있으나, 반대로 튀어나오는 상황이 아니면 사용에 주의해야 한다.
  
  
• position: absolute는 공간을 버리고 떠버리는 속성값으로, left :0, right: 0 을 넣으면 양 옆으로 늘어나고, top : 0 , bottom : 0 을 주면 위 아래로 늘어난다.
  이를 단축속성으로 표현하면 inset: 0; 으로 사방으로 늘어난다.
  참고로 position의 방향(left, right...)의 inital value는 auto이다.

3. flexbox

flexbox는 레이아웃을 만들때, 레이아웃의 아웃라인을 잡아주는 중추적인 역할을 수행한다.
중요한 점은 flexbox는 부모요소(container)에서 틀을 잡고, 자식요소(flex items)를 나열한다는 것이다. 즉, 부모요소가 반드시 존재해야 한다는 것을 의미한다.

• flex-basis : auto는 내부에 있는 컨텐츠의 크기만큼 flexbox의 크기를 결정해주는 inital value이다.
  
  
• flex- grow는 flex-basis 에 grow를 더해준다. 그러기 위해선 우선 flexbox에 사용가능한 공간이 존재해야 한다.
  보통 flex-basis의 공간을 키우고 싶을때, grow : 1;을 한다.
  
  
• flex-shrink : 1(inital value)은 공간을 줄일때 사용하는 속성값으로, 여기에 0을주면 shrink의 영향을 받지 않는다.
  
  
• flex-items에 min-width :auto는 내부의 컨텐츠 크기를 의미하며, 이는 강제되기에 내부 컨텐츠 크기이하로 못 줄어든다.
  
  
• **flex-basis : 0 이어도 min-width로 인해 내부 컨텐츠 크기만큼 공간을 차지한다.** 따라서 flex-basis : 0 min-width: 0 flex-grow: 1; 을 넣어야 컨텐츠 크기에 상관없이 공평하게 공간을 분할해 갖는다.
  
  
• align-items : stretch는 flex-itmes 중 하나가 height 값을 가지면 부모와 다른 items의 크기도 같이 커지는 inital value이다.