본문 바로가기
카테고리 없음

TIL 64일차(2023-08-11) Detail 페이지 완성 및 작업 오류 해

by seungbeom35 2023. 8. 13.

규칙

1. 억지로 쓰지 않기. 

 - 진짜 배운 게 있는 날만 쓰기!

2. 양 신경쓰지 않고 기록하기. 

 - 양이 적다고 글을 포기하지 말고 조금이라도, 그게 한두줄이더라도 배운 게 있다면 기록하기!

3. 꼭 내 것으로 만든 후 작성하기. 

 - 스스로 생각을 좀 정리해본 후 TIL 글 적기!

 - 남이 쓴 글 복붙 X , 내가 배우고 느낀 점 위주로. (일단은 그렇게 해보자)

밑의 내용들은 내가 수업중에 메모해가며 적은것들이고 이를 통해 다시한번 공부가 되어 올렸으며 적으면서 복습이 되기 때문에 그날 공부한 것들은 안 외우더라도 매번 적을 예정입니다.


<오늘 공부 한 것들>

1. Detail 페이지 완성 

2. 커스텀 모달 창 완

3. 모션 기능 추가

4. game Clear && game over 기능 추가


[Trouble Shooting]

[문제점]

Header를 스크롤 내려도 고정하고 내릴 경우 color를 변경하고 싶었는데 backgroundcolor를 변경하여 차이를 줄려 했더니 header가 최상단에 갈때 기본 모션인 color: default 가 white라 중간 중간 색깔이 보이는 문제점이 발생하였다.

Detail 페이지에서 Footer가 나타날때마다 100vh로 나타나서 작업에 방해가 되었다.

 

[고민의 흔적]

각 페이지 마다 backgroundcolor를 최상단에다가 css로 balck을 먹여줬다.

Footer에 margin-bottom으로 하니까 Detail 페이지에 전체 뒷배경이랑 다르게 나온다..

Footer를 Detail 페이지 안에다가 넣고 감싸주고 스타일 컴포넌트로 100vh로 지정해주었다. 

 

 

[해결 방안]

작업하는 style 전역 backgroundcolor: black 잡아줘서 header의 기본 배경인 색깔로 되어 있어서 문제를 해결했다.

스크롤을 내려도 작업에 대한 문제가 없게 아예 색을 고정시켜줬다. 

Footer위의 문서에  padding-bottom으로 어느정도 띄어 주고 밑에 나타나게 하였다.