굉장히 기본적인 CSS 개념

단위 em, rem, vw, vh
테두리, 메뉴바를 제외한 뷰포트에 비례하는 단위
반응형 작업을 할 때 굉장히 많이 사용

calc(): 가로 세로의 길이를 지정할 때, 서로 다른 단위들을 계산해도 가능하다.
ex) width: calc(100% - 120px);
덧셈, 뺄셈을 할 경우 앞 뒤에 공백을 써야 한다.

row로 container의 크기를 정한 다음 align-items: flex-start 로 했을때, 자식요소들에 내용이 없다면, hight가 100% 라도 0으로 정의된다. (기본값)

레이아웃이 깨졌는데 어디서 어떻게 깨졌는지 모르는 경우,
1. 마진과 패딩, box-sizing의 관계를 제대로 정의하지 않아서
2. position을 제대로 알고 있지 않아서!!
3. flex, grid를 제대로 다루지 못해서
4. 앞의 세개를 제대로 혼합하지 못해서 ..

<position>
1. static (기본값) - 아래의 네가지 속성을 적용하지 못하고 문서상 원래 위치에 배치
2. relative
3. absolute
4.fixed
5.sticky

네가지 속성이 어떻게 작동하는 지는 positon 속성에 따라 달라진다.
top/left/bottom/right

 <static>
top:20px .. 
기본 위치는 static과 같지만,. 보이는 위치가 살짝 바뀐다.

  
  <absolute> - relative에 절대적.
위의 부모 요소들을 다 무시한 후 relative를 절대적 기준으로 삼게 된다. 
relative가 적용된 요소가 없을 경우 html의 body 전체를 기준으로 삼게 된다. 

 <fixed> - viewport에 항상 고정. 
스크롤과 무관하게 뷰표트를 기준으로 항상 고정된 위치 설정 가능.