- Today
- Total
CODE CAVE
간단한 모바일웹 채팅 UI (리스트) HTML 코드 본문
<!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>
* {
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;
}
말 그대로 채팅 리스트 UI 라서 HTML과 CSS만 올립니다 ㅎㅎ
LESS로 작성해서 컴파일 했습니다.
HTML/CSS 잘하시는 분들은 금방 만드시겠지만 초중급자 분들 중에 회사에서 빨리 만들라고 했는데
시간은 없고 할때 ㅎㅎ 복붙해서 활용하시면 좋을듯!
그냥 카카오톡과 거의 흡사한 디자인 입니다~
보통 채팅 앱 디자인이 비슷비슷 하죠 뭐ㅎㅎ! 응용하셔도 될듯
아직 LESS 안써보신 분들은 LESS도 강추드립니다.
CSS를 작성하는 속도도 좋고 가독성도 좋아져서 중복되는 부분을 복붙하거나 추후 유지보수 하기에도 강력합니다.
'ETC. > TIP' 카테고리의 다른 글
| [맥/리눅스] mysql 텍스트 인코딩 euc-kr 에서 utf-8로 변경하기 (0) | 2016.10.31 |
|---|---|
| 메타태그로 페이스북/카카오톡 링크 공유시 미리보기 썸네일 이미지 변경하기 (1) | 2016.10.06 |
| 모바일 웹 카카오톡 공유 기능 구현하기! (0) | 2016.08.19 |
| [정보보안개론] 9~10장 연습문제 풀이 (0) | 2016.08.16 |
| [IntelliJ/인텔리제이] 유용한 단축키 (0) | 2016.07.29 |
