CSS Layout

css는 layout이 어렵고 중요하다. layout만 완벽히 이해한다면 당신은 프로 프런트엔드!

총 4가지의 방법이 있다.

1. position 활용

   • static
   • relative
   • absoulte

   모르면 복습!

   ---

2. float 활용

   인라인 요소가 주변을 감쌀 수 있게 만든다.

---

3. display:flex 활용

   • 요소 flex container 내부에
     다수의 flex items 존재
     컨테이너로 내부 요소 통제!
     
     

   • 축
     1) main 축 --> justify-content
     justify-items(사용할 이유가 없다) -content 로 포섭 가능

     2) cross 축 --> align-items --> row 가 하나일때
     align-content ex) row 가 1줄 이상이라면, row 간 간격 조정

     content -- 박스들 간의 간격
     items -- 한 박스내에서 요소들간 간격

     tip. 가로/세로 축 파악.

   ---

4. 부트스트랩 - grid

   부트 스트랩이 flex 를 활용해서 만든 클래스를 그대로 활용

   class="container"
   class="row"
   class="col"

   container, row 구조 필수!

   • 12개의 row 크기
   • 6개의 반응형 픽셀 breakpoint! xs-sm-md-lg-xl-xxl