1.학습한 내용

1)정보마당 작업

이전에 작업한 페이지에서 추가로 작업을 하게되었다.

기본적으로 폰트를 설정하지 않았던 것을
Noto Sans KR 폰트를 적용하게되었다.

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap" rel="stylesheet">

헤더 부분와 푸터부분이 박스가 이상하게 나타나는 부분을 수정하게되었다.

이미지 구간의 높이를 지정하고, 이미지간의 간격들을 수정하였다.
이전에는 모든 이미지들에 각자 좌우 상하 마진을 넣었지만,
이번에는 홀수번째의 이미지에 margin-right를 주게되었다.

또한 글자의 높이를 text-height 로 설정했던것을 지우고
padding-bottom : 1~3rem 을 주는것으로 수정을 하게되었다.

더보기를 눌렀을때 이미지가 추가로 출력된 후,
이 이상 추가가 될 이미지가 없을때 더보기 버튼이 사라지는 기능을 구현하였다.

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

반응형을 대비하여 크기를 입력할때 px단위가 아닌 %, rem 단위를 사용하고자 하였을때, 적절한 수치를 찾는것이 어려웠다.

3.해결방법

이 부분에 대해서는 팀원들의 객관적인 의견을 물어보며 입력하는것으로 최대한 어색하지 않은 수치를 입력하게되었다.

4.학습소감

작업을 하면서, 처음부터 class , id 에 대해서 자세하게 지정하고 폰트의 크기들을 지정하는것이 필요하다는것을 확실하게 체감하게되었다.
이전에는 대략적인 부분만 가이드라인을 작성하면 되겠다고 생각했지만, 이 이후에는 최대한 가능한만큼 자세한 가이드라인을 작성해야할것이다.