<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>나만의 채팅방</title>
<link href="chat.css" rel="stylesheet">
</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>
</main>
<!-- 채팅 입력창 -->
<form class="chat-form">
<section class="chat-form__field">
<textarea class="chat-form__msg" placeholder="메시지를 입력하세요..."></textarea>
<button class="chat-form__bt" type="submit">전송</button>
</section>
</form>
</div>
</body>
</html>
/* 전체적인 세팅부터 */
*{
box-sizing: border-box;
}
html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
}
.container{
height: 100%;
background-color: #FCC41F;
}
/*스크린 크기 조정 */
.chat-screen{
height: calc(100% - 120px);
}
/* 유저 정보 표시되는 부분 */
.user{
background-color: white;
padding: 16px;
height: 80px;
}
.user__column {
float: left;
}
.user__pic{
width: 50px;
height: 50px;
margin-right: 10px;
border-radius: 10px;
background-color: #FCC41F;
}
.user__nick, .user__count{
margin: 2px;
}
.user__count{
font-size: 12px;
color: gray;
}
/* 채팅 입력 창 */
.chat-form{
height: 120px;
background-color: white;
}
.chat-form__field{
height: 120px;
}
.chat-form__msg{
float: left;
width: calc(100% - 120px);
height: 120px;
border: none;
resize: none;
font-size: 24px;
padding: 10px;
}
.chat-form__bt{
float: right;
width: 120px;
height: 120px;
border-radius: 10px;
background-color: #FCC41F;
font-size: 18px;
}
.chat-form__msg:focus{
outline: none;
}
.chat-form__bt:active{
background-color: #CB9D12;
}