[멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 09 ~ 10[3주차]

❤️Liked 느낀 점

어제는 지난 주 과제였던 WOOD 페이지 만들기에 대해 다른 수강생분들이 만드신 결과물들을 하나하나 살펴보았고,
강사님께서 한 분 한 분 간단하게 과제 리뷰를 해주셨는데 제 차례가 다가올 수록 엄청 긴장이 되었습니다..
하필이면 다른 수강생분들의 결과물을 보면서 뒤늦게서야 틀린 부분을 찾게 되어서 아쉬움이 많이 남았지만
강사님께서 제 결과물을 보시면서 배경 쪽이 아쉽지만 피그마 결과물에 맞게 header?와 main 부분에 양 사이드 부분이
서로 맞아떨어지게 한 점을 칭찬해주셨고, 간단하게 코드를 쭉 보시면서 이 분은 개발 경험이 어느 정도 있으신 분이라고 말씀하셔서 기분이 좋은 하루였습니다!
 
오늘은 강사님께서 어제 강의 마무리하시면서 중요하다고 말씀하셨던
Flex 속성에 대한 거의 모든 것을 배웠지만
강의에서 알려주신 모든 내용을 머릿 속에 집어넣기는 어려웠고
이론 시간이 길어지다보니 중간 중간 졸음이 쏟아져 집중이 어려웠던 하루였습니다..😔
 

✏️Learned 공부한 내용

Flex 개념은 중요해서 추후에 다른 카테고리에서 자세히 다루겠습니다

Flexbox

ParentElement와 Child Element간의 관계를 기반으로 Layout을 잡게 해주는 속성입니다.

Flexbox 가용공간

• 여러 'Flex Items'가 하나의 'Flex Container'가 제공하는 가용 공간을 공유합니다.
• 가용 공간을 가로, 세로 모두 적용할 수 있습니다.

가용 공간을 해당 요소 크기로 활용

• flex-grow 속성을 사용하여 Flex Item이 가용 공간을 활용할 수 있습니다.
• Flex Item의 최종 크기는 두 가지 요소에 의해 결정됩니다:
  • flex-basis 속성으로 기본 크기를 설정합니다.
  • flex-grow 속성으로 가용 공간 분배 비율을 지정합니다.

Flexbox 오버플로우 해결: 줄바꿈과 축 기반 정렬

• 줄바꿈 처리:
  • Flex Container에 flex-wrap: wrap 속성을 적용하면 Flex Items를 여러 줄로 나누어 배치할 수 있습니다.
  • 이를 통해 각 줄마다 새로운 가용 공간이 생깁니다.
• 정렬하기:
  • Flex Container는 주 축(Main Axis)과 교차축(Cross Axis)을 가집니다.
  • flex-direction 속성으로 주 축의 방향을 변경할 수 있습니다.
  • justify-content 속성: 주 축 기준 정렬
  • align-items 속성: 교차축 기준 정렬
• 이러한 속성들을 활용하여 Flex Items의 가로, 세로 정렬을 효과적으로 제어할 수 있습니다.

Flex Item 요소의 최종 크기 계산

flex-basis

• Flex Items의 기준 크기를 설정합니다.
• 초기값은 auto로, 내부 콘텐츠 크기만큼을 의미합니다.
• flex-grow와 flex-shrink 속성의 기준이 됩니다.

flex-grow

• Flex Items에게 가용 공간을 비율로 할당합니다.
• flex-basis 값을 기준으로 크기가 증가합니다.
• 초기값은 0입니다.

flex-shrink

• Flex Items의 수축 비율을 결정합니다.
• 초기값은 1로, 모든 항목이 동일하게 수축합니다.
• 0으로 설정하면 항목이 수축하지 않습니다.

min-width

• Flex Items의 최소 너비를 설정합니다.
• 초기값 auto는 내부 콘텐츠 크기만큼으로 계산됩니다.
• 0으로 설정하면 내부 콘텐츠 크기보다 작아질 수 있습니다.

😔Lacked 부족한 점

지난 주 과제를 하면서 최종적으로 검토를 여러 번 해봤어야 했는데
빨리 제출하고 주말동안 푹 쉬어야겠다는 마음에 검토를 제대로 하지 못하고 제출한 점이 아쉽습니다.
 
그리고 요근래 잠이 부족했는지 수업을 들으면서 중간 중간 졸음이 쏟아져
수업 내용을 제대로 듣지 못한 부분이 많았고, 강사님께 질문을 하려고해도 무슨 질문을 해야할 지 막연하게 안 떠올라서
난감했습니다..
 
또한, Flex 속성 이해를 위해 자습시간을 활용해 Flex에 대해 잘 설명된 페이지가 있길래 그 페이지를 보면서 거기에 나와있는 그림들을 직접 따라 그려봤는데, 이 과정에 예상 외로 시간이 많이 소요되어 계획했던 자습을 충분히 하지 못했습니다.

🙏🏻Longed For 앞으로 바라는 점

• 과제 제출 전 여러 번 검토해보기
• 충분한 수면을 취할 것
• 개념 정리 시 그림은 직접 그리는 것도 좋지만 그렇게 하면 시간을 많이 잡아먹으니 출처를 남기고 외부에서 그림을 가져올 것