9/29 TIL | 뉴스레터 클론하기!

오늘은 반응형 레이아웃인 마카오 레터를 마크업 & 스타일링하였다! 항상 앞서 나가는 쥬쥬님의 어제자 TIL을 보고 이번 과제는 모바일 퍼스트로 작업을 진행해야 한다는 점을 캐치할 수 있었고, 그리하여 모바일 버전부터 작업하였다!

모바일 화면

괜히 멘트도 적어보고..!ㅋㅋㅋ 나의 3년 뒤의 모습이랄까.... (희망사항 ㅎㅎ) 무튼! 모바일 화면이 데스크탑 화면보다 덜 복잡하기 때문에 레이아웃 잡기가 훨씬 쉬웠고, 그렇게 완성을 하고 나서는 바로 태블릿 화면으로 넘어갔다.

태블릿 화면 (세로, 가로)

태블릿 화면도 세로 모드와 가로 모드를 맞춰서 작업하였고, 폰트나 비율들을 em 단위로 작업했기 때문에 크게 손 봐줘야 할 부분은 없었다. 태블릿 화면에서는 그리드로 세로는 2 columns, 3 columns로 작업하였고,

데스크탑 화면

데스크탑에서는 4 columns 그리드 레이아웃으로 작업하였다. 추가로 데스크탑에서는 헤더에 검색 버튼과 유저 버튼도 등장한다. 작업을 하면서 느꼈던 점은 확실히 데스크탑에서 모바일로 가는 거보다 모바일에서 데스크탑으로 작업 방향을 설정하는 것이 더 좋다는 점이었다. 처음부터 이 레이아웃을 만드려고 했다면 절대 일과 시간 안에 완성을 못했을 거 같은 느낌..? 오히려 작은 거에서 큰 거로 이동하는 방식이 확실히 효과가 있었다! (이것이 바로 애자일로 가는 길..?!ㅋㅋ)

이번 주간에는 동기들에게 내가 아는 지식들을 공유할 수 있어 참 즐거운 주간이다 싶다.. 평생 남 가르치는 거 좋아할 거 같은 훈수충 1인..^^ㅋㅋㅋㅋㅋ 넝담이고.... 더 열심히 공부해서 더 많은 지식들을 공유할 수 있는 사람이 되어야겠다는 생각을 했다! 이제 이번 주 과제는 개발자 프로필 사이트 과제만 남았다..! 내일 하루 열심히 작업해보자.

오늘 & 내일 Action Plan
1. 오늘 자기 전에 HTML 독후감 작성하기
2. 내일 개발자 프로필 사이트 완성하기
3. 금요일 주간회고, TIL 올리기