css flex
우선, flex는 2개의 개념으로 나뉜다. 첫번 째는 container, 두번 째는 items
container는 items를 감싸는 부모 요소이며, 각 item을 정렬하기 위해선 container가 필수이다.
어렵다.. 눈 높이에 맞는 블로그를 참고하자. ( https://studiomeal.com/archives/197)
1. flex 컨테이너에 적용하는 속성들
displat: flex; 를 적용하는게 시작이다. flex 아이템들이 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 된다. (inline요소 처럼) height는 컨테이너의 높이만큼 늘어난다.
메인축(main axis)은 오뎅꼬치 교차축(cross axis)은 메인축의 수직
- flex-direction : 아이템들이 배치되는 축의 방향을 결정하는 속성. 메인축을 가로로할거냐 세로로 할거냐?
- flex-wrap : 한줄에 담을 여유 공간이 없을 때 줄바꿈을 어떻게 할꺼냐?
※ justify는 메인축 방향으로 정렬, align은 수직축 방향으로 정렬 (중요!)
-
justify-content : 메인축 방향으로 아이템들을 정렬하는 속성
-
align-items : 수직축 방향으로 아이템들을 정렬하는 속성
※ 위의 2개를 해주ㅜ면 아이템을 한 가운데에 정렬하는게 쉽다.
2. flex 아이템에 적용하는 속성들
-
flex-basis : 아이템의 기본 크기를 설정
예) flex-basis: 100px; 이라고 했을 때, 100px이 안되는 애들은 100px로 되고 넘는 애들은 그대로 유지된다. width: 100px; 로 하면 넘는애들도 100px로 맞춰짐. -
align-self : 수직축으로 특정 아이템 정렬
-
z-index : z축 정렬. 숫자가 클 수록 위로 올라간다. (스크린을 바닥으로 치고)
css grid
flex는 한 방향 레이아웃 시스템이고, grid는 두 방향 레이아웃 시스템이다.
display: grid; 로 시작한다.
- grid-template-rows : 행의 배치
- grid-template-columns : 열의 배치
※ fr은 fraction(비율). 숫자 비율대로 트랙의 크기를 나눈다.
- justify-content : 아이템그룹 가로 정렬.
- align-content : 아이템그룹 세로 정렬.
css 가상요소
https://developer.mozilla.org/ko/docs/Web/CSS/::before
대박 좋은 블로그 찾음!! (반드시 기억해야 하는 CSS 선택자 30개 )
