CSS 속성(2)

배치(1)

• position
  요소의 위치 지정 기준
  • static 기준 없음
    relative 요소 자신을 기준
    absolute; 위치 상 부모 요소를 기준
    fixed 뷰포트(브라우저)를 기준

absolute는 위치 상 부모 요소를 기준으로 배치
부모 요소에 position: relative; 를 입력하면 원하는 위치로 이동 가능
입력하지 않을 시 원하는 위치가 아닐수 있음
(뷰포트 기준으로 부모 요소의 위치를 지정하기 때문에)

배치(2)

position: fixed;
뷰포트(브라우저)를 기준으로 배치
스크롤을 움직여도 화면 어딘가에 위치하게 하는 용도

• 요소 쌓임 순서(Stack order)
  어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임 (static 제외)
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을수록 위에 쌓임
3. 1,2번 조건이 같은 경우, HTML의 다음 구조일수록 위에 쌓임

배치(3)

• z-index
  요소의 쌓임 정도를 지정

• 요소의 display 변경
  position: absolute, fixed는 block요소와 같은 요소임

플렉스(정렬) Container(1)

• display
  flex container의 화면 출력(보여짐)특성

  • flex 는 block 요소
    inline-flex 는 inline 요소

• flex-direction
  주 축을 설정

  • 수평 (행 row)
    row 행 축 (좌=>우)
    row-reverse 행 축 (우=>좌)
  • 수직 (열 column)
    column 열 축 (위=>아래)
    column-reverse 열 축 (아래=>위)

플렉스(정렬) Container(2)

• flex-wrap
  flex items 묶음(줄 바꿈) 여부

• justify-content
  주 축의 정렬 방법

• align-content
  교차 축의 여러 줄 정렬 방법

• align-items
  교차 축의 한 줄 정렬 방법

플렉스(정렬) Items

• order
  flex item의 순서

• flex-grow
  flex item 증가 너비 비율

• flex-shrink
  flex item 감소 너비 비율

• flex-basis
  flex item 공간 배분 전 기본 너비