📝 오늘 한 것

1. STEP 1 HTML/CSS - CSS layout - learnlayout 마무리 (flexbox)

2. flexbox froggy 게임

📚 배운 것

1. flexbox

• container와 item들로 나뉜다
• 중심 축(main axis)과 교차 축(cross axis)이 있다
• 각 축에는 시작점(flex-start)과 끝점(flex-end)가 있다
• 유튜브 드림코딩 CSS flexbox 완전 정리 & 블로그 포스팅 CSS Flex(Flexible Box) 완벽 가이드 그림 참고

1) container에 적용할 수 있는 속성 ❗❗❗

다 이해했다 인간 승리ㅠㅠㅠ

(1) display: flex

(2) flex-direction: row / row-reverse / column / column-reverse;

• container 내의 item들을 배치할 때, 기준이 될 주축(row, column) 및 방향(정방향, 역방향)

(3) flex-wrap: nowrap / wrap / wrap-reverse❗;

• 한 줄에 item이 가득 찼을 때, 다음 줄로 넘어가게 할 것인지 말 것인지

(4) flex-flow: (=flex-direction 값) (flex-wrap 값);

(5) ❗ justify-content: flex-start(기본값) / flex-end / center / space-around / space-evenly / space-between;

• 중심 축 정렬 방법을 설정 (item 무리를 중심 축에 어떻게 정렬할 것인지)
• flex-direction과 구별 ❗
  justify-content로는 아이템 순서가 바뀌지는 않는다. 아이템 순서는 유지한 채로 어느 쪽에 혹은 어떻게 정렬할 것인지만 바뀐다.

(6) ❗ align-content: stretch(기본값) / flex-start / flex-end / center / space-around / space-evenly / space-between;

• 교차 축 정렬 방법을 설정 (item 무리를 교차 축에 어떻게 정렬할 것인지)
• flex-wrap 속성을 설정해 item이 2줄 이상이고 여백이 있을 경우에만 사용 가능

(7) ❗ align-items: stretch(기본값) / flex-start / flex-end / center / baseline(문자 기준선에 정렬);

• 교차 축에서 item의 정렬 방법을 설정
• item이 2줄 이상일 경우에는 align-content 속성이 우선 적용된다

즉, 'align-content'는 여러 줄들 사이의 간격을 지정하며, 'align-items'는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정한다. 한 줄만 있는 경우, align-content는 효과를 보이지 않는다.

기본

.container>.item.item$*10{$} 두 번 반복

.container {
  height: 80vh;
  background-color: bisque;
  display: flex;
  /* 고려해야 할 순서 1) 중심축 or 교차축 2) 시작점 or 끝점 */
  flex-direction: row;
  flex-wrap: wrap; /* 원래 기본값은 nowrap */
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}

.item {
  width: 100px;
  height: 50px;
  margin: 10px; /* align-content 속성을 사용하기 위해 설정한 여백 */
}

cf. .container {height: 80vh;} 와
html, body {height: 100%;} .container {height: 80%;}는 같다

2) item에 적용할 수 있는 속성

(1) order: ...-2, -1 , 0(기본값), 1, 2...;

• item 순서
• 음수가 허용된다

(2) flex-grow: 0(기본값) ,1 ,2...;

• item 증가 너비 비율

(3) flex-shrink: 1(기본값), 2, 3...;

• item 감소 너비 비율

(4) flex-basis

• 공간 배분 전 기본 너비
• 값이 auto(기본값);일 때, flex-grow와 flex-shrink에 맞춰서 item의 크기가 변경됨
• 값이 %;일 때, 이 비율에 맞춰서 item의 크기가 변경됨

(5) flex: (flex-grow 값) (flex-shrink 값) (flex-basis 값);

• flex-grow를 제외한 나머지 속성은 생략 가능
• flex: 1; = flex: 1 1; = flex: 1 1 0; ≠ flex: 1 1 auto;

flex: initial; = flex: 0 1 auto;
flex: auto; = flex: 1 1 auto;
flex: none; = flex: 0 0 auto;

(6) align-self: center / baseline;

• (container에 부여된 속성을 벗어나서) '개별 item'을 교차 축에 어떻게 정렬할 것인가
• container에 부여된 속성인 align-items보다 우선 적용된다

3) flexbox 활용 레이아웃

flexbox를 이용한 간단한 레이아웃

.container1 {
  display: flex;
  margin: 10px;
}

container > * {
  border: 5px solid palevioletred;
}

nav {
  width: 200px;
}

section {
  flex: 1;
}

flexbox를 이용한 멋진 레이아웃

.container2 {
  display: flex;
  margin: 10px;
}

.container2 > * {
  border: 5px solid olivedrab;
}

.initial {
  flex: initial;
  width: 300px;
  min-width: 100px;
}

.none {
  flex: none;
  width: 300px;
}

.flex1 {
  flex: 1;
}

.flex2 {
  flex: 2;
}

flexbox를 이용한 중앙 정렬

.container3 {
  display: flex;
  margin: 10px;
  height: 300px;
  border: 5px solid brown;
  justify-content: center;
  align-items: center; /* container 안에 item이 1줄 있으니까 align-items 적용*/
}

.container3>div {
  border: 5px solid hotpink;
}

cf. 레이아웃 만드는 방법 ❗

• position 활용 레이아웃
• 퍼센트 너비 레이아웃 + 미디어 쿼리
• inline-block 레이아웃
• column 레이아웃
• flexbox 활용 레이아웃

🙋‍♀️ 질문

1. vertical-align, text-align, line-height 속성

✨ 내일 할 것

1. Google Clone

2. STEP 1 HTML/CSS 복습 (layout 위주)