1.학습한 내용

1)이미지 사이즈 조절

이전에 작업했을때 고민을 했던,
화면의 너비에 따라서
가로로 넓게 표현되도록할지
세로로 넓게 표현되도록 할지를 고민하여,
멘토님에게 조언을 구하였을때

시안에 원본 이미지의 비율이 있을텐데, 그것에 맞게 작성을 하는것이 좋다는 조언을 받게 되었다.

이를통하여 680:360 의 비율을 가지고 있었으며, 이를 활용하여

완전히 똑같지는 않지만 40:21의 비율로 작성을 하게되었다.

2)스크롤 기능 추가

이전에 작성한 더보기 버튼에 의해서 숨겨진 콘텐츠가 추가가 될때, 스크롤 기능을 추가하는 것이 어떻냐는 제안을 듣게 되어서 추가를 하게 되었다.

기존의 스크립트에서 7번째와 9번째 콘텐츠에 id값을 주게되고, 해당 콘텐츠가 추가될때
window.scrollBy 를 이용하여 해당 아이디값의 가장 위에 도착하도록 작성을 하게 되었다.

이를 통하여 버튼을 처음 눌렀을때는 7,8번째의 콘텐츠가 나타나며 7번째 콘텐츠 위로 화면이 스크롤 되며,

두번째로 눌렀을때는 9,10번째의 콘텐츠가 나타나며 9번째 콘텐츠 위로 화면이 이동을 한다.

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

이미지를 비율로 설정을 하게되자. 개발자도구를 통하여 화면을 볼때는 화면의 너비에 따라서 한계가 없이 늘어나거나 줄어드는 문제점을 발견하게 되었다.

3.해결방법

해당 부분은 개발자도구가 아닌 일반 화면으로 보았을때는 문제가 없었지만, 실제로 매우 작은 폭을 가진 기기와, 매우 넓은 폭을 가진 모니터들이 실존하기때문에, 일정 수치 이하일때와 일정수치 이상일때는 너비에 따른 반응형 수치를 주는것이 아닌, 정해진 값을 입력하는 것으로 해결을 하게되었다.

4.학습소감

점점 페이지가 완성이 되어가는 느낌이 있다.
이에 대한 만족감을 느끼면서도, 내가 보지 못한 부분의 경우 팀원들에게 조언을 구해가면서 고쳐나가는 과정이 필요하다.

또한, 앞으로 다른 팀원들의 페이지와 취합을 하면서, 참고할 사항과 배울 점들을 확인하는 시간을 가지는 것이 필요하다고 생각한다.