카카오톡 클론 코딩 #7 Friends Screen

이번 포스팅에서는 friends screen, 친구창을 만들어 보겠습니다.

채팅창을 살펴보면, 상태표시줄, status bar과 네비게이션바, navigation bar는 저번 포스팅에서 만들어 보았고, 

 

 

이번 포스팅에는 그 사이에 사진, 이름, 상태메시지, 그리고 노래를 넣어 주도록 하겠습니다. 
그리고 카카오톡 사용자와 친구의 크기 차이가 있기 때문에, 크기에서 차이를 주면 됩니다.

그럼 카카오톡 유저의 사진, 이름, 그리고 상태메시지를 만들어 보도록 하겠습니다.

 

 

그 전에, 프로필 사진들이 둥근 모양의 형태로 전부 같은 스타일로 되어 있기 때문에,
이미지를 위한 전역, global 클래스로 만들어서 사용할 수 있습니다.
즉, 글로벌 스타일을 위한 파일을 만들어서, 웹사이트의 모든 곳, 어떠한 위치에도 영향을 미칠 수 있습니다. 

저번 포스팅에서 사진과 이름 사이의 공간을 만들어 주기 위해서 chat__avatar라는 클래스를 만들어 주었는데,

 

 

다른 곳에서도 같은 스타일로 이미지가 쓰일 수 있도록, 글로벌 아바타, chat__avatar g-avatar로 수정해 주겠습니다.

이제 friends.html을 열어서, header태그 아래에(navigation태그 위에), 사용자 줄, userrow를 먼저 만들어 보겠습니다.

먼저, main태그를 열고,

 

 

header태그를 열어준 다음, (한 페이지에 여러 개의 header태그를 사용해도 무방합니다.)

 

 

div태그까지 열어주면, 사용자 줄을 만들 수 있습니다.

 

 

위에서 확인했듯이, 사용자 줄은, 아래 친구목록 줄보다 사진의 크기가 더 크기 때문에,
클래스 명을 friedns__freidns friend freind--lg로 수정 해 주겠습니다.

이제 그 아래에, 열 하나를 추가 해 준 다음,

 

 

저번 포스팅에서 했던 대로, 이미지를 등록하기 위해, 이미지를 저장해 주고,  

 

 

경로를 입력해 주면 됩니다.

 

 

 

프로필 사진도 입력했으니, 이번에는 첫 번째 열에 들어 갈 이름과 상태메시지를 적어 주겠습니다.
(현재 사용자의 상태메시지가 없지만, "행복하세요"로 입력해 주도록 하겠습니다)

 

 

먼저, div태그를 열고, 그 아래에 span태그를 이용해서 이름, 상태메시지를 적어 주면 됩니다.

 

 

두 번째 열에는 프로필 뮤직을 넣어 보도록 하겠습니다. 
(현재 사용자의 프로필 뮤직이 없지만, "Happy birthday to you"를 입력해 주겠습니다)

다시 한 번 더, div태그를 이용해서 열을 만들어 주고, 프로필 뮤직을 입력한 다음,

 

 

이름 없는 span태그를 이용해서, 재생 중인 음악을 적어주고, 재생버튼 아이콘을 넣어 주겠습니다.

 

 

웹 상에서, 두 개의 열을 가진 사용자 줄을 확인할 수 있습니다.

 

 

 

친구목록도 위와 같이, 유사하게 만들 수 있습니다   
그 전에, 사용자와 친구 목록을 구분 지어주는 선을 먼저 만들어 보겠습니다. 

부모가 friends이기 때문에, friends__new라는 이름을 가진 div태그로 배너, 선을 만들어 주고, h태그에 내용을 입력!

 

 

이제 위에서 만들었던 사용자 줄을 복사-붙여넣어 주면 됩니다. 

 

 

사용자의 사진이 친구 사진보다 크기 때문에, friend--lg를 지워주고,

 

 

사진, 이름, 상태메시지를 수정하고, 프로필 뮤직은 없기 때문에, 지워주면 됩니다.

 

 

 

아래에 여러 배너, 선들이 있지만, 생략하고, 친구 목록 배너만 만들어 보도록 하겠습니다. 
배너의 스타일이 동일하고, 여러번 사용되기 때문에, 클래스명을 friends__title로 수정해 주겠습니다.

 

 

채팅창에서 만들었던 대로, 친구목록도 반복적으로 만들기 위해, ul태그를 만들어 주고, 

 

 

h태그를 이용해, 배너의 내용을 입력해 줍니다.

 

 

이제 ul태그의 짝궁인 li태그를 만들어 주겠습니다.

 

 

사용자 줄과는 다르게, div태그가 아닌 li태그를 사용한 이유는, 친구줄은 동일한 작업이 반복되기 때문입니다.
하지만, 사용자 줄, userrow에서 사용했던 것과 똑같은 스타일을 사용할 것이기 때문에, 클래스명은 동일하게 해 줍니다.

이제 마찬가지로, (복사-붙여넣기해서)
두 열을 만들어 주고, 첫 열에는 프로필 사진, 이름, 상태메시지를 넣어 주고, 두 번째 열에는 음악을 넣어 주면 됩니다.