- 일시 : 23.06.16 금요일 ~ 06.18 일요일
🌱과제 리뷰
저번 css수업의 과제로 내 프로필을 제작하였는데 알고보니 그때 과제는 선택과제였고 이번 과제가 필수과제였다. 정보 전달 오류로 이번주 일요일까지는 이전에 html으로 뼈대를 만들었던 '세이프홈즈' 홈페이지의 반응형 구현 과제로 주어졌다.
사실 혼자서 프로젝트를 만들 때 '반응형 페이지로 멋있게 만들어봐야겠다'라고 생각은 하지만 나중에 귀찮아져서 구현하지 않았다. 하지만 이번 과제를 통해 제대로 작동하는 반응형 페이지를 만드는 경험을 하였다.
만들면서 실수한 부분은 처음에 html으로 뼈대만 세울 때 최대한 가독성이 좋게 하기 위해서 페이지 위쪽에 사진이 첨부된 부분을 table 태그를 이용해 작성 하였었는데. 스타일을 적용시키기가 수월하지 않아서 모두 div태그 안에 넣는 이중 작업을 했다.
또한 1920사이즈만 보고 평소에 익숙하게 사용했던 flex를 이용했는데, 이후 작은 사이즈를 보니 grid를 이용해야 한다는 사실을 알았다. 그래서 또 다시 뒤엎었다..하하
다시 공부해야 할 부분은, 스타일을 적용할 때 css선택자를 너무 정신없이 사용한 것 같아서 어떻게 해야 더 클린하게 만들 수 있을지 더 고민해봐야겠다.
또한 화면에는 반응형은 내가 구현한 대로 잘 보이는데, 개발자도구의 Toggle device tool로 보았을때 오른쪽에 큰 여백이 나오는데 아직 이 오류를 고치지 못했다. (추후 디버깅 예정)
이번 과제는 어렵진 않았지만 시간이 정말 오래걸리는 작업이었다. 내가 오랜 시간을 css에만 투자했던 적이 거의 없기 때문에 익숙하지 않아 더 느렸을 수도 있다. 그래도 이번 장시간(?) 과제로 css와 많이 친해졌다.
🌱과제 내용
구현 페이지
반응형 페이지 화면
- 1920px
- 1024px (오른쪽 여백 오류)
반응형 페이지 시연
디버깅 이후 추가예정
깃허브 주소
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
