1. flex
- 더 쉽게 css를 제어하하는 명령어
- 사용할 자식에게 명시하지 않고 부모에게 명시한다.
- flex 컨테이너는 주축(수평)과 교차축(수직)두개의 축을 가진다.
- flex-direction: column 으로 주축(수평) - > 주축(수직)으로 바꿀수도 있긴한데 디폴트는 수평이다.
display: flex; // 이렇게 선언해주면 됨justify-content
- 주축(수평) 배치
justify-content : center // 가운데 정렬
justify-content : flex-end // 오른쪽 정렬
justify-content : flex-start // 왼쪽 정렬(디폴트값)
justify-content : space-evenly // 빈 공간을 같은 크기로 나누어서 배치align-items
- 교차축(수직) 배치
align-items : center // 가운데 정렬
align-items : flex-end // 아래쪽 정렬
align-items : flex-start // 위 정렬(디폴트값)
align-items : space-evenly // 빈 공간을 같은 크기로 나누어서 배치2. position
- 위치를 세세하게 컨트롤해줌
position: fixde; // 해당 엘리먼트의 위치를 고정해줌
position: relative; // 해당 엘리먼트의 위치를 옮겨줌(스크롤 내려도 해당 위치 고정)
position: absolute; // 가장 가까운 position:relative인 부모 엘리먼트 기준으로 정렬
// relative, absolute 는 top, bottom, left, right 를 함께 사용한다.
QA 성장기