레이아웃 스타일(position, flex)

position : 태그의 위치를 지정하는 속성

 

position : relative;
- 지정된 태그 내부에 다른 태그가 상대적인 위치에 지정할 수 있도록 기준이 될 수 있게 만드는 속성

position : absolute;
- 기본 태그의 배치 순서를 무시하고 지정된 절대 위치에 태그 배치

position : fixed;
- 항상 고정된 위치에 태그를 배치함(화면이 움직여도 항상 같은 위치)

position : sticky; (스크롤에서 많이 사용)
- 특정 스크롤 위치에 도달했을 때 고정됨
- relative(상대적 위치) + fixed(고정 위치)

- 지정된 기준에 도달하면 위치 고정
  ex) top bottom left right

z-index : 정수
- 기본값 0 숫자가 클수록 맨 앞으로 보임. 숫자가 작을수록 맨 뒤로 보임

 

display : flex

 

태그에 정렬되는 방향, 순서 태그간의 간격을 하나하나 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 방식

display: flex
- 감싸는 태그를 flex 형식으로 변경
   -> 내부에 작성되는 태그를 유연하게 배치하겠다는 의미
   -> 내부에 있는 태그가 가진 margin 속성을 제거

 

 

 

 

각 div의 width가 75px로 정해져 있지만 display: flex 때문에 컴퓨터가 스스로 수치를 처리해 줌.