2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
642216e0 1 parent e17012f5

remove unnecessary files

Inline Side-by-side
Showing 45 changed files with 0 additions and 1566 deletions
<style>
a:visited{color:black;}
a:active {color: black;}
a:hover {color:black;}
a:link {color:black;}
a{text-decoration: none;color: black;}
.banner{
display:block;
}
#khu-logo{
font-size: 0;
padding: 0;
border:none;
}
#khu-logo-font{
font-family: 'Black Han Sans', sans-serif;
align-content: center;
font-size:20px;
line-height: inherit;
display: inline-block;
padding: 5;
border:none;
}
.khu-nav{
padding:20px;
height:center;
background-color: white;
border-bottom: 1px solid #ebeaeb;
}
.khu-nav-row{
height: 100%;
display:flex;
justify-content: space-between;
padding-left: 200px;
padding-right: 200px;
}
#khu-start-button{
font-family: 'Black Han Sans', sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: 0 0;
border: none;
cursor: pointer;
border-radius: 4px;
text-align: center;
background-color: #611f69;
color: #fff;
fill: #fff;
padding: 10px;
}
@media screen and (min-width:0) and (max-width:767px){.khu-nav-row{padding:0 4vw}
</style>
a:visited{color:black;}
a:active {color: black;}
a:hover {color:black;}
a:link {color:black;}
a{text-decoration: none;color: black;}
.banner{
display:block;
}
#khu-logo{
font-size: 0;
padding: 0;
border:none;
}
#khu-logo-font{
font-family: 'Black Han Sans', sans-serif;
align-content: center;
font-size:20px;
line-height: inherit;
display: inline-block;
padding: 5;
border:none;
}
.khu-nav{
padding:20px;
height:center;
background-color: white;
border-bottom: 1px solid #ebeaeb;
}
.khu-nav-row{
height: 100%;
display:flex;
justify-content: space-between;
padding-left: 200px;
padding-right: 200px;
}
#khu-start-button{
font-family: 'Black Han Sans', sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: 0 0;
border: none;
cursor: pointer;
border-radius: 4px;
text-align: center;
background-color: #611f69;
color: #fff;
fill: #fff;
padding: 10px;
}
@media screen and (min-width:0) and (max-width:767px)
{
.khu-nav-row{padding:0 4vw;}
}
\ No newline at end of file
import ChatContainer_CSS from ChatContainer_CSS.css
import ChatContainer_CSS from ChatContainer_CSS.css
var Click={
Launchclick:function(color){
// var alist=document.querySelectorAll('a');
// var i =0;
// while(i<alist.length)
// {
// alist[i].style.color=color;
// i+=1;
// }
// }
//$('a').css('color',color); //jquery 사용한 것.
}
}
var Body = {
SetColor:function(color){
//document.querySelector('body').style.color= color;
$('body').css('color',color);
},
SetBackGruondColor:function(color){
//document.querySelector('body').style.backgroundColor= color;
$('body').css('backgroundColor',color);
}
}
function nightDayHandler(self){
if(self.value==='night')
{
Body.SetBackGruondColor('black')
Body.SetColor('white');
self.value= 'day';
Links.SetColor('powderblue');
}else{
Body.SetBackGruondColor('white')
Body.SetColor('black');
self.value= 'night';
Links.SetColor('blue');
}
}
<!doctype html>
<html>
<head>
<title>KHU KHU Chat</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../style/style.css">
</head>
<body>
<h1><a href="../main.html" color:black>KHU Chatting service</a></h1>
<img src="../image/main2.jpg" class="image">
<div id="grid">
<div id="category">
<ol>
<li><a href="whatiskhuchat.html" class="saw">What is KHU chat? </a></li>
<li><a href="../loginmain.html" class="saw">로그인</a></li>
<li><a href="../signinmain.html" class="saw">회원가입</a></li>
<li><a href="../signinmain.html" class="saw">문의사항</a></li>
<li><a href="../afterlogin.html" class="saw">로그인이후</a></li>
</ol>
</div>
<div id="article">
<h2>KHU chat service란?</a></h2>
<p>we have random chat service and
you can talk with freinds who have your interestings.
</p>
<h3>KHU chat의 장점은?</a></h3>
<p>
what difference.
</p>
<h3>KHU chat의 차별성은?</a></h3>
<p>
what difference.
</p>
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<title>KHU KHU Chat</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script>
function LinksSetColor(color){
var alist=document.querySelectorAll('a');
var i =0;
while(i<alist.length)
{
alist[i].style.color=color;
i+=1;
}
}
var Body={
setColor:function(color){
}
}
function bodySetColor(color){
document.querySelector('body').style.color= color;
}
function bodySetBackGruondColor(color){
document.querySelector('body').style.backgroundColor= color;
}
function nightDayHandler(self){
if(self.value==='night')
{
bodySetBackGruondColor('black')
bodySetColor('white');
self.value= 'day';
setColor('powderblue');
}else{
bodySetBackGruondColor('white')
bodySetColor('black');
self.value= 'night';
setColor('blue');
}
}
</script>
</head>
<body>
<h1><a href="main.html" color:black>KHU Chatting service</a></h1>
<img src="image/signin.jpg" class="image">
<!--refactoring and conditional statement -->
<!-- about this grammer
<input type="button" value="night" onclick="
if(this.value==='night')
{
document.querySelector('body').style.backgroundColor= 'black';
document.querySelector('body').style.color= 'white';
this.value= 'day';
}else{
document.querySelector('body').style.backgroundColor= 'white';
document.querySelector('body').style.color= 'black';
this.value= 'night';
}
">
-->
<!-- about array
<script>
var cowokers=["minsing","minsoft"];
document.write(cowokers[0]);
document.write(cowokers[1]);
cowokers.push("ssssss")
document.write(cowokers);
</script>
-->
<!-- about Loop
<ul>
<script>
var i=0;
while(i<3)
{
document.write("<li>var</li>")
i+=1;
}
</script>
</ul>
-->
<!--Loop & Array
<script>
var cowokers=["minsung","leezche","minsoft","sdy"];
</script>
<script>
var i=0;
while( i< cowokers.length ){
document.write('<li><a href="http://a.com/'+cowokers[i]+'">'+cowokers[i]+'</a></li>');
i+=1;
}
</script>
-->
<!-- Loop apply
var alist=document.querySelectorAll('a');
var i =0;
while(i<alist.length){
console.log(alist[i]);
i+=1;
}
-->
<!-- button 1 usage array and Loop for chage style
self를 통한 input의 객체 지정해주기
지정해주기전에는 전역객체를 가르키게 된다.
-->
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<!-- button2 making and using function -->
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<div id="grid">
<ol>
<li><a href="whatiskhuchat.html" class="saw">What is KHU chat? </a></li>
<li><a href="loginmain.html" class="saw">로그인</a></li>
<li><a href="signinmain.html" class="saw">회원가입</a></li>
<li><a href="question.html" class="saw">문의사항</a></li>
<li><a href="afterlogin.html" class="saw">로그인이후</a></li>
</ol>
<div id="article">
<h2>회원가입</h2>
<div id="inputset">
<form class="signinform" action="loginmain.html">
<label for="email">Email:</label><br>
<input type="text" name="email"><br>
<label for="password">password:</label><br>
<input type="password" name="password"><br>
<label for="name">이름:</label><br>
<input type="text" name="name"><br>
<label for="age">나이:</label><br>
<input type="text" name="age"><br><br>
<label for="sex">성별:</label><br>
<input type="radio" value="man" name="sex">남자<br>
<input type="radio" value="woman" name="sex">여자<br><br>
<label for="work">직업:</label><br>
<input type="radio" value="nowork" name="work">무직<br>
<input type="radio" value="Hstudent" name="work">중/고생<br>
<input type="radio" value="Ustudent" name="work">대학생<br>
<input type="radio" value="worker" name="work">직장인<br><br>
<label for="interesting">관심사(중복선택가능):</label><br>
<input type="checkbox" value="movie" name="interesting">영화<br>
<input type="checkbox" value="song" name="interesting">노래<br>
<input type="checkbox" value="study" name="interesting">공부<br>
<input type="checkbox" value="coding" name="interesting">코딩<br><br>
<input type="submit" value="회원가입신청">
</form>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>KHU chat box model test</title>
<style>
h1,a {
border:5px solid red;
padding:5px;
margin:20px;
width:100px;
}
</style>
</head>
<body>
<h1>Test</h1><br> This is <a href="index.html">test</a> site.
</body>
</html>
var Links={
SetColor:function(color){
// var alist=document.querySelectorAll('a');
// var i =0;
// while(i<alist.length)
// {
// alist[i].style.color=color;
// i+=1;
// }
// }
$('a').css('color',color); //jquery 사용한 것.
}
}
var Body = {
SetColor:function(color){
//document.querySelector('body').style.color= color;
$('body').css('color',color);
},
SetBackGruondColor:function(color){
//document.querySelector('body').style.backgroundColor= color;
$('body').css('backgroundColor',color);
}
}
function nightDayHandler(self){
if(self.value==='night')
{
Body.SetBackGruondColor('black')
Body.SetColor('white');
self.value= 'day';
Links.SetColor('powderblue');
}else{
Body.SetBackGruondColor('white')
Body.SetColor('black');
self.value= 'night';
Links.SetColor('blue');
}
}
<!DOCTYPE html>
<html>
<script src="../fetch-master/fetch.js"></script>
<body>
<input type="button" value="fetch" onclick="
fetch('css').then(function(response){
response.text().then(function(text){
alert(text);
})
});
">
</body>
</html>
<!doctype html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
<script src="../fetch-master/fetch.js"></script>
</head>
<body>
<h1><a href="#!welcome">WEB</a></h1>
<h1><a href="index.html">WEB</a></h1>
<h2><a href="welcome.html">Welcome</h2>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<ol id="nav">
</ol>
<article>
</article>
<script>
function fetchPage(name){
fetch(name).then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML=text;
})
});
}
if(location.hash){
fetchPage(location.hash.substr(2));
}else{
fetchPage('welcome');
}
fetch('list').then(function(response){
response.text().then(function(text){
document.querySelector('#nav').innerHTML=text;
})
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border-color: pink;
display:grid;
grid-template-columns: 150px 1fr;
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div> ARTICLE</div>
</div>
<!-- div(무생무체와 같은 태그 의미가 없음,디자인 용도)
는 block element span은 inline element -->
</body>
</html>
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
body{
margin:0;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left:33px;
}
#grid #article{
padding-left:25px;
}
@media(max-width:800px){
#grid{
display: block;
}
ol{
border-right:none;
}
h1 {
border-bottom:none;
}
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id="article">
<h2>CSS</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>how to make object</h1>
<script>
var coworkers = {
"designer":"minsung",
"programmer":"sdy"
};
document.write("programmer: "+coworkers.programmer+"<br>");
document.write("designer: "+coworkers.designer+"<br>");
coworkers.bookkeeper="duru";
document.write("bookkeeper: "+coworkers.bookkeeper+"<br>");
coworkers["data scientist"] ="taeho";
document.write("data scientist: "+coworkers["data scientist"]+"<br>");
</script>
<h2>iterate</h2>
<h2>property & method</h2>
<script>
coworker.showAll =function(){
for(var key in this){
document.write(key+' : ' +this[key]+'<br>');
}
}
coworkers.showAll();
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<title>KHU KHU Chat</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
//color.js 앞에 jquery 써줘야함
</script>
<script src="colors.js"></script>
</head>
<body>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<!-- button2 making and using function -->
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<div id="grid">
<ol>
<li><a href="whatiskhuchat.html" class="saw"> What is KHU chat? </a><
<ul>test</ul>
<ul>test</ul>
<ul>test</ul>
</li>
<li><a href="loginmain.html" class="saw">로그인</a>
<ul>Profile</ul>
</li>
<li><a href="signinmain.html" class="saw">회원가입</a></li>
<li><a href="question.html" class="saw">문의사항</a></li>
<li><a href="afterlogin.html" class="saw">로그인이후</a></li>
</ol>
<div id="article">
<h2>회원가입</h2>
<div id="inputset">
<form class="signinform" action="loginmain.html">
<label for="email">Email:</label><br>
<input type="text" name="email"><br>
<label for="password">password:</label><br>
<input type="password" name="password"><br>
<label for="name">이름:</label><br>
<input type="text" name="name"><br>
<label for="age">나이:</label><br>
<input type="text" name="age"><br><br>
<label for="sex">성별:</label><br>
<input type="radio" value="man" name="sex">남자<br>
<input type="radio" value="woman" name="sex">여자<br><br>
<label for="work">직업:</label><br>
<input type="radio" value="nowork" name="work">무직<br>
<input type="radio" value="Hstudent" name="work">중/고생<br>
<input type="radio" value="Ustudent" name="work">대학생<br>
<input type="radio" value="worker" name="work">직장인<br><br>
<label for="interesting">관심사(중복선택가능):</label><br>
<input type="checkbox" value="movie" name="interesting">영화<br>
<input type="checkbox" value="song" name="interesting">노래<br>
<input type="checkbox" value="study" name="interesting">공부<br>
<input type="checkbox" value="coding" name="interesting">코딩<br><br>
<input type="submit" value="회원가입신청">
</form>
</div>
</div>
</div>
</body>
</html>
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="comments" class="svg-inline--fa fa-comments fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M532 386.2c27.5-27.1 44-61.1 44-98.2 0-80-76.5-146.1-176.2-157.9C368.3 72.5 294.3 32 208 32 93.1 32 0 103.6 0 192c0 37 16.5 71 44 98.2-15.3 30.7-37.3 54.5-37.7 54.9-6.3 6.7-8.1 16.5-4.4 25 3.6 8.5 12 14 21.2 14 53.5 0 96.7-20.2 125.2-38.8 9.2 2.1 18.7 3.7 28.4 4.9C208.1 407.6 281.8 448 368 448c20.8 0 40.8-2.4 59.8-6.8C456.3 459.7 499.4 480 553 480c9.2 0 17.5-5.5 21.2-14 3.6-8.5 1.9-18.3-4.4-25-.4-.3-22.5-24.1-37.8-54.8zm-392.8-92.3L122.1 305c-14.1 9.1-28.5 16.3-43.1 21.4 2.7-4.7 5.4-9.7 8-14.8l15.5-31.1L77.7 256C64.2 242.6 48 220.7 48 192c0-60.7 73.3-112 160-112s160 51.3 160 112-73.3 112-160 112c-16.5 0-33-1.9-49-5.6l-19.8-4.5zM498.3 352l-24.7 24.4 15.5 31.1c2.6 5.1 5.3 10.1 8 14.8-14.6-5.1-29-12.3-43.1-21.4l-17.1-11.1-19.9 4.6c-16 3.7-32.5 5.6-49 5.6-54 0-102.2-20.1-131.3-49.7C338 339.5 416 272.9 416 192c0-3.4-.4-6.7-.7-10C479.7 196.5 528 238.8 528 288c0 28.7-16.2 50.6-29.7 64z"></path></svg>
\ No newline at end of file
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.<br />
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.<br />
You will also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.<br />
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.<br />
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.<br />
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
### Analyzing the Bundle Size
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
### Making a Progressive Web App
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
### Advanced Configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
### Deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
### `npm run build` fails to minify
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
This diff could not be displayed because it is too large.
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"styled-components": "^5.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<i class="far fa-comments fa-7x"></i>
<div id="root">
<ll>list1
<ul>profile</ul>
<ul>profile</ul>
<ul>profile</ul>
<ul>profile</ul>
</ll>
</div>
</div>
</body>
</html>
import styled from "styled-components";
import React from 'react';
const GlobalGrid = styled.div`
display: grid;
justify-content: space-between;
grid-template-columns: 150px 150px;
`;
const Profile_Grid = styled.div`
display: flex;
grid-gap:5px;
grid-row-gap: 50px;
`;
// this information get from database
export default () => {
return (
<GlobalGrid>
<Profile_Grid>
</Profile_Grid>
</GlobalGrid>
);
};
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="comments" class="svg-inline--fa fa-comments fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M532 386.2c27.5-27.1 44-61.1 44-98.2 0-80-76.5-146.1-176.2-157.9C368.3 72.5 294.3 32 208 32 93.1 32 0 103.6 0 192c0 37 16.5 71 44 98.2-15.3 30.7-37.3 54.5-37.7 54.9-6.3 6.7-8.1 16.5-4.4 25 3.6 8.5 12 14 21.2 14 53.5 0 96.7-20.2 125.2-38.8 9.2 2.1 18.7 3.7 28.4 4.9C208.1 407.6 281.8 448 368 448c20.8 0 40.8-2.4 59.8-6.8C456.3 459.7 499.4 480 553 480c9.2 0 17.5-5.5 21.2-14 3.6-8.5 1.9-18.3-4.4-25-.4-.3-22.5-24.1-37.8-54.8zm-392.8-92.3L122.1 305c-14.1 9.1-28.5 16.3-43.1 21.4 2.7-4.7 5.4-9.7 8-14.8l15.5-31.1L77.7 256C64.2 242.6 48 220.7 48 192c0-60.7 73.3-112 160-112s160 51.3 160 112-73.3 112-160 112c-16.5 0-33-1.9-49-5.6l-19.8-4.5zM498.3 352l-24.7 24.4 15.5 31.1c2.6 5.1 5.3 10.1 8 14.8-14.6-5.1-29-12.3-43.1-21.4l-17.1-11.1-19.9 4.6c-16 3.7-32.5 5.6-49 5.6-54 0-102.2-20.1-131.3-49.7C338 339.5 416 272.9 416 192c0-3.4-.4-6.7-.7-10C479.7 196.5 528 238.8 528 288c0 28.7-16.2 50.6-29.7 64z"></path></svg>
\ No newline at end of file
import React from 'react';
import ReactDOM from 'react-dom';
import ChatRoom_Grid from './ChatContainer_Set/ChatRoom_Grid';
ReactDOM.render(
<React.StrictMode>
<ChatRoom_Grid>
<ul>
test1
</ul>
</ChatRoom_Grid>
</React.StrictMode>,
document.getElementById('root')
);
body{
background-color: powderblue;
}
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
import React,{ Component } from 'react';
import './main.css';
class HelloKhu extends Component {
render(){
return (
<div className="HelloKhu">
Hello, This is Khu!!
</div>
);
}
}
class KhuIcon extends Component {
render(){
return (
<a target="_blank" href="./index.html">
<img alt="" src="../img/Khu_Chat_Icon.svg" height="34" title="Khu_chat"></img>
</a>
);
}
}
export default () => {
return (
<>
<KhuIcon />
<HelloKhu />
</>
)
};
<!doctype html>
<html>
<head>
<title>KHU KHU Chat</title>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/Banner.css">
<script src="https://kit.fontawesome.com/6a5db0a2e0.js" crossorigin="anonymous"></script>
<link rel="icon" href="https://kit.fontawesome.com/6a5db0a2e0.js" />
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
<script src="JS/main.js"></script>
</head>
<body>
<header role="banner">
<nav class="khu-nav" role="navigation" aria-label="Primary navigation">
<div class="khu-nav-row">
<div class="khu-logo">
<a id="khu-logo" data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-logo" data-qa="logo">
<img src="img/Khu_Chat_Icon.svg" width="30px" hegiht="20px" alt="Khu Chat">
</a>
<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">
Khu Chat
</a>
</div>
<div class ="khu-login" >
<a data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-logo-font" data-qa="logo">
Login
</a>
</div>
<div class="khu-signin">
<a data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-logo-font" data-qa="logo">
Sign in
</a>
</div>
<div class="khu-start-button">
<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">
Launch Chating
</a>
</div>
</div>
</nav>
</header>
<div id="article">
<h2><a class data-clog-click="" data-clog-ui-element="link_home" href=https://www.helpshift.com/glossary/chat-service/
title="what is chat service">chat service란?</a></h2>
<p>This is chating application which chats with your frineds, coworkers and anyone do you want <br>
so enjoy it out sevice.
</p>
</div>
</div>
</body>
</html>
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon.woff') format('woff'),
url('../fonts/icomoon.ttf') format('truetype'),
url('../fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.dr-menu {
width: 100%;
max-width: 400px;
min-width: 300px;
position: relative;
font-size: 1.3em;
line-height: 2.5;
font-weight: 400;
color: #fff;
padding-top: 2em;
}
.dr-menu > div {
cursor: pointer;
position: absolute;
width: 100%;
z-index: 100;
}
.dr-menu > div .dr-icon {
top: 0;
left: 0;
position: absolute;
font-size: 150%;
line-height: 1.6;
padding: 0 10px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.dr-menu.dr-menu-open > div .dr-icon {
color: #60a773;
left: 100%;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.dr-menu > div .dr-icon:after {
content: "\e008";
position: absolute;
font-size: 50%;
line-height: 3.25;
left: -10%;
opacity: 0;
}
.dr-menu.dr-menu-open > div .dr-icon:after {
opacity: 1;
}
.dr-menu > div .dr-label {
padding-left: 3em;
position: relative;
display: block;
color: #60a773;
font-size: 0.9em;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 2.75;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.dr-menu.dr-menu-open > div .dr-label {
-webkit-transform: translateY(-90%);
-moz-transform: translateY(-90%);
-ms-transform: translateY(-90%);
transform: translateY(-90%);
}
.dr-menu ul {
padding: 0;
margin: 0 3em 0 0;
list-style: none;
opacity: 0;
position: relative;
z-index: 0;
pointer-events: none;
-webkit-transition: opacity 0s linear 205ms;
-moz-transition: opacity 0s linear 205ms;
transition: opacity 0s linear 205ms;
}
.dr-menu.dr-menu-open ul {
opacity: 1;
z-index: 200;
pointer-events: auto;
-webkit-transition: opacity 0s linear 0s;
-moz-transition: opacity 0s linear 0s;
transition: opacity 0s linear 0s;
}
.dr-menu ul li {
display: block;
margin: 0 0 5px 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.dr-menu.dr-menu-open ul li {
opacity: 1;
}
.dr-menu.dr-menu-open ul li:nth-child(2) {
-webkit-transition-delay: 35ms;
-moz-transition-delay: 35ms;
transition-delay: 35ms;
}
.dr-menu.dr-menu-open ul li:nth-child(3) {
-webkit-transition-delay: 70ms;
-moz-transition-delay: 70ms;
transition-delay: 70ms;
}
.dr-menu.dr-menu-open ul li:nth-child(4) {
-webkit-transition-delay: 105ms;
-moz-transition-delay: 105ms;
transition-delay: 105ms;
}
.dr-menu.dr-menu-open ul li:nth-child(5) {
-webkit-transition-delay: 140ms;
-moz-transition-delay: 140ms;
transition-delay: 140ms;
}
.dr-menu.dr-menu-open ul li:nth-child(6) {
-webkit-transition-delay: 175ms;
-moz-transition-delay: 175ms;
transition-delay: 175ms;
}
.dr-menu.dr-menu-open ul li:nth-child(7) {
-webkit-transition-delay: 205ms;
-moz-transition-delay: 205ms;
transition-delay: 205ms;
}
.dr-menu ul li a {
display: inline-block;
padding: 0 20px;
color: #fff;
}
.dr-menu ul li a:hover {
color: #60a773;
}
.dr-icon:before,
.dr-icon:after {
position: relative;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.dr-menu ul .dr-icon:before {
margin-right: 15px;
}
.dr-icon-bullhorn:before {
content: "\e000";
}
.dr-icon-camera:before {
content: "\e002";
}
.dr-icon-heart:before {
content: "\e003";
}
.dr-icon-settings:before {
content: "\e004";
}
.dr-icon-switch:before {
content: "\e005";
}
.dr-icon-download:before {
content: "\e006";
}
.dr-icon-user:before {
content: "\e001";
}
.dr-icon-menu:before {
content: "\e007";
}
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body, html { font-size: 100%; padding: 0; margin: 0;}
/* Reset */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #fff;
background: #91cfa1;
font-weight: 300;
}
a {
color: #f0f0f0;
text-decoration: none;
}
a:hover {
color: #fff;
}
.main,
.container > header {
width: 100%;
margin: 0 auto;
padding: 0 1.875em 3.125em 1.875em;
}
.main {
max-width: 69em;
min-height: 600px;
padding: 2em 0 0 0;
}
.side {
float: right;
width: 30%;
padding-right: 20px;
min-width: 320px;
box-shadow: 1px 0 rgba(0,0,0,0.1);
}
.main p {
font-size: 2em;
padding: 0 1em;
margin: 0;
line-height: 1.5;
float: right;
width: 70%;
}
.container > header {
padding: 2.875em 1.875em 2.875em;
text-align: center;
background: rgba(0,0,0,0.02);
}
.container > header h1 {
font-size: 2.625em;
line-height: 1.3;
margin: 0;
color: #fff;
font-weight: 300;
}
.container > header span {
display: block;
font-size: 60%;
color: rgba(255,255,255,0.7);
padding: 0 0 0.6em 0.1em;
}
/* Header Style */
.codrops-top {
background: #fff;
background: rgba(255, 255, 255, 0.85);
text-transform: uppercase;
position: relative;
font-size: 0.68em;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
line-height: 2.2;
}
.codrops-top a {
padding: 0 1em;
letter-spacing: 0.1em;
color: #333;
display: inline-block;
}
.codrops-top a:hover {
background: rgba(255,255,255,0.99);
color: #000;
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
@media screen and (max-width: 66.9375em) {
.side, .main p {
float: none;
width: 100%;
box-shadow: none;
padding: 1em;
}
.main p {
font-size: 130%;
}
}
\ No newline at end of file
<style>
title{
}
body
{
margin:0;
}
h1
{
text-align:center;
color:"black";
margin:0;
padding:20px
}
a
{
color:"black";
text-decoration: none;
}
ol
{
width:150px;
margin:50px;
padding:20px;
}
.inputset{
margin-bottom: 20px;
}
.image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-bottom:10px;
}
.dr-icon
{
color: black;
text-decoration: none;
}
#grid
{
display: grid;
grid-template-columns: 250px 1fr;
border-top:1px solid gray;
}
#grid ol
{
padding-left: 40px;
margin:0;
font-size: 15px;
}
#grid li
{
padding-top: 10px;
padding-bottom: 10px;
font-size:15px;
}
#grid #article
{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 130px;
border-left:1px solid gray;
/*grid안에 #article */
}
@media (min-width:300px) and (max-width:700px){
#grid
{
display: block;
}
h1
{
text-align:center;
color:"black";
margin:0;
padding:20px
}
ol
{
border-right:none;
margin-left:35px;
padding-left:60px;
}
#grid #category
{
border-bottom: 1px solid gray;
}
#grid ol
{
padding-left: 40px;
margin:0;
font-size: 15px;
}
#grid li
{
padding-top: 10px;
padding-bottom: 10px;
font-size:15px;
}
#grid #article
{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
display: inline-block;
/*grid안에 #article */
}
}
@media (min-width:700px) and (max-width:1024px){
#grid
{
display: block;
}
h1
{
text-align:center;
color:"black";
margin:0;
padding:20px
}
ol
{
border-right:none;
margin-left:35px;
padding-left:60px;
display: inline-block;
}
#grid #category
{
border-bottom: 1px solid gray;
text-align: center;
list-style-position: inside;
}
#grid ol
{
padding-left: 40px;
margin:0;
font-size: 15px;
}
#grid li
{
padding-top: 10px;
padding-bottom: 10px;
font-size:15px;
}
#grid #article
{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
text-align: center;
/*grid안에 #article */
}
}
</style>