수업
flex
flex-basis
가로나 세로의 개념이 아니라, flex에서 내가 차지해야하는 공간을 의미한다.
flex-grow
전체의 어느정도를 차지할지.
.item {
flex-grow: 1;
}
.item:nth-child(2) {
flex-grow: 5;
}
<div class="container-color container1">
<div class="item-color item">1</div>
<div class="item-color item">5</div>
<div class="item-color item">1</div>
<div class="item-color item">1</div>
</div>
두번째 item은 8분의 5를 차지한다.
(물론 텍스트 등의 이유로 정확하게 5/8을 차지하지는 않는다.)
flex-shrink
기본값은 flex-shrink:1
flex-shrink:0는 양보할 생각이 없는 것이다. 안 바뀌고 버틴다.
더 큰 숫자가 더 많이 양보한다.
.item:nth-child(1) {
flex-basis: 500px;
flex-shrink: 2;
}
.item:nth-child(2) {
flex-basis: 500px;
flex-shrink: 1;
}이럴 때는 nth-child(1)이 nth-child(2)의 2배로 양보한다.
flex-wrap: wrap이 있을 경우에는 shrink는 적용되지 않는다
링크: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
flex: auto
grow, shrink,basis를 전부 auto로 준다는 뜻이다.
그럼 제일 큰 높이에 따라 자동으로 높이가 맞춰진다.
생각
잘 하고 있는건가..! 분명 flex 이제 좀 익숙해졌다고 생각했는데, 오늘 다시 정리 수업을 들으니 헷갈리기 시작했다.. 이게 맞나!
공부를 좀더 해야겠다. 물론 실전, 실습 위주의 복습은 빠르게 이해하는 것도 중요하지만, 기본 개념을 확실하게 잡고 가는 것이 정말 중요할 듯 하다.
내가 왜 이런 코드를 썼는지, 설명할 수 있도록!
지난 2주간, css스터디를 하면서, 미리 공부하고 수업을 들으면 얼마나 이해가 쉬운지 깨달아서 이번에는 바닐라 JS 챌린지를 듣기로 했다. 오늘이 1일차였는데, 무조건 과제만 있는 것도 아니고, 처음에는 퀴즈로 편하게 접할 수 있어서 좋았다.
느낀점
잘한점
이번에 회고그룹원들과 스터디를 하나 하기로 했다! "찐게터디". 기존에 있는 게으른 스터디는 사실 게으른척하는 부지런한 스터디니까, 우리는 진짜로 부담없이 게으른 스터디를 해보자 해서 시작하게 되었다. 각자 스터디를 하나만 하는게 아니다보니, 조금 러프하게 진행하기 좋을 것 같다. 다들 회고에서 그치지 않고, 실제로 스터디를 함께하며 성장하려고 하는 모습이 너무 좋다!
고칠점
잘 자는 것이 중요할 것 같다. 욕심이 생겨서 하나씩 하다보면, 엄청 빠르게 시간이 가버린다.
금방 새벽이 되어버리는데, 다음날 수업 전에 예습하려면 또 일찍 일어나야해서 수면시간이 많이 줄어들었다. 좀더 장기적으로 학습하기 위해서는 적절한 쉼도 꼭 필요한 것 같다.
계획
- 건강 챙기기(비타민 챙겨먹기, 건강하게 먹기, 운동하기, 잠 잘 자기)
- flex 손 코딩하면서 복습하기.(개념도 놓치지 말고 잘 잡고 가기- 설명할 수 있을 정도로)
