#007. 위니브의 연예인 소울곰님을 만나다!

출처: 핀터레스트

😎 오늘의 잘한점

상황1.

회고조 조장이 결정됐던 어제! 감사하게도 조장이 되었다😀

회고조원들과 활발한 커뮤니케이션을 하고 싶었는데 조원 중 한 분이 아침에 모닝 스터디를 해보는 건 어떻냐고 제안해주셨다.

평상시에 수업 시작 전에 딱 맞춰 준비했던 '나'였기에 일찍 일어나 여유롭게 하루를 시작해보고 싶어서 조원들과 같이 도전해보기로!👊

상황2.

수업 시간에 CSS 변수/함수 실습을 하던 중 강사님께 칭찬받았다🫠

액션1.

7:30 - 8:50까지 미라클 모닝 스터디 시간을 보내면서 어제 수업 내용을 복습했다.

액션2.

calc() 함수를 배운 뒤 grid로 구현했던 레이아웃을 flex로 구현하면서, min() 함수에서는 calc() 함수를 쓰지 않고 계산식만 작성하여도 적용된다는 것을 알았다.

칭찬

복습이 금방 끝날 것 같아서 원래는 다른 걸 주로 하려고 했는데 어제 내용을 다시 보니 몰랐던 게 보였다.

역시 복습은 많이 해도 손해볼 것이 없는 것 같다!

이미 복습했다고 그냥 넘기지 않고 다시 시도해서 다행이라고 생각한다.

아침에 일어나기 힘들었을텐데 새로운 습관을 들이려고 노력하는 모습 최고다!!👏

또 수업 시간에 실습 내용을 공유 드렸을 때 새로운 사실을 알게 됐다면서 탐구력이 좋다고 칭찬을 해주셨다!

여러가지를 시도해보다가 적용이 되길래 맞게 적용되는건가 확인차 말했던 건데 생각치도 못한 칭찬을 받아 기분이 좋았다..🤭

추후에 찾아보니 MDN에 해당 내용이 들어있어서 역시 MDN은 최고라고 생각했다.

---

✔️ 오늘의 해결 문제

문제

float를 사용하여 반응형 grid 레이아웃을 구현했을 때 레이아웃이 틀어졌다.

원인

모든 float 요소에 margin-left를 주어 grid의 gap을 구현했었다. 하지만 반응형에 따라 생성되는 라인의 첫 번째 요소마다 margin-left 를 제거해야 레이아웃이 틀어지지 않는다.

해결 방법

첫 번째로 오게되는 아이템을 선택해야 하므로 :nth-child()를 사용했다.

브라우저 창이 줄어듦에 따라 요소가 나열된 라인 수가 달라지기 때문에 라인의 첫 번째 요소가 매번 바뀐다.

따라서 미디어 쿼리를 사용하고 그 안에서 첫 번째 요소를 사용하여 margin-left를 제거했다.

---

💡 오늘의 배운점

어떠한 툴을 다루고 싶다는 생각이 든다면 바로 그 툴을 다운로드하여 실행하세요.
당장 뭐가 뭔지 모르겠어도 아무거나 눌러보세요!
여러분들은 벌써 시작하신 겁니다!!

배움

• flex & grid 복습
• flex, float로 grid 레이아웃 구현하기
• CSS 변수/함수
• 피그마 특강
  • 피그마 사용 방법
  • 단축키

 

🪄 마무리

어제와 오늘 두 번의 복습에도 flex는 계속 헷갈렸다🥹 grid 레이아웃을 구현할 때 머리가 어질어질했다ㅋㅋㅋ!!

그래도 확실히 한두번 해보니까 어느정도 이해가 되긴 했다. 물론 더 많은 연습을 해야할 것 같지만..

float로 구현할 때는 의도한 대로 잘 동작해서 뿌듯했다.

그리고 대망의 피그마 특강!! 위니브 CDO(Chief Design Officer)이신 소울곰님을 만나게 되었다🐻

긴장된다고 하셨지만 말씀을 너무 재밌게 해주셔서 계속 웃으면서 들을 수 있었다!

피그마의 기본적인건 어느정도 알고 있어서 어렵지 않게 들었고, 강사님들과 멘토님들과 함께 즐기며 수업이 진행되어서 재밌었다👍

강사님께서 말버릇처럼 하셨던 여러분들과 본격적으로가 거의 유행어가 되었는데

빠르게 디스코드에 이모지를 만들어 추가했고, 마무리까지 재밌었던 하루였다.😀