2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
minsung
c5e2dafa 1 parent 8803269b

rewrite

Inline Side-by-side
Showing 22 changed files with 234 additions and 73 deletions
1 +import ChatContainer_CSS from ChatContainer_CSS.css
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 4
5 <title>KHU Chat</title> 5 <title>KHU Chat</title>
6 <meta charset="utf-8"> 6 <meta charset="utf-8">
7 - <link rel="stylesheet" href="CSS/Banner.css"> 7 + <link rel="stylesheet" href="style/style.css">
8 <script src="https://kit.fontawesome.com/6a5db0a2e0.js" crossorigin="anonymous"></script> 8 <script src="https://kit.fontawesome.com/6a5db0a2e0.js" crossorigin="anonymous"></script>
9 <link rel="icon" href="https://kit.fontawesome.com/6a5db0a2e0.js" /> 9 <link rel="icon" href="https://kit.fontawesome.com/6a5db0a2e0.js" />
10 <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet"> 10 <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
......
...@@ -21,8 +21,14 @@ ...@@ -21,8 +21,14 @@
21 21
22 <div id="grid"> 22 <div id="grid">
23 <ol> 23 <ol>
24 - <li><a href="whatiskhuchat.html" class="saw">What is KHU chat? </a></li> 24 + <li><a href="whatiskhuchat.html" class="saw"> What is KHU chat? </a><
25 - <li><a href="loginmain.html" class="saw">로그인</a></li> 25 + <ul>test</ul>
26 + <ul>test</ul>
27 + <ul>test</ul>
28 + </li>
29 + <li><a href="loginmain.html" class="saw">로그인</a>
30 + <ul>Profile</ul>
31 + </li>
26 <li><a href="signinmain.html" class="saw">회원가입</a></li> 32 <li><a href="signinmain.html" class="saw">회원가입</a></li>
27 <li><a href="question.html" class="saw">문의사항</a></li> 33 <li><a href="question.html" class="saw">문의사항</a></li>
28 <li><a href="afterlogin.html" class="saw">로그인이후</a></li> 34 <li><a href="afterlogin.html" class="saw">로그인이후</a></li>
......
...@@ -3,55 +3,38 @@ ...@@ -3,55 +3,38 @@
3 <head> 3 <head>
4 <title>KHU KHU Chat</title> 4 <title>KHU KHU Chat</title>
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6 -<link rel="stylesheet" href="CSS/Banner.css"> 6 +<link rel="stylesheet" href="style/style.css">
7 -<script src="https://kit.fontawesome.com/6a5db0a2e0.js" crossorigin="anonymous"></script> 7 +<style>
8 -<link rel="icon" href="https://kit.fontawesome.com/6a5db0a2e0.js" /> 8 +
9 -<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet"> 9 +</style>
10 -<script src="JS/main.js"></script>
11 </head> 10 </head>
12 <body> 11 <body>
13 -<header role="banner">
14 - <nav class="khu-nav" role="navigation" aria-label="Primary navigation">
15 - <div class="khu-nav-row">
16 - <div class="khu-logo">
17 - <a id="khu-logo" data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-logo" data-qa="logo">
18 - <img src="img/Khu_Chat_Icon.svg" width="30px" hegiht="20px" alt="Khu Chat">
19 - </a>
20 -
21 - <a id="khu-logo-font" data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-logo-font" data-qa="logo">
22 - Khu Chat
23 - </a>
24 - </div>
25 - <div class ="khu-login" >
26 - <a data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-logo-font" data-qa="logo">
27 - Login
28 - </a>
29 - </div>
30 - <div class="khu-signin">
31 - <a data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-logo-font" data-qa="logo">
32 - Sign in
33 - </a>
34 - </div>
35 - <div class="khu-start-button">
36 - <a id="khu-start-button" href="afterlogin.html" data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-start-button" data-qa="logo">
37 - Launch Chating
38 - </a>
39 - </div>
40 -
41 12
42 -</div> 13 + <h1><a href="main.html" color:black>KHU Chatting service</a></h1>
43 -</nav> 14 + <img src="image/main2.jpg" class="image">
44 15
45 -</header> 16 + <div id="grid">
46 - <div id="article"> 17 + <ol>
47 - <h2><a class data-clog-click="" data-clog-ui-element="link_home" href=https://www.helpshift.com/glossary/chat-service/ 18 + <li><a href="whatiskhuchat.html" class="saw">What is KHU chat? </a></li>
48 - title="what is chat service">chat service란?</a></h2> 19 + <li><a href="loginmain.html" class="saw">로그인</a></li>
49 - <p>This is chating application which chats with your frineds, coworkers and anyone do you want <br> 20 + <li><a href="signinmain.html" class="saw">회원가입</a></li>
50 - so enjoy it out sevice. 21 + <li><a href="question.html" class="saw">문의사항</a></li>
51 - </p> 22 + </ol>
23 + <div id="article">
24 + <h2>로그인 </h2>
25 + <form class="formlogin" action="member.html" id="login">
26 + <label for="email">mail:</label><br>
27 + <input type="text" id="Email" name="email"><br>
28 + <label for="password">password:</label><br>
29 + <input type="password" id="password" name="password"><br><br>
30 + <input type="submit" value="로그인"><br>
31 + </form>
32 + <form class="formlogin" action="signinmain.html" id="signin">
33 + <input type="submit" value="회원가입">
52 34
35 + </form>
53 36
37 + </div>
54 </div> 38 </div>
55 -</div>
56 </body> 39 </body>
57 </html> 40 </html>
......
...@@ -1078,6 +1078,29 @@ ...@@ -1078,6 +1078,29 @@
1078 "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", 1078 "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
1079 "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" 1079 "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
1080 }, 1080 },
1081 + "@emotion/is-prop-valid": {
1082 + "version": "0.8.8",
1083 + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
1084 + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
1085 + "requires": {
1086 + "@emotion/memoize": "0.7.4"
1087 + }
1088 + },
1089 + "@emotion/memoize": {
1090 + "version": "0.7.4",
1091 + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
1092 + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
1093 + },
1094 + "@emotion/stylis": {
1095 + "version": "0.8.5",
1096 + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
1097 + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
1098 + },
1099 + "@emotion/unitless": {
1100 + "version": "0.7.5",
1101 + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
1102 + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
1103 + },
1081 "@hapi/address": { 1104 "@hapi/address": {
1082 "version": "2.1.4", 1105 "version": "2.1.4",
1083 "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", 1106 "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
...@@ -2627,6 +2650,22 @@ ...@@ -2627,6 +2650,22 @@
2627 "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz", 2650 "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz",
2628 "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA==" 2651 "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA=="
2629 }, 2652 },
2653 + "babel-plugin-styled-components": {
2654 + "version": "1.10.7",
2655 + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz",
2656 + "integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==",
2657 + "requires": {
2658 + "@babel/helper-annotate-as-pure": "^7.0.0",
2659 + "@babel/helper-module-imports": "^7.0.0",
2660 + "babel-plugin-syntax-jsx": "^6.18.0",
2661 + "lodash": "^4.17.11"
2662 + }
2663 + },
2664 + "babel-plugin-syntax-jsx": {
2665 + "version": "6.18.0",
2666 + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
2667 + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
2668 + },
2630 "babel-plugin-syntax-object-rest-spread": { 2669 "babel-plugin-syntax-object-rest-spread": {
2631 "version": "6.13.0", 2670 "version": "6.13.0",
2632 "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", 2671 "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
...@@ -3227,6 +3266,11 @@ ...@@ -3227,6 +3266,11 @@
3227 "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", 3266 "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
3228 "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" 3267 "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
3229 }, 3268 },
3269 + "camelize": {
3270 + "version": "1.0.0",
3271 + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
3272 + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
3273 + },
3230 "caniuse-api": { 3274 "caniuse-api": {
3231 "version": "3.0.0", 3275 "version": "3.0.0",
3232 "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", 3276 "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
...@@ -3847,6 +3891,11 @@ ...@@ -3847,6 +3891,11 @@
3847 "postcss": "^7.0.5" 3891 "postcss": "^7.0.5"
3848 } 3892 }
3849 }, 3893 },
3894 + "css-color-keywords": {
3895 + "version": "1.0.0",
3896 + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
3897 + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
3898 + },
3850 "css-color-names": { 3899 "css-color-names": {
3851 "version": "0.0.4", 3900 "version": "0.0.4",
3852 "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", 3901 "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
...@@ -3937,6 +3986,16 @@ ...@@ -3937,6 +3986,16 @@
3937 "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", 3986 "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
3938 "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" 3987 "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
3939 }, 3988 },
3989 + "css-to-react-native": {
3990 + "version": "3.0.0",
3991 + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
3992 + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
3993 + "requires": {
3994 + "camelize": "^1.0.0",
3995 + "css-color-keywords": "^1.0.0",
3996 + "postcss-value-parser": "^4.0.2"
3997 + }
3998 + },
3940 "css-tree": { 3999 "css-tree": {
3941 "version": "1.0.0-alpha.37", 4000 "version": "1.0.0-alpha.37",
3942 "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", 4001 "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
...@@ -6108,6 +6167,14 @@ ...@@ -6108,6 +6167,14 @@
6108 "minimalistic-crypto-utils": "^1.0.1" 6167 "minimalistic-crypto-utils": "^1.0.1"
6109 } 6168 }
6110 }, 6169 },
6170 + "hoist-non-react-statics": {
6171 + "version": "3.3.2",
6172 + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
6173 + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
6174 + "requires": {
6175 + "react-is": "^16.7.0"
6176 + }
6177 + },
6111 "hosted-git-info": { 6178 "hosted-git-info": {
6112 "version": "2.8.8", 6179 "version": "2.8.8",
6113 "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", 6180 "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
...@@ -11822,6 +11889,11 @@ ...@@ -11822,6 +11889,11 @@
11822 } 11889 }
11823 } 11890 }
11824 }, 11891 },
11892 + "shallowequal": {
11893 + "version": "1.1.0",
11894 + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
11895 + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
11896 + },
11825 "shebang-command": { 11897 "shebang-command": {
11826 "version": "1.2.0", 11898 "version": "1.2.0",
11827 "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", 11899 "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
...@@ -12510,6 +12582,23 @@ ...@@ -12510,6 +12582,23 @@
12510 } 12582 }
12511 } 12583 }
12512 }, 12584 },
12585 + "styled-components": {
12586 + "version": "5.1.1",
12587 + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.1.1.tgz",
12588 + "integrity": "sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg==",
12589 + "requires": {
12590 + "@babel/helper-module-imports": "^7.0.0",
12591 + "@babel/traverse": "^7.4.5",
12592 + "@emotion/is-prop-valid": "^0.8.8",
12593 + "@emotion/stylis": "^0.8.4",
12594 + "@emotion/unitless": "^0.7.4",
12595 + "babel-plugin-styled-components": ">= 1",
12596 + "css-to-react-native": "^3.0.0",
12597 + "hoist-non-react-statics": "^3.0.0",
12598 + "shallowequal": "^1.1.0",
12599 + "supports-color": "^5.5.0"
12600 + }
12601 + },
12513 "stylehacks": { 12602 "stylehacks": {
12514 "version": "4.0.3", 12603 "version": "4.0.3",
12515 "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", 12604 "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
......
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
8 "@testing-library/user-event": "^7.2.1", 8 "@testing-library/user-event": "^7.2.1",
9 "react": "^16.13.1", 9 "react": "^16.13.1",
10 "react-dom": "^16.13.1", 10 "react-dom": "^16.13.1",
11 - "react-scripts": "3.4.1" 11 + "react-scripts": "3.4.1",
12 + "styled-components": "^5.1.1"
12 }, 13 },
13 "scripts": { 14 "scripts": {
14 "start": "react-scripts start", 15 "start": "react-scripts start",
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 - <meta charset="utf-8" /> 4 +
5 - <script src="https://kit.fontawesome.com/6a5db0a2e0.js" crossorigin="anonymous"></script>
6 - <link rel="icon" href="https://kit.fontawesome.com/6a5db0a2e0.js" />
7 -
8 - <title>React App</title>
9 - <div id="Khu-logo">
10 - <a target="_blank" href="./index.html">
11 - <img alt="" src="../img/Khu_Chat_Icon.svg" height="34" title="Khu_chat"></img>
12 - </a>
13 - </div>
14 </head> 5 </head>
15 <body> 6 <body>
16 <i class="far fa-comments fa-7x"></i> 7 <i class="far fa-comments fa-7x"></i>
17 - <div id="root"></div> 8 + <div id="root">
18 - <!-- 9 + <ll>list1
19 - This HTML file is a template. 10 +
20 - If you open it directly in the browser, you will see an empty page. 11 + <ul>profile</ul>
21 - 12 + <ul>profile</ul>
22 - You can add webfonts, meta tags, or analytics to this file. 13 + <ul>profile</ul>
23 - The build step will place the bundled scripts into the <body> tag. 14 + <ul>profile</ul>
15 + </ll>
24 16
25 - To begin the development, run `npm start` or `yarn start`. 17 + </div>
26 - To create a production bundle, use `npm run build` or `yarn build`. 18 + </div>
27 - -->
28 </body> 19 </body>
29 </html> 20 </html>
......
1 +import styled from "styled-components";
2 +import React from 'react';
3 +
4 +const GlobalGrid = styled.div`
5 + display: grid;
6 + grid-template-colums:auto;
7 + grid-gap:5px;
8 + border-radius: 40px;
9 + border: none;
10 + outline: 5px;
11 + text-align: left;
12 + background-color: #ebebeb;
13 + opacity: 0.5;
14 + font-size: 20px;
15 +`;
16 +const Profile_Grid = styled.div`
17 + display: flex;
18 + grid-gap:5px;
19 + grid-row-gap: 50px;
20 +`;
21 +
22 +// this information get from database
23 +
24 +export default () => {
25 + return (
26 + <GlobalGrid>
27 + <Profile_Grid>
28 +
29 + </Profile_Grid>
30 + </GlobalGrid>
31 + );
32 +};
1 import React from 'react'; 1 import React from 'react';
2 import ReactDOM from 'react-dom'; 2 import ReactDOM from 'react-dom';
3 -import './mainpage/main.css'; 3 +import ChatRoom_Grid from './ChatContainer_Set/ChatRoom_Grid';
4 -
5 -import HelloKhu from './mainpage/main';
6 -
7 -
8 4
9 ReactDOM.render( 5 ReactDOM.render(
10 <React.StrictMode> 6 <React.StrictMode>
11 - <HelloKhu/> 7 + <ChatRoom_Grid>
8 + <ul>
9 + test1
10 + </ul>
11 + </ChatRoom_Grid>
12 </React.StrictMode>, 12 </React.StrictMode>,
13 document.getElementById('root') 13 document.getElementById('root')
14 ); 14 );
15 +
......
1 +<!doctype html>
2 +<html>
3 +<head>
4 +<title>KHU KHU Chat</title>
5 +<meta charset="utf-8">
6 +<link rel="stylesheet" href="CSS/Banner.css">
7 +<script src="https://kit.fontawesome.com/6a5db0a2e0.js" crossorigin="anonymous"></script>
8 +<link rel="icon" href="https://kit.fontawesome.com/6a5db0a2e0.js" />
9 +<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
10 +<script src="JS/main.js"></script>
11 +</head>
12 +<body>
13 +<header role="banner">
14 + <nav class="khu-nav" role="navigation" aria-label="Primary navigation">
15 + <div class="khu-nav-row">
16 + <div class="khu-logo">
17 + <a id="khu-logo" data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-logo" data-qa="logo">
18 + <img src="img/Khu_Chat_Icon.svg" width="30px" hegiht="20px" alt="Khu Chat">
19 + </a>
20 +
21 + <a id="khu-logo-font" data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-logo-font" data-qa="logo">
22 + Khu Chat
23 + </a>
24 + </div>
25 + <div class ="khu-login" >
26 + <a data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-logo-font" data-qa="logo">
27 + Login
28 + </a>
29 + </div>
30 + <div class="khu-signin">
31 + <a data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-logo-font" data-qa="logo">
32 + Sign in
33 + </a>
34 + </div>
35 + <div class="khu-start-button">
36 + <a id="khu-start-button" href="afterlogin.html" data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-start-button" data-qa="logo">
37 + Launch Chating
38 + </a>
39 + </div>
40 +
41 +
42 +</div>
43 +</nav>
44 +
45 +</header>
46 + <div id="article">
47 + <h2><a class data-clog-click="" data-clog-ui-element="link_home" href=https://www.helpshift.com/glossary/chat-service/
48 + title="what is chat service">chat service란?</a></h2>
49 + <p>This is chating application which chats with your frineds, coworkers and anyone do you want <br>
50 + so enjoy it out sevice.
51 + </p>
52 +
53 +
54 + </div>
55 +</div>
56 +</body>
57 +</html>