<!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="chg-사토루랑카톡.css" rel="stylesheet">
<link href="chg-text.css" rel="stylesheet">
</head>
<body>
<div class="container">
<main class="chat-screen">
<section class="chat-screen__bar"></section>
<div class="user">
<div class="user__column">
<div class="user__pic"> 내<br> 남편</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>
<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-form__msg"></textarea>
<input type="submit" value="전송" class="chat-form__bt">
</section>
</form>
</div>
</body>
</html>여기까지..html 코드..
*{
box-sizing: border-box;
}
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
}
.container{
height: 100%;
background-color: #8fcaf1;
}
/* 스크린 크기 조정 */
.chat-screen{
height: calc(100% - 120px);
}
/* 유저 정보 표시되는 부분 */
.user{
background-color: #ffffff;
padding: 16px;
height: 80px;
}
.user__column{
float: left;
}
.user__pic{
width: 50px;
height: 50px;
margin-right: 10px;
border-radius: 10px;
background-color: #4487ed;
}
.user__nick, .user__count{
margin: 5px;
}
.user__count{
font-size: 12px;
color: rgb(254, 210, 255);
}
/* 채팅 입력창 */
.chat-form{
height: 120px;
background-color: #ffffff;
}
.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: #0bb8b5;
font-size: 18px;
}
.chat-form__bt:active{
background-color: #0a5d5b;
}
.container {
height: 100vh;
overflow: hidden;
}
.chat-screen__texts {
list-style-type: none;
margin: 0;
padding: 0;
overflow-y: auto;
height: calc(100% - 100px);
}
이것은 사토루랑 카톡하기 위한 CSS 디자인 코드...
넘 잘만들었다 ㅎㅎ
개발 광기를 드러내보쟈..