38. Chat Screen 화면 만들기 (html,css - 채팅화면 2)

6) 

chat.css 화면

스크롤을 만들기 위해

body의 길이를 매우 길게 만듬.

 

아이콘 사이에 공간을 주기 위해 아이콘을 감싸고 있는 span 중

두 번째 아이콘을 지정하기 위해 span:last child를 해주어 공간을 줌.

 

이 header는 스크롤이 내려가도 상단에 위치해야 하기 때문에

fixed를 하여 고정해줌.

 

 

적용된 모습

적용이 되었지만

fixed를 하며 header의 간격이 이상해짐.

 

 

chat.css 화면

이를 해결하기 위해 먼저

margin을 설정해주고

box-sizing: border-box를 하여

border 안에 요소들이 전부 위치하게 함.

 

 

적용된 모습

적용하였지만 중앙에 위치해야 하는 제목이

치우쳐져 위치하게 됨.

 

 

 

7) 간격 다시 조정하여 정렬하기

chat.css 화면

균등한 공간을 먼저 배부함.

 

 

적용된 모습

공간이 일정하게 주어짐.

 

 

chat.css 화면

마지막 column:last-child 인

오른쪽에 있는 아이콘들을

flex 해주고

flex-end를 해주어 오른쪽 끝에 위치하도록 함.

 

 

적용된 모습

아이콘이 header의 끝에 위치하게 됨.

 

 

chat.css 화면

두 번째 column인 제목을

text-align: center; 을 하여 중앙으로 보냄.

 

 

적용된 모습

제목이 중앙에 위치함.

 

 

 

8) 페이지 연결하기

chat.html

chat.html 파일의

화살표 아이콘에

chats.html 파일의 주소를 연결하여줌.

 

 

연결된 모습

화살표 아이콘을 누르면

페이지가 이동되는 것을 볼 수 있음.

 

마찬가지로 chats 화면에서 채팅방을 누르면

채팅창으로 이동됨.

 

 

 

9) 날짜와 시간 만들기

chat.html 화면

main 파트에 timestamp 박스를 만들어 내용을 적어줌.

 

 

chat.css 화면

status bar와 header는 움직이지 않고

상단에 고정되어 있어야 하기에 고정해줌.

 

main 파트의 상단에 공간을 주어

타임스탬프를 header 밑으로 내려줌.

 

 

적용된 모습

하지만 스크롤을 내리면

타임스탬프가 header와 status bar를 지나쳐 가는게 보임.

 

이를 해결하기 위해

 

 

chat.css 화면

status bar와 header에 배경색을 줌.

 

 

적용된 모습

배경색이 생겨서 타임스탬프가 지나가는 모습이 보이지 않지만

header의 배경이 status bar를 덮어버림.

 

그 이유는

header의 배경이 status bar의 배경보다

앞에 위치하기 때문임.

 

 

 

10) 레이어 순서 변경하기

chat.css 화면

z-index 란 기본적으로 div가 있는 위치가 맨 앞에서부터 몇 번째인지를 나타 냄.

 

즉, 레이어의 순서가 몇 번째인지를 나타냄.

 

display, fixed의 경우에는 레이어를 갖게 되는데

이 때 레이어는 0부터 시작됨.

(0이 제일 뒤의 레이어)

 

 

적용된 모습

header의 배경이 status bar의 배경보다 뒤에 위치하게 되어

status bar가 가려지지 않음.

 

하지만 이 방법보다 더 좋은 방법이 있음.