1.학습한 내용

1)정보마당 작성

공통 부분의 작성이 마무리 되어서
각자 담당한 파트를 작업하게되었다.

기존에 6개의 이미지를 배치했던것에서

더보기 버튼을 통하여 추가로 4개의 이미지가 나타나도록 했으며,

마우스를 가까이 댔을 때, 이미지의 크기가 확대가 되며, 흐려지도록 설정하였다.

2.학습내용 중 어려웠던 점

더보기를 작동을 시켰을때, 이미지의 로딩이 오래 걸리게되었다.

3.해결방법

이는 column으로 배치를 하여서 나타나는 이미지의 갯수가 늘어나면서 배치가 당겨지면서 나타난 오류로,
배치를 flex-wrap 으로 변경한 후 이미지가 순서대로 나타나는것으로 해결이 되었다.

4.학습소감

이전에 resoft 원페이지를 작업하면서 다른 팀원들이 사용한 기술들을 참고하여서 공부를 하는것으로, 내가 담당하지 못했던 부분에 대한 공부가 되어서 좋았다.
또한 이전에는 수업시간에 배웠던 column 으로만 표현했을때는 원하는 방식으로 표현되지 않았던것을 display:flex, flex-wrap:wrap; 을 적용하는것으로 해결되는것에서, 단순히 한 화면에서 보이는것만이 아닌, 다양한 너비,상황에서도 원하는 상태로 보이게 하는것이 중요하다는것을 이해할수있었다.