1.학습한 내용

1)이미지 배열 수정

이전에는 이미지에
justify-content : center 를 준 상태로.
각 img-wrap 에 margin 과 padding 을 주는것으로 배열을 조정하였다.

하지만 이러한 방법을 하면서 img-wrap 사이의 간격은 조절이 되지만 img 사이의 간격이 조절되지 않아서.
마우스 오버를 하였을때 이미지가 튀어나가는 현상이 발생하였다.

해당 부분에 margin 과 padding 들을 빼고, gap을 입력하는것으로 해결하게되었다.

.news-box-wrapper #news-box{
    display:flex;
    flex-wrap:wrap;    
    justify-content: center;
    gap: 5%;
}

2)버튼 크기 수정

더보기와 접기 기능이 추가되어있는 버튼의 사이즈를 조절하게되었다.

이전에는 보기에는 크게 문제가 되지 않았지만, 모바일버전의 반응형을 작동하였을때, 크기가 작아지는 것으로 인해서 버튼을 클릭하는 것이 어려움이 발생한다는 것을 알게되었다.

 .button-wrap{
    width: 15%;
    height:73px;
}  

해당 버튼 부분에 미디어쿼리들을 없앤 뒤 width는 %값을, 높이는 고정을 하는것으로 해결하게 되었다.

3)푸터 수정

푸터가 모바일 반응형 크기에 들어갈때, 윗부분의 공간이 너무 좁다는 의견이 들어오게 되어서 수정을 진행하게 되었다.
이 과정에서 글씨의 크기에도 추가적으로 수정을 진행하게 되었다.

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

이전에 작업한 페이지들을 정리를 하면서 화면상으로 보았을때는 문제가 없이 작동을 하였지만, 반응형에 따라서 화면을 줄이거나 늘렸을때 발생하는 문제들을 해당 부분만을 찾아서 수정하는것에 어려움을 겪게되었다.

3.해결방법

이러한 부분들은 팀원들의 도움을 많이 받게 되었으며, 자잘하게는 bootstrap 프레임워크를 적용한것에 의해서 숨어져있던 css에 의해서 발생한 오류에서, 이전에는 억지로 margin 과 padding을 입력하는것으로 발생한 배열들이 보기에 안좋아서 gap을 사용하는 등의 차이를 두는것으로 해결하게 되었다.

4.학습소감

이제 이번 프로젝트의 1차 마감이 다가온다.
해당 마감의 기한을 맞추기 위하여 팀원들과 이야기를 하고있으며, 이후에 네비바와 푸터를 공통적으로 적용한 뒤,
회사에서 요구한 사항이 적힌 시안에 있는 기능들이 작동이 제대로 되는지를 확인하여 정리를 할 것이며, 또한 시안에는 없지만 팀원들이 추가적으로 구현한 부분에 대해서도 정리를 하여 제출을 하기로 하였다.

이러한 지금까지의 프로젝트를 진행하면서 느낀점은, 처음부터 기준들을 제대로 잡아놓고 진행을 하지 않으면, 나중에 수정을 할때 더 혼란이 생길수 있다는것을 뼈저리게 느낄수있었다.

이러한 부분에 대해서 개선해나가야 할것이다.