index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="user-container">
<label for="nickname">대화명</label>
<input type="text" id="nickname">
</div>
<div class="display-container">
<ul class="chatting-list">
<li class="sent">
</li>
<li class="received">
<span class="profile">
<span class="user">깔깔</span>
<img class="image" src="https://placeimg.com/50/50/any" alt="any">
</span>
<span class="message">그래 반가워</span>
<span class="time">오후 2:21</span>
</li>
</ul>
</div>
<div class="input-container">
<span>
<input type="text" class="chatting-input">
<button class="send-button">전송</button>
</span>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js" integrity="sha512-MgkNs0gNdrnOM7k+0L+wgiRc5aLgl74sJQKbIWegVIMvVGPc1+gc1L2oK9Wf/D9pq58eqIJAxOonYPVE5UwUFA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/chat.js"></script>
</body>
</html>style.css
채팅 테마 스타일 css
따라 적느라 바빠서 내용을 이해하지 못했다.
찬찬히 보면서 이해해볼것!
* {
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
.wrapper{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.user-container{
background: #a9bdce;
flex: 1;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0.5rem;
}
.user-container label{
font-size: 14px;
margin-right: 1rem;
}
.user-container input{
border-radius: 3px;
border: none;
height: 100%;
}
.display-container{
flex: 12;
background: #b2c7d9;
overflow-y: scroll;
}
.input-container{
flex: 1;
display: flex;
justify-content: stretch;
align-items: center;
}
.input-container span{
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0.3rem;
width: 100%;
}
.chatting-input{
font-size: 12px;
height: 100%;
flex: 8;
border: none;
}
.send-button{
flex: 1;
background: #ffeb33;
border: none;
height: 100%;
border-radius: 3px;
}
.chatting-list li{
width: 90%;
padding: 0.3rem;
display: flex;
justify-content: flex-start;
align-items: flex-end;
margin-top: 0.5rem;
}
.profile{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
}
.profile .user {
font-size: 10px;
margin-bottom: 0.3rem;
}
.profile .image{
border-radius: 50%;
/* 크기에 맞게 이미지를 조절해줌 */
object-fit: cover;
width: 50px;
height: 50px;
}
.message{
border-radius: 5px;
padding: 0.5rem;
font-size: 12px;
margin: 0 5px;
flex: 7;
}
.time{
font-size: 10px;
margin: 0 5px;
}
.sent{
flex-direction: row-reverse;
float: right;
}
.sent .message{
background: #ffeb33;
}
.received .message{
background: #fff;
}
1일 1커밋 1일 1벨로그!