📕 [ TIL ] : 9일차_2022.04.28.(목) - 세 번째 프로젝트 시작

20220428(THU)_TODAY TIL

TODAY PROJECT

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

✏️ REMIND : TO LEARN

• 1) 미디어쿼리 및 색 작업
• 2) 고정된 내비게이션바(로고, 검색창, 아이콘) 추가
• 3) 사이드바 제작 및 메세지 모양 아이콘 (+)모양으로 변경 -> 여백 수정
• 4) 사이트 이름 수정, 메인화면 카드제작, 미디어쿼리 작동하게 수정(반응형),
  기타 여백 및 아이콘위치 수정

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

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

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

• 메인화면
  

• 검색창 디테일작업
  

검색창 클릭시 인스타그램과 비슷한 색상의 커서 깜박임이 생기게 하였고, 내부 여백이나 돋보기모양 아이콘 위치를 비슷하게 잘 잡아주었다.

미디어쿼리 적용

창 크기에 따라서 화면에 보이는 내용을 다르게 구성하였다. (실제인스타그램도 이와 동일하다)

1000px이하면 사이드바, 메뉴바의 검색창 안보이게 설정

추가적으로 생겼던 문제는 fixed 사용시 메뉴바가 상단에 고정만되어있고 카드가 그 위로 올라오는 현상이 발생했는데 이는 메뉴바의 코드를가장 아래쪽에 위치하게 함으로써 해결되었다.

사용한 소스

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

🌾 추후 추가 및 수정할 것

• 사이드바와 카드 두 개의 물체가 붙어있게
• 상세페이지작업
• 메인페이지 디테일작업 (글 더보기, 사진 슬라이드 기능)
• 기타 여백 수정
• 파비콘 추가
• 게시글 배치 후 게시글 간 여백 설정

🌱 느낀점

html, css, javascript 를 자유자재로 다루고 싶다. 이번 프로젝트를 통해 반응형 웹을 만들면서 디테일한 부분까지 구현해보고 프론트앤드를 신속하고 정확하게 만들 수 있는 능력을 확실히 길러야겠다고 생각했다. 코딩은 할수록 는다는 말을 튜터님께서 자주 해주시는데 이를 체감하고 있는 중이다. 어떤 키워드를 검색할지, 검색기능은 어떤 것을 사용해야 원하는 정보를 빨리 찾을 수 있을지 프로젝트를 통해 배워가는 중이다. 검색을 통해 배운 기능을 이용하여 인스타그램 클론 페이지의 작은 기능을 하나씩 구현해보는 과정이 재밌다. 깃허브에서 커밋메세지 작성하는 방법을 특강을 통해 배웠기에 이를 적용시켜보는 과정또한 유익했다.

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