[위치 조정하기]

정교하게 요소를 배치하기 위해서는 position 값을 정하고 top, right, bottom, left 를 주어 이동시킬 수 있다.

position

• 초기값 : static
• postion을 지정해 주면 zindex 값을 지정해서 순서를 변경할 수 있음
• top, right, bottom, left 를 지정해서 해당 요소를 이동시킴

relative

• top, right, bottom, left 값을 주지 않으면 초깃값인 static과 레이아웃에서 요소가 차지하는 공간은 같음
• 자식 요소에서 positon: absolute로 현재 요소를 기준으로 위치시키고 싶을 때 사용

absolute

• 요소를 문서의 흐름에서 제거 -> 페이지 레이아웃에 공간을 배정하지 않음
  (다른 요소 위에 배치될 수 있음)
• 가장 가까운 position 이 지정된 요소를 기준으로 상대적으로 배치
• 조상 중에 position이 지정되어 있지 않다면 html 문서 기준으로 배치

fixed

• 요소를 문서의 흐름에서 제거 -> 페이지 레이아웃에 공간을 배정하지 않음
  (다른 요소 위에 배치될 수 있음)
• 뷰포트를 기준으로 배치

[정렬방법 정하기]

display

• 기본적이 정렬 -> inline, inline-block, block
• 최근에 나온 더 편하게, 세부적으로 정렬 -> grid, flex

inline

• 컨텐츠 영역만큼 영역 차지
• 라인 새로 추가 x
• 높이는 폰트의 크기만큼
• 높이 지정 안됨 -> margin & padding 위아래 지정 안됨
• height와 width 값 지정 x

inline-block

• 줄바꿈 x
• height와 width 값 지정 가능
• height와 width 값 지정 안 하면 -> 컨텐츠 영역만큼 잡힘

block

• width : 100%
• 라인 새로 추가
• height와 width 값 지정 가능
• margin과 padding을 지정 가능

grid & flex

나의 gird & flex 활용법

• 기본적으로 더 세부적인 정렬이 필요할 때 -> flex를 사용
• 큰 틀에서 항목별로 구간을 나누고 더 디테인 한 작업 -> grid
  ( 위와 같이 사용하는 이유
  -- flex는 wrap을 설정하면 뷰포트 크기에 따라 자동으로 줄바꿈이 되지만
  gird 사용시 media 에 따라 지정해줘야함.
  -- grid는 사용하기 위해서 더 작성해야 하는 코드가 많아서 인듯하다.
  -- 공간 비율을 편하게 하기 위해 fr 단위를 쓰기 위해 grid 를 사용하고 했다.
  But, 이 이유 때문이라면 flex의 flex 속성을 이제 사용해 보도록 하자.

display: flex 자식 요소에서의 flex 속성

속성 : 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정
값: auto, initial, none, 단위 없는 양의 수

• 주의
  -- flex-basis 생략시 값 0으로 설정

단위없는 값 1개 -> flex-grow
단위있는 값 or 퍼센트 1개 -> flex-basis
단위없는 값 1개 , 단위있는 값 or 퍼센트 1개 -> flex-grow | flex-basis
단위없는 값 2개 -> flex-grow | flex-shrink
단위 3개 -> flex-grow | flex-shrink | flex-basis

flex: auto; // 1 1 auto
flex: initial; //  0 1 auto
flex: none; // 0 0 auto
flex: 2;
flex: 10em;
flex: 30%;
flex: 1 30px;
flex: 2 2 10%;

mozilla CSS/flex