position

• css position 속성은 요소의 위치를 조절할 때 사용
• position의 값으로 static, relative, absolute, fixed, sticky를 사용할 수 있음

static

• 일반 문서 흐름에 따라 배치 (자신의 위치를 지킴)
• 스크롤하면 움직임
• top, right, bottom, left의 값에 영향을 받지 않음

relative

• 요소의 위치를 자기 자신을 기준으로 움직임
• top, right, bottom, left의 값에 따라 위치를 조절할 수 있음

absolute

• 조상 요소에 의해 상대적으로 배치
• 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록 기준으로 배치
• top, right, bottom, left의 값에 따라 위치를 조절할 수 있음

fixed

• 일반 문서 흐름에서 완전히 제외
• 스크롤해도 움직이지 않음
• 뷰포트 초기 컨테이닝 블록을 기준으로 배치
• top, right, bottom, left의 값에 따라 위치를 조절할 수 있음

sticky

• 일반 문서 흐름에 따라 배치 (자신의 위치를 지킴)
• 스크롤하면 움직임
• 가장 가까운 블록 레벨 조상을 기준으로 배치
• top, right, bottom, left의 값에 따라 위치를 조절할 수 있음

display

• block과 inline 요소 중 어느 쪽으로 처리할지 설정
• flow, grid, flex처럼 자식 요소를 배치할 때 사용할 레이아웃 설정

display: block;

• 요소를 block 요소로 만듦
• block 요소는 브라우저에서 한 줄을 차지한다. (개행)
• width, height, margin, padding 속성 모두 반영됨
  ex ) div, p, h1 태그 등

display: inline;

• 요소를 inline 요소로 만듦
• 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치
• width, height 속성이 반영되지 않음
• margin과 padding 속성은 좌우 간격만 반영, 상하 간격은 반영X
  ex ) span, a, em 태그 등

display: inline-block;

• 요소를 inline-block 요소로 만듦
• 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치
• width, height, margin, padding 속성 모두 반영됨
  ex ) button, input, select 태그 등

display: flex;

• 요소를 flex 항목으로 만듦
• 아래의 기본 값이 지정됨

- 항목은 행으로 나열
- 항목은 주축의 시작 선에서 시작
- 항목은 주 차원 위에서 늘어나지는 않지만 줄어들 수 있음
- 항목은 교차축의 크기를 채우기 위해 늘어남
- flex-basis 속성은 auto로 지정
- flex-wrap 속성은 nowrap으로 지정

flex-direction: row-reverse;

• 시작 선과 끝 선이 서로 바뀜

flex-direction: column;

• 주축이 변경되고 항목들은 열으로 나열됨

flex-direction: column-reverse;

• 주축이 변경되고 항목들은 열으로 나열됨
• 시작 선과 끝 선이 서로 바뀜