목적 :프론트엔드의 레이아웃을 보고 알맞은 태그와 속성을 이용해 배치를 할 수 있게 되는것
필수 포함 내용
- GIT
특강(4월 27일) 내용을 바탕으로 깃 관리 시작 !
주요 기능들이 추가/변경 될때마다 add, commit, push 를 통해 형상 관리
적절한 커밋메시지를 사용 !
- 사이트의 헤더
-UI를 따라 만드는 것이기 때문에 버튼과 검색은 동작 하지 않아도 됨
-왼쪽 상단의 로고 인스타그램 로고가 아니여도 무관함
검색어를 입력할 수 있는 검색창
오른쪽 상단의 아이콘들
- 사이트의 본문
스토리 부분은 구현하지 않아도 됨
두개의 단으로 구성
왼쪽 단에는 게시글, 오른쪽 단에는 프로필사진/이름/설명과 Follow 버튼이 있는 네임카드 리스트
게시글 : 최소 세개의 게시글이 표시
상단에 네임카드가 배치,
옵션 : ... 버튼을 오른쪽에 배치하고 클릭시 모달이 등장
본문에는 사진이 한장또는 여러장을 carousel을 이용해 표시
좋아요/댓글/메시지송신 아이콘이 사진 아래 배치
아이콘들 아래에 사진에 대한 설명이 추가
옵션 : 글자수가 일정수준 이상이 되면 더보기 버튼을 추가하고 길이를 줄일 수 있습니다.
설명 아래에 댓글 리스트가 표시됩니다.
댓글 작성하는 칸과 Post 버튼이 추가되야 합니다.
- 사이트의 Footer
실제 인스타그램은 무한로딩을 이용하여 하단에 Footer 대신 오른쪽 단에 존재합니다.
오른쪽 단 or 사이트 하단에 Footer를 만들어서 본인의 이름을 기입해주세요!
반응형
'PROJECTS' 카테고리의 다른 글
| 혼자서도 할 수 있다! | 인스타그램 홈페이지 만들어보자 ❤️🔥 | 바닐라코드로 웹페이지 만들기 | 데스크탑 UI 클론코딩 (0) | 2022.04.29 |
|---|---|
| 바닐라코드로 인스타 UI클론 해보장 🤍 Html 만들기 | 괜히 뼈대라고 부르는게 아니더라 (0) | 2022.04.29 |
| 파이썬 게임 | 코드정리 | 프로젝트 4/25-4/28(56시간) | ⭐️제출은 끝났지만, 진행듕⭐️ (2) | 2022.04.28 |
| 미완성 | 지금까지의 결과와 시행착오👾 | 파이썬게임 | 프로젝트 (0) | 2022.04.27 |
| 프로젝트 기획 | 파이썬 게임 | 28시간 안에 잠도 자고 밥도 먹고 가능하겠죠..🫠 (3) | 2022.04.25 |