2주 2일차 - HTML/CSS 활용

계획

오전 줌 세션 전까지

1. flex 실습
2. 코플릿 반복문 문제 17, 18번 복습

3시 페어 전까지

1. flex 반복숙달

정규일정 종료 후: flex/grid 공부

1. 페어와 추가 공부 필요시 이어서 진행, 아니면 딥다이브 변수파트 공부
2. 정렬알고리즘
3. til정리

0. 아고라 스테이츠 줌 세션

질문자 입장: 바보같은 질문이지 않을까, 내가 선임에게 일을 딜레이시키지는 않을까, 내가 뭘 모르는지 몰라서

선임자 입장: 질문 좀 해줬으면 좋겠는데, 이거 이거 이런건 설명하지 않으면 처음에 업무를 이해하기 힘들텐데

질문자: 필요한 말을 구체적이고 명료하게 전달하는 게 포인트

개발을 배울 수 있는 회사: 맞선임이 있는 회사

나를 담당할 선임이 없다면? : 검색

Don’t reinvent the wheel.

• javascript.info(모던자바스크립트 튜토리얼) - 최신화가 빠르므로 좋다.
• MDN
• ecma specification

질문의 중요성

• 고급개발자로 가려면 스스로 질문을 구체화하고 답을 구할 수 있어야 함
• 협업능력

아고라 스테이츠에서 소프트스킬 미리 연습해라

• 커뮤니케이션 스킬 연습
• 질문 템플릿을 준수하면서 좋은 질문을 하는 법을 체화
• 공부한 것을 5살 짜리에게 설명할 수 있을 정도로 설명할수 있으면 최고

1. 리뷰

css공부를 미뤄둔 결과가 적나라하게 드러나는구나.

2. 학습 키워드

• 부모 요소에 부여해야 할 flexbox 속성, 자식 요소에 부여해야 할 flexbox 속성
• row-reverse, column-reverse
• wrap-reverse(특이함)
• nowrap시 자식요소 크기 변화

3. 스스로 설명해보기

• 부모 요소에 적용시키는 flexbox 속성들
  • 정렬 방향: flex-direction
  • 줄바꿈: flex-wrap
  • main축 기준: justify-content
  • cross-axis 기준: align-items, align-content

1. flex-direction: 정렬 방향 지정
2. justify-content: main축 방향 정렬 속성
   1. flex-start(기본값): main축 시작점 쪽으로 정렬
   2. flex-end: main축 끝점 쪽으로 정렬
   3. space-around : 각 요소의 **‘둘레’**에 좌우 동일한 여백 적용
   4. space-between : 양 끝 요소는 여백 없이 양 끝으로 붙고 **‘사이’**의 요소들만 여백을 갖음
   5. space-evenly : 모든 요소가 양 끝과 요소 사이간에 같은 여백을 갖음
   6. flex-wrap: 자식 요소 크기가 부모를 넘어갈 경우 줄바꿈 여부 지정하는 속성
   7. flex-flow: flex-direction 과 flex-wrap을 한번에 지정 가능한 단축속성(ex: row wrap;)
3. align-items: cross-axis 방향 정렬 속성
   1. stretch(기본값) : cross-axis 방향으로 끝까지 쭉 늘어남
   2. flex-start : cross-axis 방향의 시작점에서부터 정렬
   3. flex-end : cross-axis 방향의 끝점에서부터 정렬
   4. center : cross-axis방향의 중앙에 정렬
   5. baseline : 텍스트 기준선(ex: 줄 있는 공책의 줄)에 정렬
   6. 주의점: 요소간 여백 관련 space- 속성들은 align-items에선 사용 불가
4. align-content: cross-axis 방향 여러 행 정렬(flex-wrap: wrap; 시 적용됨)wrap 상태에서 align-content가 미적용 된 상태에선 여러 요소들이 줄바꿈 된 횟수만큼 cross-axis가 여러 줄이 됨.우선 align-items 적용 후 의도대로 안 된 경우 align-content도 적용하여 조정해보자.
5. 이 때 align-content에서 정렬 속성 지정을 해 줄 경우 전체 flexbox 영역을 기준으로 cross-axis가 하나로 나타남!
6. 주의점:

flex item에 적용하는 속성:

1. flex-basis : flex item의 기본 크기 설정
2. flex-grow : flex-basis보다 커질수 있는지를 결정
3. flex-shrink : flex-basis보다 작아질 수 있는지를 결정
4. flex: 축약형 속성으로 위 세가지를 한번에 지정 가능함.

4. 이해가 부족한 개념

• 자식에 적용하는 flex 속성
• flex 관련 내용 전체적으로 다 부족함

5. 할 일

• 인프런 flex/grid 강의