position
배치할때는 기준을 잡고, 상하좌우 방향을 설정해야함
기준
static - 기준없음
relative - 요소 자신을 기준
출력이 애매하기때문에 거의 사용되지 않고, 밑처럼 부모요소를 기준으로 지정할 때 사용
absolute -위치상 부모 요소를 기준
제일 가까운 부모요소에 position: relative; 지정해야함, 없다면 뷰포트가 부모가 됨
속성이 absolute, fixed라면, display 속성이 block됨
fixed - 뷰포트를 기준
stack order
요소가 위에 쌓이는 지 아래 순서대로 결정.
1. 요소에 기본 static을 제외하고 속성값이 있는 경우
2. 1번 조건이 같은경우, z-index 속성 값이 높을수록 위에 쌓임
3. 1번 2번이 같은경우, html의 다음 구조일수록 위에 쌓임
flex
텍스트flex를 사용하려면 일단 flex container를 만들어야함
flex - 블록요소같이 container 정의
inline-flex - 인라인요소같이 container 정의
flex-direction
row - 수평정렬
row-reverse - 수평정렬(우에서 좌로)
column - 수직정렬
column-reverse - 수직정렬(아래에서 위로)
flex-wrap
기본적으로 flex container는 한줄에 표시하려하기 때문에, 문제가 생기면 줄을 추가
nowrap - 묶음(줄바꿈) 없음
wrap - 여러줄로 묶음
display: flex;
flex-wrap: wrap;
justify-content
주 축의 정렬방법, 주로 수평정렬
flex-start - 왼쪽 정렬
flex-end - 오른쪽 정렬
center - 가운데 정렬
display: flex;
justify-content: flex-start;
align-content
교차 여러 줄 통째로 정렬방법, 사용하려면 기본으로 여러줄이 있어야하며, 여백도 있어야함
display: flex;
flex-wrap: wrap;
stretch - 기본값
flex-start - 위쪽 정렬
flex-end - 아래쪽 정렬
center - 가운데 정렬
align-items
교차 한줄 정렬방법, 주로 수직정렬
stretch - 기본값
flex-start - 위쪽 정렬
flex-end - 아래쪽 정렬
center - 가운데 정렬
