각 셀렉터의 선택 범위
셀렉터
h1 { }
div { }
전체 셀렉터
* { }
Tag 셀렉터
name, date { }
ID 셀렉터
#greeting { }
class 셀렉터
.name { }
.date { }
후손 셀렉터
header h1 { }
자식 셀렉터
header > p { }
- 수직분할: 화면 콘텐츠가 가로로 배치될 수 있도록 요소를 배치
- 수직분할로 나뉜 것을 수평으로 구분, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치
수평 요소에 height 속성을 추가 시, 수평분할을 보다 직관적
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
display: flex
부모 셀렉터에 적용, 자식 셀렉터의 방향과 크기를 결정하는 레이아웃 구성방법
자식 셀렉터는 flex : a b c;
같은 flex라는 속성을 이용
flex-direction : flexbox는 박스가 수직으로 분할되는 것이 기본값, flex-direction을 통해 분할 방향 정하기 가능 row가 기본값 박스들이 가로로 나열되있다. column을 사용하면 박스들이 세로로 나열 수평으로 분할가능
grow(팽창 지수), shrink(수축 지수), basis(기본 크기)
위의 flex : a b c;
에서 a가 grow b가 shrink c가 basis를 뜻한다.
grow: 자식박스가 팽창할 때 이용 자식박스가 여러개 있을 경우 각각 grow의 비율로 크기가 나뉘며 한개의 자식박스에만 grow를 1보다 큰수로 넣어줄 시 다른 자식박스들의 최소 크기를 제외한 부모박스의 크기로 채운다.
shrink: grow의 반대 자식박스가 수축한다. grow를 사용할때는 사용하지 않는것을 추천. flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방
basis : 자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기, flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지
justify-content : 부모 박스에 justify-content 속성을 적용시, 자식 박스 수평 정렬
flex-start, flex-end, center, space-between
mdn에서 자세한 예시를 볼 수 있다.
align-items : 부모 박스에 align-items 속성을 적용시, 자식 박스 수직 정렬
flex-start, flex-end, center, stretch
mdn에서 자세한 예시를 볼 수 있다.
완성한 내용물
페어와 함께(페어의 도움을 받아) 완성 시켰음.
CSS가 진짜 미칠듯이 어렵고 다른 학우분들이 미칠듯이 잘한거 보니까 부럽다는 생각이 든다.
똑같은걸 또 하라고하면 못할거같다.