학습내용

미니프로젝트

• 프로젝트 기획
• 와이어 프레임 제작
• 역할 분담
• 마이페이지 제작

미니프로젝트

프로젝트 기획 및 업무 분담

🔪 사기조의 사시미 프로젝트 S.A.

노션에는 안 적었지만 사시미란 이름도 내가 지었다✌🏻 저번 미니프로젝트 때도 팀명 내가 지었었는데 수료 전까지 계속 작명 담당 하는 거 아닐지 모르겠다 ㅋㅋ

마이페이지 제작

초안이지만_거의_완성한_거나_다름_없는_CSS_리얼_실화임.jpg

3단 구조

• 헤더
  • 중앙 타이틀
  • 우측 새글작성 버튼 + 드롭다운 버튼
• 메인
  • 그리드 레이아웃
  • 디폴트값 4X4 -> 해상도 사이즈에 따라서 한 줄당 카드 갯수 자동으로 변경
  • 카드 상단 프로필 이미지 클릭시 프로필로 이동
• 푸터
  • 더보기 버튼
  • 우측 탑버튼

그리드 레이아웃
테이블과 마찬가지로 세로 열과 가로 행을 기준으로 레이아웃을 구성하지만 테이블보다 훨씬 쉽게 구현할 수 있다는 장점이 있다.

• mdn web docs
• CSS Grid 완벽 가이드
• CSS Grid Guide

제일 중점적으로 구현한 부분은 단연 그리드 레이아웃이다. 해상도 사이즈별로 카드 갯수가 달라지기 때문에 프레임워크를 사용할까도 생각했지만 튜터님이 되도록이면 제이쿼리를 쓰지 않고 자바스크립트로만 구현하라고 하셔서 직접 해보기로 했다. 물론 이건 JS가 아니라 CSS지만 마찬가지라고 생각한다(아무튼 그런 거임)

카드 갯수 변경 부분은 CSS에 자동으로 변경해주는 속성이 있지 않을까 싶어서 한참을 구글링 했는데 찾지 못했다. 그래서 그냥 @mediaquery로 각각의 사이즈마다 수동으로 변경하기로 했다. 개발자 도구로 보니까 뉴닉 홈페이지도 그렇게 했다. 처음부터 이렇게 할 걸 괜히 없는 답 찾아 헤메느라 몇 시간이나 날렸다..

별로 한 것도 없는데 하루가 이렇게 빨리 지나가다니... 강의만 들을 때는 시간이 엄청 느리게 흘러가는 것 같았는데 역시 프로젝트는 프로젝트다. 이래서 프로젝트가 좋다 ㅎㅎ 어려워도 일단은 만드는 것 자체는 재밌어서 할 맛 난다. 데이터 작업은 주말동안 파이어베이스 특강 여러번 돌려보면서 대충 흉내라도 내봐야겠다.