Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

제뉴어리의 모든것

간단한 모바일웹 채팅 UI (리스트) HTML 코드 본문

css

간단한 모바일웹 채팅 UI (리스트) HTML 코드

제뉴어리맨 2021. 3. 23. 03:27 
<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="./css/common.css">
</head>
<body>
<div class="chat_list_wrap">
<div class="header">
KKOTKKIO
</div>
<div class="search">
<input type="text" placeholder="이메일/아이피 검색" />
</div>
<div class="list">
<ul>
<li>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="profile_td">
<!--Img-->
<img src="./images/profile_preview.png" />
</td>
<td class="chat_td">
<!--Email & Preview-->
<div class="email">
kkotkkio@gmail.com
</div>
<div class="chat_preview">
안녕하세요~
</div>
</td>
<td class="time_td">
<!--Time & Check-->
<div class="time">
2016.09.29 17:54
</div>
<div class="check">
<p> </p>
</div>
</td>
</tr>
</table>
</li>
<li>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="profile_td">
<!--Img-->
<img src="./images/profile_preview.png" />
</td>
<td class="chat_td">
<!--Email & Preview-->
<div class="email">
kkotkkio@gmail.com
</div>
<div class="chat_preview">
안녕하세요~
</div>
</td>
<td class="time_td">
<!--Time & Check-->
<div class="time">
2016.09.29 17:54
</div>
<div class="check">

</div>
</td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</body>
</html>

출처: https://kkotkkio.tistory.com/79 [KKOTKKIO'S CAVE]
* {
  margin: 0;
  padding: 0;
}
body {
  font-size: 11px;
}
.chat_list_wrap {
  list-style: none;
}
.chat_list_wrap .header {
  font-size: 14px;
  padding: 15px 0;
  background: #F18C7E;
  color: white;
  text-align: center;
  font-family: "Josefin Sans", sans-serif;
}
.chat_list_wrap .search {
  background: #eee;
  padding: 5px;
}
.chat_list_wrap .search input[type="text"] {
  width: 100%;
  border-radius: 4px;
  padding: 5px 0;
  border: 0;
  text-align: center;
}
.chat_list_wrap .list {
  padding: 0 16px;
}
.chat_list_wrap .list ul {
  width: 100%;
  list-style: none;
  margin-top: 3px;
}
.chat_list_wrap .list ul li {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
}
.chat_list_wrap .list ul li table {
  width: 100%;
}
.chat_list_wrap .list ul li table td.profile_td {
  width: 50px;
  padding-right: 11px;
}
.chat_list_wrap .list ul li table td.profile_td img {
  width: 50px;
  height: auto;
}
.chat_list_wrap .list ul li table td.chat_td .email {
  font-size: 12px;
  font-weight: bold;
}
.chat_list_wrap .list ul li table td.time_td {
  width: 90px;
  text-align: center;
}
.chat_list_wrap .list ul li table td.time_td .time {
  padding-bottom: 4px;
}
.chat_list_wrap .list ul li table td.time_td .check p {
  width: 5px;
  height: 5px;
  margin: 0 auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #e51c23;
}


출처: https://kkotkkio.tistory.com/79 [KKOTKKIO'S CAVE]

 

 

 

출처 : kkotkkio.tistory.com/79

'css' 카테고리의 다른 글

다양한 선택자 ( + , ~, first-child, only-child, last-child, nth-child(a))  (0) 2022.05.14
CSS 선택자의 종류  (0) 2021.03.31
[자바스크립트] 채팅 구현 코드 (프론트)  (0) 2021.03.23
css - 부모 자식 선택자  (0) 2021.03.19
한줄로 된 css, javascript 정렬 하기  (0) 2021.03.10
'css' Related Articles more