회고록 블로그
HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (5)_채팅목록 완성 본문
저번에 카카오톡 PC버전을 HTML+CSS만으로 만들기로 하였고
로그인 페이지, 친구리스트 화면까지 만들었다.
이번에는 '채팅리스트 화면'을 만들어야 한다.
미처 그림을 그리지 못했는데, 이번에는 저번에 만들었던 '친구리스트 화면'의 코드를 일부 복사해오면 되기 때문에 구상이 좀 쉬워질 것 같다.
이미 사이드바, 상단바, 하단 광고까지 grid로 레이아웃을 잡아놓았으니까 그 코드를 가지고 오고,
채팅목록 부분만 flex로 구성해주면 될 것 같다.
※ 멘토없이 초보자가 혼자 만드는 코드이므로, 효율적인 코드가 아닐 수 있음
(마치 float나 flex를 놔두고 <table>로 레이아웃을 만드는 것과 같은 비효율적인 코드일 수 있음 주의)
도구: Visual Studio Code
언어: HTML, CSS
서버: 없음 (클라이언트 사용)
그 외: 없음
세번째 페이지. 채팅리스트 화면 (chat.html)
HTML 만들기 : <head> 영역
# 앞서 만든 친구리스트 화면과 동일한 내용으로 작성하였다 #
1. 저번에 만든 친구리스트 화면(friend.html)의 <head>와 동일하나 css의 파일명과 keyword만 변경해주었다.
2. css 파일을 전체적으로 다시 정리해주기로 했다.
* 로그인 화면 : index.html
- 공통 CSS(폰트, 배경화면 기본색상 등) : general.css
- 로그인 화면 전용 CSS(로고 스타일, form 태그 스타일 등) : login.css
* 친구리스트 화면 : friend.html
- 공통 CSS(폰트, 배경화면 기본색상 등) : general.css
- PC톡 메인화면 레이아웃 CSS(사이드바, 상단 메뉴바, 하단 광고영역) : main-layout.css
=> 친구/채팅 리스트는 동일한 틀을 사용하므로 공통으로 사용할 레이아웃 CSS를 만듬
- 친구리스트 화면의 주요 내용들 CSS(친구리스트 영역에 들어가는 내용과 관련된 스타일) : friend.css
* 채팅리스트 화면 : chatting.html
- 공통 CSS(폰트, 배경화면 기본색상 등) : general.css
- PC톡 메인화면 레이아웃 CSS(사이드바, 상단 메뉴바, 하단 광고영역) : main-layout.css
=> 친구/채팅 리스트는 동일한 틀을 사용하므로 공통으로 사용할 레이아웃 CSS를 만듬
- 채팅리스트 화면의 주요 내용들 CSS : chatting.css
※ HTML 파일의 head 영역
<!DOCTYPE html>
<!-- Description: Kakao PC ver. Clone -->
<html lang="ko" data-dark="false">
<head>
<meta charset="utf-=8">
<title>KaKao Talk Chat Main</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="description" content="Kakao Talk Clone Chat Main Page">
<meta name="keywords" content="KakaoTalk, Clone, Chat">
<meta name="robotos" content="noindex, nofollow">
<link rel="stylesheet" href="CSS/main-layout.css">
<link rel="stylesheet" href="CSS/chatting.css">
<link rel="stylesheet" href="CSS/general.css">
<link rel="stylesheet" href="fontello/css/animation.css">
<link rel="stylesheet" href="fontello/css/fontello.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
</head>
...
HTML 만들기 : <body> 영역
# 친구리스트 화면(friend.html)에 나오는 사이드바, 하단 광고, 상단 메뉴바는 동일하게 작성해준다 #
1) 친구리스트 화면(friend.html)에 나오는 사이드바, 하단 광고, 상단 메뉴바는 동일하게 작성
* HTML의 공통 영역을 하나의 파일로 만들고 그걸 필요할 때마다 불러올 수 있으면 좋겠지만 HTML과 CSS 만으로는 그런 기능이 불가능한 것 같다. (자바스크립트 쓰면 가능)
2) 메인(<main>) 영역과 제목(채팅, 아이콘들)만 다른 내용으로 작성
* '프로필 사진, 친구이름, 메시지 내용, 시간'으로 구성된 채팅 리스트를 만들었다 (ul로 만듬)
결과적으로 현재는 이렇게 만들어졌다.
저번에 만든 레이아웃을 그대로 썼더니 CSS가 적용되어있다.
코드는 이런 식으로 만들었다.
(사진의 사이즈가 너무 커서 임시로 너비를 10%로 설정해주었다)
<!-- 메인: 채팅 리스트 화면 -->
<main>
<div>
<ul>
<li>
<img src="./pic/k-pay.png" alt="k페이프로필사진" width="10%">
<div class="talk">
<p>k-페이</p>
<p>메시지가 도착했습니다.</p>
</div>
<p class="time">오후 4:10</p>
</li>
...
CSS 만들기
# 채팅리스트의 메인(<main>)만 수정해주면 된다. 사이드바, 하단 광고 등은 저번에 만든 레이아웃이 그대로 반영되었기 때문. #
1) 채팅 리스트(<main> 영역) flex box로 만들기
* '프로필 사진, 친구이름, 메시지 내용, 시간' : 이 부분을 하나의 flex box로 구성하고
각각의 채팅 목록들을 또 별도의 flex box로 구성하기로 했다.
2) 안 읽은 메시지(채팅) 수 표시하기
* 이 부분이 가장 혼란스러웠는데 아래와 같이 해결했다.
처음에는 아래와 같은 그림을 만들어서, background-image로 적용을 해봤었다.
하지만 문제가 발생했다. 아래처럼 숫자가 10, 100의 자리로 커지면 동그라미가 커졌다.
카카오톡 PC버전을 유심히 관찰했는데 (친구한테 메시지 10개만 보내달라고 함)
1의 자리 숫자는 예쁜 둥근형인데 10의 자리 숫자가 되면 왼쪽으로 넓어졌다. 아래 그림처럼.
여러가지 방법을 찾다가 border-radius를 이용하기로 했다.
border-radius의 값은 테두리에 있는 꼭지점의 반지름 값이라고 한다.
처음에는 50%로 설정을 했는데 10의 자리, 100의 자리가 될 수록 좀 원형이 이상해졌다.
퍼센테이지는 안되겠다 싶어서 픽셀로 설정을 했다.
1부터 10까지 숫자를 다양하게 넣어봤는데 10이 가장 적절했다.
좀 신기한 점은 border-radius: 100px 이나 border-radius: 10px이나 큰 차이가 없어보였다는 점..
border-radius: 1px로 하면 아래처럼 확연하게 차이점이 느껴진다.
어쨌든 결과적으로 border-radius를 이용해서 '안 읽은 메시지 수'를 표시해주기로 했다.
3. 저번에 grid로 잡은 큰 레이아웃 일부 수정해주기
* 원래 상단의 세팅바(닫기, 최대화, 최소화 버튼)는 좀 더 왼쪽에 있었는데 카카오톡을 다시 보니까 거의 오른쪽에 붙어 있었다.
* 그래서 grid를 아래와 같이 수정해주었다.
4. '나' 아이콘은 background-image로 넣어주기
* 카카오톡 PC톡을 보면 '나의 채팅창'에는 "나" 라는 표시가 붙어있다.
* 유심히 관찰해봤는데 이건 이미지 혹은 fontello 같은 아이콘일 것 같았다. 혼자만 폰트가 엄청 튀어서(?) 그렇게 추측하였다.
* 그러나, 연습하기 위한 용도로 클론 코딩을 하는거니까.. 아이콘이나 이미지를 쓰는 것보다는 background-image를 사용해보기로 했다. 그래서 아래와 같이 결과가 나왔다. 좀 어색하지만 만족 만족..
background-image 써보려고, 뒷배경으로 쓸 이미지를 이렇게 만들어 놓았다..
2021-03-24 현재까지 결과물
얼추 완성되었다.
하지만 수정해야할 부분이 아직 많다.
코드에 있는 단위는 전부 픽셀(px)로 되어있어서 rem으로 수정해야하고,
채팅 목록에 마우스로 hover 하면 백그라운드가 옅은 gray 색으로 변하는 점,
채팅 목록 마우스로 click 시 백그라운드가 짙은 gray 색으로 변하는 점 등을 더 수정해야 한다.
일단 여기까지하고 내일 하기로..
2021-03-25 현재 결과물
마우스 hover 시에 백그라운드 컬러를 변경토록 변경하였다.
마우스 클릭(active 속성) 시에는 더 진한 컬러로 변경되도록 하였는데 클릭하고 있을 때에만 색상이 진해진다는 문제가 있다..
실제 카카오톡 PC버전은 채팅 목록을 하나 선택해서 클릭하고 나면 다른 채팅 목록을 선택하기 전까지 계속 진한색으로 존재한다.
이건 HTML이나 CSS로는 구현하지 못할 것 같다.
한가지 더 수정해야 하는 점은 아래의 공간까지 백그라운드 컬러가 채워져야 하는데 margin이나 padding으로 만든 공간이 아니라서 채워지지 않았다.
grid area를 수정하면 되는 부분이지만 수정하지 않을 것이다.. 나중에 시간이 여유로울 때 수정해보는게 좋을 것 같다.
이렇게 채팅목록 화면도 마무리를 하려고 한다.
<문제점/해결해야할 점>
※ 크롬은 최소 폰트 크기가 10px이고, 내가 작성한 코드는 rem..
즉, 웹브라우저의 기본 폰트 크기에 영향을 받도록 작성했다.
그런데 문제가 발생했다.
웹 브라우저의 기본 폰트 크기를 10px로 하면 아래와 같이 시간(time) 부분이 두줄이 되어버린다. ㅠ
(원래 저 시간부분은 웹 브라우저의 기본 폰트 크기가 16px 일 때 10px로 보이도록 소스코드를 작성했다.
웹 브라우저의 기본 폰트 크기를 10px로 변경해버리면 시간 부분의 폰트 크기는 6.25px이 되어야 하지만
크롬은 최소 폰트 크기가 10px이기 때문에 6.25px로 화면에 출력을 하지 못한다.)
어떻게 해결해야할지 고민 중이다.
※ IE에서 html 파일을 열어보면, grid를 지원하지 않아서 그런지 전체 레이아웃이 깨져서 출력된다. ㅠ
이것도 어떻게 해결해야할지 고민중이다.
'2. 프로그래밍 언어 공부 > 무엇이든 만들어보기' 카테고리의 다른 글
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (7)_채팅방 화면 완성 (10) | 2021.03.27 |
|---|---|
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (6)_더보기 화면 완성 (0) | 2021.03.25 |
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (4)_친구리스트 완성(추후 기능 수정) (0) | 2021.03.16 |
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (3) (0) | 2021.03.15 |
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (2)_로그인 페이지 완성 (0) | 2021.03.10 |
