카카오톡 클론 코딩 #11 대화창

이번시간에는 채팅목록을 누르면 넘어가는 대화창을 만들어 보도록 하겠습니다.

chat.html을 만든 다음, settings.html의 내용들을 복사-붙여 넣어서 내용들을 수정해 줍니다.

먼저, head에 있는 title은 room으로 고쳐주고,  

header태그에서는
왼쪽 화살표에 연결되어 있는 하이퍼링크는 index.html로 변경해 주고,
title은 사용자로,
돋보기 옆에는 三 아이콘도 추가(fontawesome이용) 해 줍니다.

채팅창의 목록을 클릭하면 대화창으로 넘어가게 만들어 주기 위해, 채팅 목록 부분을 하이퍼링크를 걸어줍니다.

이제 대화창의 main부분을 수정해 주겠습니다.
메시지는 목록화 되어 있기 때문에, ul태그를 이용해 줍니다.

여기서 대화창의 구성을 살펴 보면,
두 종류의 메시지, 수신 메시지와 발신 메시지로 이루어져 있다는 것을 알 수 있습니다.

수신 메시지는 1> 프로필사진, 2> 닉네임과 내용, 3> 시간으로, 발신메시지는 1> 시간, 2> 내용으로 구성되어 있습니다.
따라서 수신 메시지는 3개의 column으로, 발신메시지는 2개의 column으로 구분하여 만들어 줄 수 있습니다. 

먼저 수신 메시지를 만들어 보겠습니다.

수신메시지와 발신메시지는 글자크기, 패딩, 타임스탬프 등을 공통적으로 공유하기 때문에,
클래스 명, message를 추가로 입력해 주겠습니다.

 

그럼 이제 수신 메시지의 첫 번째 열에 들어갈 1> 프로필 사진을 넣어 주겠습니다.

여기서도 g-avart 형식으로(전에 프로필 사진에서 했던대로) 맞춰서 적어 줍니다.

 

2> 닉네임과 내용, 이 들어갈 두 번째 열을 만들어 보겠습니다.
먼저 div태그를 열어서,

span태그에는 닉네임을 적어 주고,

div태그에는 내용을 넣어 줍니다.

 

마지막으로 세 번째 열에 들어가는 3>날짜를 만들어 주면 됩니다.

 

발신메시지는 수신메시지를 만들었던 것처럼,
복사 붙여 넣은 다음, 수정하여 만들어 줄 수 있습니다.

대화를 입력하는 부분을 만들기 전에,
대화가 시작되기 전, 맨 위에 입력되는 날짜를 넣어 주었습니다.

 

그럼 이제 main태그 아래에 발신 메시지를 입력하는 부분을 만들어 보겠습니다.

채팅을 입력하는 부분은 3개의 열로 이루어져 있기 때문에, 3개의 column을 만들어 줍니다. 

첫 번째에 들어가 있는 플러스 아이콘을 입력해 주었습니다.

두 번째 열에는 직접적으로 내용을 입력하는 부분은 input태그를 이용합니다.

마지막으로 오른쪽에 위치한 두 개의 아이콘, 스마일, 샵을 넣어 주겠습니다. 
먼저 span태그를 이용해서 2개의 공간을 만들어 주고,

끝으로 채팅방에는 navigation 바가 필요없기 때문에, 지워주면 됩니다.