개인 프로젝트 02 : 인스타 UI 클론 코딩 - 1일차

 

인스타 UI 클론 코딩 프로젝트 1일차

 

- 기간 : 22-04-28 ~ 22-05-02 오후 1시까지 제출

 

 

- 내용 : 인스타그램 홈페이지를보고 알맞은 태그와 속성들을 활용하여 클론 페이지를 만들어보자

 

 

- 프로젝트 시작

우선 프로젝트 가이드라인 자료를 보고 전체적인 레이아웃부터 잡는 작업을 했다.

 

tryeraser 사용

이전 프로젝트부터 튜터님들과 매니저님들이 기획작업의 중요성을 여러번 언급하셨기에 나름 최선을 다해서 레이아웃을 구성해보았다. 그리고 작업 순서는 크게

 

1. 기본 페이지 베이스 구성 코딩

2. 반응형 웹 적용하고 테스트

3. 모달, 캐러샐, 페이지 전환 등 주요 기능 구현

4. 데이터베이스 작업 (좋아요와 댓글 입력, 기록, 삭제)

5. 이모티콘 배치, 크기조절 등 디자인 마무리

 

 

오늘은 베이스를 구성하고 반응형웹을 적용하는 작업까지 완료하였다. 

 

오늘까지 작업 결과이다. 

 

오늘은 반응형웹을 만드느라 시간을 대부분 소비했다.. css 미디어 쿼리를 처음사용해봤고 쉬워보였으나 정말 내맘같이 안됐던것같다..

@media screen and (min-width: 900px) {