카카오톡 클론 코딩 #6 Chat Screen

이번시간에는 index.html에서 (4) 채팅창, chat screen을 만들어 보도록 하겠습니다.

그 전에, 각 창의 title, 제목 줄에 있는 아이콘들을 살펴 보겠습니다.

 

 

먼저, 친구창은 채팅창과 비교해서, header 부분에 comment, 말풍선을 지워주고, 유저아이콘을 넣어 주겠습니다.

 

 

검색창과 설정창은 일단 놔 두고, 게임별창은 comment, 말풍선과 음악, note 아이콘이 없으니, 지워 줍니다.

 

 

그리고 더보기 창에는 검색부분과 스캔하는 부분, 그리고 음악, 설정 기능이 있기 때문에, 
코딩했던 부분에서, comment를 지워주고, 스캔 아이콘을 추가 해 주겠습니다.
먼저, 스캔은 QR코드 아이콘으로 사용해서, 카카오톡 더보기창과 유사한 화면을 만들어 줍니다.

 

 

Status bar, 상태표시줄은 모든 창에서 나타나고, Title, 제목과 아이콘은 거의 모든 곳에서 존재합니다.
마찬가지로, navigation bar, 네비게이션 바도 모든 창에서 확인 가능 합니다.

 

 

 

그럼 이제 채팅창에서 일대일 채팅방을 하나 만들어 보겠습니다. (그룹채팅방은 나중에 만들겠습니다.)

 

 

채팅창, index.html에서 navigation bar의 시작 부분, 즉, header 끝난 부분, 아래에 main 태그를 넣어서,
main태그 내에 들어가는 내용을, 브라우저 내에서 디자인적인 측면에서 메인으로 지정하도록 하겠습니다.
main태그에 class를 chats로 입력하고,

 

 

chats__list이라는 클래스를 가진 ul을 만든 다음,

 

 

chats__chat이라는 클래스를 가진 li를 추가 하고, 이해하기 쉽도록 클래스명을 chats__chat chat으로 고쳐 주겠습니다.

 

 

그런 다음, 채팅방의 열을 앞 부분과 뒷 부분으로 두 개 만들어 주겠습니다. (세 부분으로 나누어 만들어도 되지만..)

 

 

여기서 클래스명을 chats로 적어주지 않은 이유는, 채팅방 하나를 chat component, 부모로 만들어주기 위해서입니다.
다시 말해, component가 많은 것(현재 사진, 이름, 내용, 날짜)을 포함해야 되는 경우,
chat, chat-column, chat-avartar 하나 하나 만들지 않는 대신에,
부모인 chat을 새롭게 만들어 chat__column을 2개로 나눠서 적어 주었습니다.

먼저, 두 번째 열에 들어갈 시간을 만들기 위해, span.chat__timestamp를 입력하고, 내용을 적어줍니다.

 

 

이번에는 첫 번째 열에 들어갈, 사진, 이름, 내용들을 각각 입력해 주겠습니다.
.chat-content라는 클래스로 div태그를 만들어 주고,

 

 

span.chat__username라는 클래스로 span태그를 만든 후, 상대방의 이름을 입력해 줍니다.

 

 

그리고 span.chat__preview라는 클래스의 span태그를 만든 후, 내용을 입력해 주겠습니다.

 

 

마지막으로 프로필 사진을 수정해 주겠습니다. 
먼저 사진을 준비해서, kakao-clone-v2에 파일, images을 만들어, 사진, avatar로 저장하겠습니다.

 

 

(이때, 폴더와 파일명은 모두 소문자로 써야 에려가 생기지 않습니다. )

이제 <img class="chat__avatar" src="./images/avatar.jpg" />라고 입력 후,

 

 

새로고침 해 주면, 위와 같이 브라우저에서 입력한 것들을 확인할 수 있습니다. 

아직 CSS로 정리하지 않아서, 지저분해 보일 수 있지만, 
일단 HTML 전부를 입력하였고, 나중에 수정 보완해 주도록 하겠습니다.