css - 선택자(child, nth) / 정렬

https://flukeout.github.io CSS diner

https://flexboxfroggy.com/#ko flexfroggy 

 

Css 세 가지 적용 방식

1. 인라인(in-line) 방식
2. Style 태그 이용
3. 분리된 css파일 연결

선택자
First-child
Last-child
nth-child(n) = n번째에 적용 / 나누기 곱하기 빼기 가능 ex) 2n
Hover = 마우스 올릴 때 css 효과부여

—

Float 와 flex 레이아웃
Float(이제는 사용하지 않음) -> 반응형웹에 적합하지 않음
clear

flex && grid 상황에따라 혼용

 

—
Justify-contents : 중심축 방향 정렬
Align-items : 중심축 반대 방향 정렬

 

Align-items 는 flex-item 이 한줄일 때 우선 적용
두 줄 이상일 때는 align-content 사용

 

flex-direction 이 바뀌면 중심축의 방향이 바뀜

 

스프린트