오늘은 채팅 기능은 없지만 채팅창처럼 보이는 웹화면은 만들어보겠습니다.
1개의 html파일과 2개의 css파일을 링크하여 만들었습니다.
주석으로 간단한 설명 첨부하였습니다.
html 코드
<!DOCTYPE html>
<html lang="ko">
<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>채팅방 만들기</title>
<link href="mychat.css" rel="stylesheet"><!--css링크-->
<link href="mytext.css" rel="stylesheet"><!--css링크-->
</head>
<body>
<div class="container">
<main class="chat-screen"><!--채팅창(바,텍스트)-->
<section class="chat-screen__bar"><!--채팅창(바)-->
<div class="user">
<div class="user__column">
<div class="user__pic"></div>
</div>
<div class="user__column">
<p class="user__nick">친구</p>
<p class="user__count">2</p>
</div>
</div>
</section>
<ul class="chat-screen__texts"><!--채팅창(텍스트)-->
<li class="text">친구야 반가워</li>
<li class="text">우리 언제 밥이나 한번 먹자</li>
<li class="text">친구야 반가워</li>
<li class="text">우리 언제 밥이나 한번 먹자</li>
<li class="text">친구야 반가워</li>
<li class="text">우리 언제 밥이나 한번 먹자</li>
<li class="text">친구야 반가워</li>
<li class="text">우리 언제 밥이나 한번 먹자</li>
<li class="text">친구야 반가워</li>
<li class="text">우리 언제 밥이나 한번 먹자</li>
</ul>
</main>
<form class="chat-form"><!--채팅 입력창-->
<section class="chat-form__field">
<textarea class="chat-from__msg"></textarea>
<input type="submit" value="전송" class="chat-form__bt">
</section>
</form>
</div>
</body>
</html>채팅창 css 코드
/* 전체적인 세팅부터 */
*{
box-sizing: border-box;
}
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
}
.container{
height: 100%;
background-color: #B9CEDF;
}
/* 스크린 크기 조정 */
.chat-screen{
height: calc(100% - 60px);
overflow: auto;
padding-top: 80px;
}
/* 유저 정보 표시되는 부분 */
.user{
background-color: #FFFFFF;
padding: 16px;
height: 80px;
width: 100%;
position: fixed;
top: 0;
z-index: 10;
}
.user__column{
float: left;
}
.user__pic{
width: 50px;
height: 50px;
margin-right: 10px;
border-radius: 10px;
background-color: #FFEB33;
}
.user__nick, .user__count{
margin: 5px;
}
.user__count{
font-size: 12px;
color: gray;
}
/* 채팅 입력 창 */
.chat-form{
height: 60px;
background-color: #FFFFFF;
}
.chat-form__field{
height: 60px;
}
.chat-from__msg{
float: left;
width: calc(100% - 60px);
height: 60px;
border: none;
resize: none;
font-size: 24px;
padding: 10px;
}
.chat-form__bt{
float: right;
width: 60px;
height: 60px;
border: none;
background-color: #FFEB33;
font-size: 18px;
}
.chat-from__msg:focus{
outline: none;
}
.chat-form__bt:active{
background-color: #FFEB33;
}채팅 css 코드
.chat-screen__texts{
padding: 0;
list-style-type: none;
}
/* 말풍선 */
.chat-screen__texts > .text{
background-color: #FFFFFF;
width: 280px;
height: 50px;
margin: 0 0 10px 0;
padding: 10px;
border-radius: 8px;
line-height: 30px;
position: relative;
left: 20px;
}
/* 말풍선 꼬리 */
.chat-screen__texts > .text::after{
content: "";
border-right: 16px solid #FFFFFF;
border-bottom: 16px solid transparent;
position: absolute;
top: 10px;
left: -10px;
}
/* 말풍선 애니메이션 효과 */
.chat-screen__texts > .text:hover{ /* 커서 위치 시 */
background-color: #b2b2b2;
transition: background-color 1500ms 200ms ease-in;
}
.chat-screen__texts > .text:hover::after{
border-right: 16px solid #b2b2b2;
transition: border-right 1500ms 200ms ease-in;
}
