🙏11/22 내배캠 React 17일차

🐜 오늘 할 일

• 프로젝트 진행하기

---

📆    계획표

시간	내용	결과
8:00~21:00	프로젝트 css 구성하기	☁️
21:00~23:00	깃 강의	☁️

 

---

 

👩🏼‍🌾   오늘의 줍줍 " " 🌾🌾 

 

오늘 진행사항

css layout 구현

핀터레스트의 multi column방식, 디자인을 가져와 구성

 

 

오늘의 에러사항

• css layout
  • multi column에서 각 범위를 넘어가는 contents들을 어떻게 잡아 줄 것인가 → 부모테그를 잘 사용하라
  • 버튼을 가운데로 왔으면 한다
  • 부모테그와 자식테그의 연관관계를 확실하게 파악하고, 그곳에 어떻게 contents를 입히고 효과를 줄것인지 계획해라
• css mouse hover
  • mouse hover 했을 때, oppurtunity 값을 주고, img의 버튼을 눌러서 posting 목록으로 이동하고, like버튼을 넣을 수 있게 만드는 것, 그리고 scaleup을 줄 수 있게 css style값을 주는 것도 중요하다.
  • upbotton눌렀을 때 page의 가장 높은 곳에 올라가는 것이 아닌 menu바가 적용되지 않은 순수 body값으로 이동하여 posts의 일부 게시물이 menubar에 가려진다. (사진에 어느정도 가려짐)
  • <참고 사진 1>
  
  
  • 왜 post 게시물을 mouse hover시에 상단 head창의 #header의로 hover 효과들이 덮여서 나타나는 것인가? 나는 head와 body를 분리하여 당연히 위에 올라갈 수 있게 만들어 놨는데, 왜 그걸 침범하여 끝까지 나타내는가? hover시에 그 값이 어떻게 그 위로 올라가는지 파악하고 문제를 해결해 나가야한다. ⇒ z-index: 999;를 주어 가장 최상단에 올수있게 준다.
  • <참고 사진 2>
  •  
• 상단 바 search 부문
  • serach 부문의 반응형 layout을 적용하여 scale이 작아지거나 커졌을 때 크기를 조절하여, 옆의 +post나 mypage가 밑으로 밀려나지 않도록 하는 방법을 찾아보자 ⇒ flex:1주기 nav-items는 display:flex를 주고 search부분은 flex:1을 주어 나머지 nav-items를 제외한 width값을 search가 채운다는 뜻
• 상단 메뉴바 공유
  • 상단 메뉴바를 고정적으로 파일을 만들고, 어떤 형식으로 공유하여 html파일을 연동할 수 있는가?

참고자료 1

 

참고자료 2