2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
MinsoftK
305363bd 1 parent 1ac93952

modify directory name from previous to web 

add image,service,ex(etc folder) foler and classify html files
Inline Side-by-side
Showing 22 changed files with 203 additions and 68 deletions
# Capstone design
\ No newline at end of file
body {
margin: 0;
}
h1 {
text-align: center;
color: "black";
margin: 0;
padding: 20px;
}
a {
color: "black";
text-decoration: none;
}
ol {
border-right: 1px solid gray;
width: 150px;
margin: 50px;
padding: 20px;
}
.image {
display: block;
margin-left: auto;
margin-right: auto;
width: 60%;
margin-bottom: 10px;
}
.saw {
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: 20px;
/*grid안에 #article */
}
<!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>
<!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>
No preview for this file type
......@@ -4,11 +4,14 @@
<title>KHU KHU Chat</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<h1><a href="main.html" color:black>KHU Chatting service</a></h1>
<img src="image/main2.jpg" class="image">
<img src="image/login.jpg" class="image">
<div id="grid">
<ol>
......@@ -17,11 +20,28 @@
<li><a href="signinmain.html" class="saw">회원가입</a></li>
<li><a href="question.html" class="saw">문의사항</a></li>
</ol>
<div id="article">
<h2>여기에 로그인창 만들기</h2>
<p>This is chating application which chat your frineds, coworkers and anyone do you want <br>
so enjoy it out sevice.
</p>
<div id="service">
<h2>로그인후 접속되는 페이지로 만들기</h2>
<form action="service/chatservice.html" id="chat">
<label for="chatservice">친구와 채팅하기</label>
<input type="submit" value="채팅">
</form>
<form action="service/makefriend.html" id="makefriend">
<label for="makefriend">친구만들기</label>
<input type="submit" value="친구만들기">
</form>
<form action="service/addfriend.html" id="addfriend">
<label for="makefriend">친구추가하기:</label>
<input type="submit" value="친구추가하기">
</form>
<form action="randomchat.html" id="randomchat">
<label for="randomchat">랜덤채팅:</label>
<input type="submit" value="랜덤채팅">
</form>
</div>
</div>
......
......@@ -4,11 +4,14 @@
<title>KHU KHU Chat</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<h1><a href="main.html" color:black>KHU Chatting service</a></h1>
<img src="image/login.jpg" class="image">
<img src="image/main2.jpg" class="image">
<div id="grid">
<ol>
......@@ -18,12 +21,20 @@
<li><a href="question.html" class="saw">문의사항</a></li>
</ol>
<div id="article">
<h2>로그인 페이지</h2>
<h2>로그인 </h2>
<form class="formlogin" action="loginmain.html" id="login">
<label for="email">mail:</label><br>
<input type="text" id="Email" name="email"><br>
<label for="password">password:</label><br>
<input type="text" id="password" name="password"><br><br>
<input type="submit" value="로그인"><br>
</form>
<form class="formlogin" action="signinmain.html" id="signin">
<input type="submit" value="회원가입">
</form>
</div>
</div>
</body>
</html>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border:10px solid green;
font-size:100px;
}
@media(min-width:800px){
div{
display:none;
}
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html>
......@@ -4,6 +4,15 @@
<title>KHU KHU Chat</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<style>
#inputset
{
align="center";
}
</style>
</head>
<body>
......@@ -12,13 +21,24 @@
<div id="grid">
<ol>
<li><a href="whatiskhuchat.html" class="saw">What is KHU? </a></li>
<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>
</ol>
<div id="article">
<h2>회원가입</h2>
<div id="inputset"
<form class="signin" action="loginmain.html" id="signin">
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<label for="pasword">Password:</label>
<input type="text" id="password" name="password"><br><br>
<label for="interesting">관심사:</label>
<input type="text" id="interesting" name="interesting"><br><br>
<input type="submit" value="회원가입신청">
</form>
</div>
</div>
......
<style>
body
{
margin:0;
}
h1
{
text-align:center;
color:"black";
margin:0;
padding:20px
}
a
{
color:"black";
text-decoration: none;
}
ol
{
border-right:1px solid gray;
width:150px;
margin:50px;
padding:20px;
}
.image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 60%;
margin-bottom:10px;
}
.saw
{
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: 20px;
/*grid안에 #article */
}
</style>
......@@ -12,7 +12,7 @@
<div id="grid">
<ol>
<li><a href="whatiskhuchat.html" class="saw">What is KHU? </a></li>
<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>
......@@ -20,9 +20,10 @@
<div id="article">
<h2><a href=https://www.helpshift.com/glossary/chat-service/
title="what is chat service">chat service란 무엇인가?</a></h2>
<p>This is chating application which chat your frineds, coworkers and anyone do you want <br>
so enjoy it out sevice.
</p>
<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>
......