[배치]
*position
-요소의 위치 지정 기준
-요소를 배치할 때는 어떠한 기준(position)을 잡고나서 위치값을 설정해야 한다!
-position과 같이 사용하는 CSS 속성들 => top, bottom, left, right, z-index, 모두 음수를 사용할 수 있다!
-static(기본값): 기준 없음
-relative: 요소 자신을 기준으로 배치!
-absolute: 위치 상 부모 요소를(위치 상 부모 요소를 꼭 확인해야 한다!) 기준으로 배치!
-fixed: 뷰포트(브라우저)를 기준
*top, bottom, left, right
-요소의 각 방향별 거리 지정
-auto(기본값): 브라우저가 계산
-단위: px, em, rem 등 단위로 지정
*요소 쌓임 순서(Stack order)
-어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
-1.요소에 position 속성의 값이 있는 경우 위에 쌓임.(기본값 static 제외)
-2.1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임.
-3.1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록(나중에 작성 되어 있을수록 ) 위에 쌓임.
*z-index
-요소의 쌓임 정도를 지정
-auto: 부모 요소와 동일한 쌓임 정도
-숫자: 숫자가 높을 수록 위에 쌓임
*요소의 display가 변경됨
-position 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경됨.
*position 속성의 기본값(default)은?
-static
*위치상 부모 요소를 기준으로 배치하는 position 속성의 값은?
-absolute
*뷰포트를 기준으로 배치하는 position 속성의 값은?
-fixed
*display 속성이 block 값으로 바뀌지 않는 position 속성의 값은?
-relative
[플렉스(정렬)]
*display
-Flex Container의 화면 출력(보여짐) 특성
-flex: 블록 요소와 같이 Flex Container 정의
-inline-flex: 인라인 요소와 같이 Flex Container 정의
*flex-direction
-주 축을 설정
-row: 행 축(좌=>우)
-row-reverse: 행 축(우=>좌)
-Main-axis(주 축)
-Cross-axis(교차 축)
-start(시작점), end(끝점)
*flex-wrap
-Flex Items 묶음(줄 바꿈) 여부
-nowrap(초기값): 묶음(줄 바꿈) 없음
-wrap: 여러 줄로 묶음
*justify-content
-주 축의 정렬 방법
-flex-start(초기값): Flex Items를 시작점으로 정렬
-flex-end: Flex Items를 끝점으로 정렬
-center: Flex Items를 가운데 정렬
*align-content
-교차 축의 여러 줄 정렬 방법
-stretch(초기값): Flex Items를 시작점으로 정렬
-flex-start: Flex Items를 시작점으로 정렬
-flex-end: Flex Items를 끝점으로 정렬
-center: Flex Items를 가운데 정렬
*align-items
-교차 축의 한 줄 정렬 방법
-stretch(초기값): Flex Items를 교차 축으로 늘림
-flex-start: Flex Items를 각 줄의 시작점으로 정렬
-flex-end: Flex Items를 각 줄의 끝점으로 정렬
-center: Flex Items를 각 줄의 가운데 정렬
