📕 [ TIL ] : 10일차_2022.04.29.(금)- 세번째 프로젝트 완성

20220429 (FRI)_TODAY TIL

TODAY PROJECT

• HTML, CSS 사용해 인스타그램 UI클론 (개인프로젝트)

✏️ REMIND : TO LEARN

• 1) 아이콘 수정, 카드 레이아웃 수정, 더보기기능(접기,펴기) 추가
• 2) Comment(댓글부분) 레이아웃 수정, 캐러셀추가(613, 766, 샘플 이미지 추가
• 3) 카드 여러개 추가, 모달 추가

✏️ REMIND : 깃허브 커밋메세지 잘 작성해보기

• 수정사항은 Mod(modify)로, 추가사항은 Add로 룰을 정하여 어떤 내용이 수정되었는지, 추가되었는지 작성하였다.
  

✏️ REMIND : 2일차, 무엇을 구현했나요?

• 메인화면

---

• 메인화면에서 카드 스크롤이 가능하게 하였고 카드 내부 캐러셀 을 적용하였다.

---

• 더보기 기능을 추가하였다.
  

---

• 모달기능을 추가하였다.
  

---

• 세부 페이지
• 인스타그램 내 세부 페이지를 구현해보았다.

---

• 미디어쿼리 기능을 이용하여 게시물 팔로워, 팔로우가 600픽셀 이하에서 보이지 않게 해 두었다.

🎦 시연영상

아래 이미지 클릭시 시연영상으로 이동합니다 😁

📁 코드

오늘 작업한 자세한 코드는 나의_깃허브 에 게시되어 있습니다 💩

✂️ 사용한 소스

바다 이미지
풀 이미지
바다 이미지
인스타그램이미지
프로필 강아지 이미지
미어캣 이미지

🌾 추후 추가 및 수정할 것

• 사이드바와 카드 두 개의 물체가 붙어있게 하기
• 페이지별 디테일 작업 (여백, 글씨, 상단 아이콘바에 프로필 추가, 게시물, 저장됨, 태그됨 리스트 버튼 기능, 댓글쓰기에 인풋박스 추가 등)
• 상세페이지 모달기능
• 파비콘 추가

🌱 느낀점

html, css, javascript 에 관한 기초공부를 더 많이 해야겠다. 지금까지는 빠른 제작과 적용에 초점을 두었어서 기본 틀을 먼저 정해둔 뒤 구현할 기능을 모두 구글링을 통해 찾아두고, 추후 필요한 기능이 생기면 추가 구글링을 하는 방식으로 짧은시간에 구글링을 통해 배운 내용을 페이지에 적용시키는 것에 힘써왔다. 그래서 지금까지는 동작이 어떻게 이 코드에서 되고 어떻게 응용가능한지를 알아보았다면 지금부터는 조금 더 기초적인 내용과 지식 탐구를 중점적으로 해볼 예정이다. 그리고 코딩을 할때 항상 느끼는 것은 기능이 하나씩 구현될때마다 신기하다는 것이다...!

오늘 작업한 자세한 코드는 나의_깃허브 에 게시되어 있습니다 💩