📖 오늘의 수업

• grid를 복습함.
• grid로 holy grail layout을 만들어 봄.
• codepen grid 예제를 클론해 봄.
• 로그인 모달창(과제)의 코드를 리뷰하고 수정해 봄.

💭 오늘의 생각

1. 어제 flex로 만든 레이아웃을 grid로 다시 만들어봤는데, column과 row를 그리드 번호로 딱 지정하고 영역을 템플릿으로 한 번에 설정하는 이런것들이 고정된 레이아웃을 만들 때 더 편한 것 같다.

2. code pen에 있는 예제를 클론했는데 grid로 아이템들을 배치하고 각 아이템을 hover했을 때 translate로 아이템을 이동시켜서 위로 떠오르게 만드는 것이다. 여기서 가상요소 선택자 after를 사용해서 그림자처럼 보이게 요소를 추가로 만들었다.이 상태에서 hover를 하면 item과 after로 만든 그림자 요소가 같이 움직이게 된다.
   이걸 해결하기 위해서 item:hover::after를 이용해서 hover시 아이템이 떠오른(이동한) 거리 + 그림자가 가지고 있던 포지션의 거리를 고려하면 됐다. 즉, hover시 아이템이 top,left로 15px씩 이동했고 after로 만든 그림자는 top,left 10px,10px의 포지션을 가지고 있었으니까 top: 25px, left: 25px을 준다.
   이렇게 하면 아이템을 hover 했을 때, 설정한 값 만큼 떠오르고 after로 만든 그림자는 제자리에 있는 걸로 보인다!!ㅎㅎ css는 속성도 많고 활용할 수 있는 방향도 가지각색이라서 이런 문제를 해결하는 방법도 다양한 것 같아서 재밌다. 그렇기 때문에 정말 속성을 제대로 알고있어야 하는 것 같다.

3. img를 다룰 때 기본 상태에서는 약간의 여백이 있어서 항상 display: block;으로 만들고 스타일링을 한다. 모달창 과제에 대해 강사님과 함께 코드를 리뷰해보는 시간에, 어떤 분께서 display 값을 바꾸지 않고 vertical-align으로 제어하면 되지 않느냐고 하셨다. 처음엔 무슨 소리인지 이해가 안 갔는데 이해하고 나니 완전 띠용이었다!
   그러니까, img는 inline 요소라서 vertical-align 기본값 baseline이 있는거라서 여백이 보이는거였다. 따라서 그 부분을 vertical-align: top으로 수정해주면 여백을 제어할 수 있다! 정말 미래님들... 최고다... 리뷰 시간은 정말 강사님+미래님들에게 배울 수 있는 부분이 많고 다른 사람들은 어떻게 짰는지 보면서 내 코드의 수정 방향을 잡아갈 수 있어서 좋다.