CSS 정렬

• flex
  • 핵심 : 여러 태그를 하나라 묶어서 정렬
  • flex는 기준을 부모박스로 두고 움직이게 된다.
  • display: flex;
    • flex-direction: column; -> 박스를 수직으로 나열
      • align-items: center; ->부모 박스의 가로를 기준으로 가운데 정렬
        • justify-content: center; -> 부모 박스의 세로를 기준으로 가운데 정렬
    • flex-direction: row; (defalut) -> 박스를 수평으로 나열
      • justify-content: center; ->부모 박스의 가로를 기준으로 가운데 정렬
        • align-items: center; -> 부모 박스의 세로를 기준으로 가운데 정렬
    • 정렬 속성
      • flex-start :  처음으로 기본값
      • flex-end : 끝으로 정렬 
      • space-between : 아이템 사이에 균일 간격 정렬
      • space-around : 아이템 둘레에 균일 간격 정렬
      • space-evenly : 아이템 사이, 양 끝에 균일 간격 정렬

•  position
  • flex에 종속되지 않고, 박스를 개별적으로 위치시킬 수 있다. 
  • 회면을 기준으로 고정시키고 싶은 박스가 있는 경우에 사용
  • 화면의 맨 아래쪽에 내비게이션바를 고정시키는 경우. 
    • position: absolute -> 박스의 절대 위치
      • div {
        • position: absolute;
    • position: relative -> 부모 박스 기준으로 상대 위치
    • position: fixed -> 화면 기준으로 절대 위치 (화면 맨 아래에 네비게이션 바를 고정)
• grid