Cocoa Talk 7 - 1 chat.html

자 헷갈리지 말자 chats.html 이 있고 chat.html이 있다.

chats는 채팅방들이 있는 페이지이고 이번에 만들 페이지는 채팅방에 입장 후 채팅방 페이지이다.

아 여기서 머리좀 아팠다...

position: fixed떄문에...

 

우선 역시 setting.html을 복사 붙여 넣기 해주자.

그리고 필요없는 네브바 지우고 메인 안도 다 삭제 해주자.

 

일단 헤더부분에 아이콘 하나만 추가하자 마지막 칼럼에 추가해주고  간격 조정 해주자.

그 후 채팅창은 계속 글이 업데이트 되니 뷰포트를 크게 설정 해준다

그러기 위해 body에 id값을 줬다. 다른 곳이랑 혼용되면 안되니까~

 

이제 머리가 아팠던... position : fixed차례이다...

앞서 먼저 만들었던 status-bar.css에 다른 페이지들에서도 모두 fixed가 되도록 설정 해놓았다.

 

여기는 다른 screen이므로  chat.css를 만들고 거기서 작업했다

이제 채팅방에서 헤더와 status-bar가 모두 고정이 되야하는데 ( 채팅방은 글을 쓰면 계속 내려가니까 )

수업 진행대로 진행하니 이 두개의 레이어가 붕뜨는거다... ㅠㅠ 위쪽에 공간이 무지하게 생겨버림...

혹시 이전 status-bar fixed가 문제인가 해서 픽스드를 없애도 마찬가지...

그럼 이전꺼 그대로 두고 했더니 status-bar는 고정이 된다 근데 헤더 고정을 하면 겹쳐버린다.

아오!~! 각 헤더마다 패딩도 줘보고 별걸 다해봤다 해결은

그냥 헤더랑 status-bar에 top:0을 주니까 그냥 해결됬다 ㅠㅠ 난감하다.

status-bar css자체에 픽스드를 또 주면 다른 페이지들이 엉망이 되는데

그 부분은 그냥 width값이랑 border-box 설정해주고 각 페이지에 들어가는 헤더에 패딩이랑 마진 간격만 조절해주면 되긴한다.

이게 맞는지는 모르지만 되긴 하니 차차 이에 대해 더 알아 보자.

 

그리고 헤더 아래 time-stamp를 만들어 줬는데 애는 또 어디 갔는지 안보인다...

니코 쌤 말로는 position:fixed를 하게 되면 레이어가 뜨게 되어 다음 div들은 아래부터 차곡 차곡 ~~

그래서 메인 태그인 .main-chat에 마진 탑을 줬더니 보인다!

 올레!

문제가 있다 스크롤을 하면 타임스탬프 글자가 가려서 안보여야 하는데 배경이 가장 아래 있고 그 위로 쌓았으니

투명상태로 보인다...

자 해결하기 위해 헤더와 스테이터스 바에 백그라운드 컬러를 주자! 

 

이제 안보인다! 올레~ 근데 역시 한가지 더 문제가 생긴다 ~ 헤더백그라운드 컬러가 status-bar를 먹었다.. 가려서 안보인다..

레이어가 위로 쌓이 개념인거다. 나중 div가 덮어 쓰고 있는거.. 

자 여기서 해결책   z-index!!!! 

status-bar에 z-index:2를 주고  header에 z-index : 1을 주자

z-index값이 클 수록 위로 올라오게 된다. 레이어의 순서를 주는 느낌?

absolute or fixed position에서 쓰인다

 

자 드디어 해결됐다.. 다시 복기하니까 이해가 된다.. 강의 다 듣지도 않고 안되는거 해결부터 하려다 시간이 술술이다..ㅋㅋㅋㅋ

역시 난 재밌다 ㅎㅎㅎ

일단 여기까지 된건~

요렇게~!~!~! 자 다음 강의 들으러 ㄲㄲ