0208_TIL

Clearing

Float 를 사용했을 때, 다음 요소들이 정렬이 안되도록 하기 위함.

시험에는 안나옴

: => 의사 클래스

:: => 의사 요소

---

Flexbox

• Flex Container 에 줄 수 있는 속성

  • display flex-flow justify-content ...

• Flex Item에 줄수있는 속성

  • order flex ...

Flex Container

• display

  • display : flex; : 블럭방식의 컨테이너 생성 ( 컨테이너가 아래로 쌓임 )
  • display : flex-inline; : 인라인 방식의 컨테이너 생성 ( 컨테이너가 오른쪽으로 쌓임)

• display - Flex Container를 정의

• flex-flow - flex-direction 과 flex-wrap 을 줄여서 쓸 수 있음

• flex-direction - item들의 주 축(main-axis) 설정

  • row (기본값) , row-reverse , cloumn , column-reverse

• flex-wrap - item들의 줄 바꿈 설정

  • 아이템들의 여러줄 묶음 방식 을 어떻게 설정할 건지 결정
  • nowrap ( default ) : 한줄로 모든 아이템 표현
  • wrap : 아이템을 여러줄로 묶어서 표시 wrap-reverse ( 반대 )

• justify-content(시험나옴) - 주 축(main-axis)의 정렬 방법 설정

  • flex-start, flex-end, center, space-between, space-around, space - evenly
  • flex-start , end : 정렬 기준에 따라 왼쪽이 start 오른쪽이 end (기본값 , 주 축 방향에 따라 달라짐 )
    • start : start를 기준으로 정렬 end: end를 기준으로 정렬
  • center : 아이템 가운데 정렬 ( 단, 주 축 방향에 주의 )
  • space - between : 아이템 중 가장 첫번째를 둘 수 있는 가장 왼쪽(start), 마지막을 가장 오른쪽(end), 나머지 아이템의 사이간격을 일정하게 둔다.
  • space - around : 아이템들의 여백을 균등하게 만들어서 정렬
  • space - evenly : 모든 여백을 균등하게 만들어 정렬

• align-content - 교차 축(cross-axis)의 정렬 방법 설정 (2줄 이상)

  • flex-wrap : nowrap ; 일때는 의미가 없음 => nowrap 일땐 align - items
  • stretch : 교차 축을 꽉 채우기 위해 교차 축을 늘리는것 (defalut)
  • flex - start , flex - end
  • center : 교차 축을 기준으로 한다.
  • space-between
  • space-around

• align-items - 교차 축(cross-axis)의 정렬 방법 설정 (1줄)

  • stretch , flex-start , flex - end ....
  • baseline : item 안에 문자 기준선을 맞춰서 정렬 (baseline 만 추가)

• align - self : 각 item에 다가 주는 속성

Flex Item

• order - Item의 순서를 설정
  • 기본 값 : 0
  • 음수 가능
  • 클수록 flex-end 쪽에 가까워 진다.

• flex - flex-grow , flex-shrink , flex-basis 에 대한 단축 속성!
  • flex - grow 생략 불가능 , 기본 값 : 1
  • 단축 속성에서 flex - basis 를 생략 할 시, 자동적으로 0 이 들어감 ( 기본 값을 따르지 않음 )

• flex-grow - Item의 너비 증가(grow) 비율 설정 (시험)
  • viewport를 늘릴 때, 아이템의 너비 증가 비율 설정
    • ex ) 1 : 2 : 1
  • flex - container 가 nowrap이 아니면 의미가 없음

• flex-shrink - Item의 너비 감소(shrink) 비율 설정
  • viewport를 줄일 때, 아이템의 너비 감소 비율 설정
  • flex - container 가 nowrap이 아니면 의미가 없음

• flex-basis - Item의 기본 너비 설정

  • 기본 값 : auto

• align - self 교차축을 기준으로 Item을 정렬하는 방법

  • align - items() 보다 우선순위가 높음
  • 기본값 : auto

---

Bootstrap

• 최대한 문서를 많이 보면서

Grid system (문제 많이 나옴)

• 기본요소 : container , row , column : 컨테이너를 만들고 로우를 만든뒤, 우리가 원하는컬럼을 배치한다.

  ​ 컬럼에 아무것 도 배치 안할 시 자동으로 블록요소가 됨

  • container : 그냥 컨테이너 선언시 반응형 웹이 된다.
  • container - fluid : width를 항상 100%로 지정
  • contaniner - {BreakingPoint}

• 반드시 기억해야 할 2가지

  • 12 개의 colum
  • 6 개의 grid breakpoints