chats.html에 chat.html로 이동할 수 있는 링크를 걸어준다.
-
body에 배경색을 걸어준다. (id 사용)
-
채팅창의 status-bar와 header의 배경색도 동일하게 만들어준다.
이 때 패딩값 때문에 텍스트가 가려지는 문제 발생.
z-index속성
각 요소에 대한 layer 순서를 나타낸다. 기본값은 0.
- 헤더 고정
{ position: fixed;
width: 100%;
top: 0px;
box-sizing: border-box; }
-
타임스탬프를 중앙에 위치시키기
부모요소(=flex container)에 {
display: flex;
flex-direction: column; // 위아래 정렬를 위한 설정
align-items: center; // 위아래 정렬 센터로 설정.
} -
수신 메세지 행 만들기
width: 100%
display: flex; -
발신 메세지 행 만들기 ---- modifier 이용하여 class 를 하나 더 갖게 하여 적용
-
한쪽 모서리 각지게 만들기
border-top-left-radius: 0px;
- flex children의 순서를 바꾸기
flex containers는 flex children을 갖는다.
flex children는order라는 기능을 가지며 오직 flex childrend에게만 적용된다.
혹은flex-direction: row-reverse (행 뒤바꿈 의미);로 순서를 바꿀 수 있다.
- 메세지 입력창 만들기
column에 width를 먼저 주고 (10%, 90%)
input에 width를 준다. (100%)
