KokoaTalk Clone Coding: chat-room screen 1
chat-room upper screen html css 작성
setting.html의 형식을 그대로 사용하기 위해 chat-room.html을 생성하고 내용 붙여넣기
chats.html에서 대화내용을 클릭하면 chat-room.html로 이동할 수 있도록 anchor 태그 입력
chat-room.html에서는 아이콘을 클릭하면 chats.html로 돌아갈 수 있도록 anchor 태그 입력
chat-room.html에서만 적용될 배경색을 지정하기 위해서 body에 id 생성
배경색 지정과 alt-header 역시 스크롤을 내려도 status-bar와 같이 고정될 수 있도록 입력
위처럼 스크롤을 내리면 alt-header 위치부터는 내용이 보이지 않도록 하기위해 배경색을 넣어주면,
alt-header.css에서 padding-top을 설정해뒀기 때문에
위처럼 status-bar도 함께 가려지게 됨
z-index(default: 0)를 사용해서 레이어 순서를 설정
status-bar의 레이어 순서가 alt-header보다 앞에 위치하게 되면서 status-bar가 나타남
수신 시간을 나타내는 박스를 만들어줌
status-bar와 alt-header를 상단에 고정해주면서 원래 위치하던 레이어와는 다른 레이어에 위치하게 됨
→ chat-room__timestamp가 고정해준 레이어들과 겹쳐보임
margin-top을 설정해서 더 아래로 위치하게 만들어줌
양쪽으로 긴 크기를 줄여주기 위해서는
부모에 display: flex;로 작성해주면 크기가 줄어듬
