2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
e345d62a 2 parents 62bc94bb cce0dc64

Merge branch 'master' of ssh://khuhub.khu.ac.kr:12959/2020-1-capstone-design1/Triz_Project1

Inline Side-by-side
Showing 8 changed files with 198 additions and 68 deletions
...@@ -13,14 +13,16 @@ ...@@ -13,14 +13,16 @@
13 <h1><a href="main.html" color:black>KHU Chatting service</a></h1> 13 <h1><a href="main.html" color:black>KHU Chatting service</a></h1>
14 <img src="image/welcome.jpg" class="image"> 14 <img src="image/welcome.jpg" class="image">
15 15
16 - <div id="grid"> 16 +<div id="grid">
17 - <ol> 17 + <div id="category">
18 + <ol class="center">
18 <li><a href="whatiskhuchat.html" class="saw">What is KHU chat? </a></li> 19 <li><a href="whatiskhuchat.html" class="saw">What is KHU chat? </a></li>
19 <li><a href="loginmain.html" class="saw">로그인</a></li> 20 <li><a href="loginmain.html" class="saw">로그인</a></li>
20 <li><a href="signinmain.html" class="saw">회원가입</a></li> 21 <li><a href="signinmain.html" class="saw">회원가입</a></li>
21 <li><a href="question.html" class="saw">문의사항</a></li> 22 <li><a href="question.html" class="saw">문의사항</a></li>
22 <li><a href="afterlogin.html" class="saw">로그인이후</a></li> 23 <li><a href="afterlogin.html" class="saw">로그인이후</a></li>
23 </ol> 24 </ol>
25 + </div>
24 <div id="service"> 26 <div id="service">
25 <h2>로그인후 접속되는 페이지로 만들기</h2> 27 <h2>로그인후 접속되는 페이지로 만들기</h2>
26 <form action="service/chatservice.html" id="chat"> 28 <form action="service/chatservice.html" id="chat">
...@@ -42,10 +44,8 @@ ...@@ -42,10 +44,8 @@
42 <label for="randomchat">랜덤채팅:</label> 44 <label for="randomchat">랜덤채팅:</label>
43 <input type="submit" value="랜덤채팅"> 45 <input type="submit" value="랜덤채팅">
44 </form> 46 </form>
45 -
46 </div> 47 </div>
47 </div> 48 </div>
48 49
49 -
50 </body> 50 </body>
51 </html> 51 </html>
......
1 -<!DOCTYPE html> 1 +<!doctype html>
2 <html> 2 <html>
3 - <head> 3 +<head>
4 + <title>WEB - CSS</title>
4 <meta charset="utf-8"> 5 <meta charset="utf-8">
5 - <title></title>
6 <style> 6 <style>
7 - div{ 7 + body{
8 - border:10px solid green; 8 + margin:0;
9 - font-size:100px;
10 } 9 }
11 - @media(min-width:800px){ 10 + a {
12 - div{ 11 + color:black;
13 - display:none; 12 + text-decoration: none;
13 + }
14 + h1 {
15 + font-size:45px;
16 + text-align: center;
17 + border-bottom:1px solid gray;
18 + margin:0;
19 + padding:20px;
20 + }
21 + ol{
22 + border-right:1px solid gray;
23 + width:100px;
24 + margin:0;
25 + padding:20px;
26 + }
27 + #grid{
28 + display: grid;
29 + grid-template-columns: 150px 1fr;
30 + }
31 + #grid ol{
32 + padding-left:33px;
33 + }
34 + #grid #article{
35 + padding-left:25px;
36 + }
37 + @media(max-width:800px){
38 + #grid{
39 + display: block;
40 + }
41 + ol{
42 + border-right:none;
43 + }
44 + h1 {
45 + border-bottom:none;
14 } 46 }
15 } 47 }
16 </style> 48 </style>
17 - </head> 49 +</head>
18 - <body> 50 +<body>
19 - <div> 51 + <h1><a href="index.html">WEB</a></h1>
20 - Responsive 52 + <div id="grid">
53 + <ol>
54 + <li><a href="1.html">HTML</a></li>
55 + <li><a href="2.html">CSS</a></li>
56 + <li><a href="3.html">JavaScript</a></li>
57 + </ol>
58 + <div id="article">
59 + <h2>CSS</h2>
60 + <p>
61 + 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.
62 + </p>
63 + </div>
21 </div> 64 </div>
22 </body> 65 </body>
23 -</html> 66 + </html>
......
...@@ -4,40 +4,33 @@ ...@@ -4,40 +4,33 @@
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="style.css"> 6 <link rel="stylesheet" href="style.css">
7 -<style>
8 -
9 -</style>
10 </head> 7 </head>
11 <body> 8 <body>
12 9
13 <h1><a href="main.html" color:black>KHU Chatting service</a></h1> 10 <h1><a href="main.html" color:black>KHU Chatting service</a></h1>
14 <img src="image/login.jpg" class="image"> 11 <img src="image/login.jpg" class="image">
15 - 12 +<div class="media" id="grid">
16 - <div id="grid"> 13 + <div id="category">
17 - <ol> 14 + <ol class="center">
18 <li><a href="whatiskhuchat.html" class="saw">What is KHU chat? </a></li> 15 <li><a href="whatiskhuchat.html" class="saw">What is KHU chat? </a></li>
19 <li><a href="loginmain.html" class="saw">로그인</a></li> 16 <li><a href="loginmain.html" class="saw">로그인</a></li>
20 <li><a href="signinmain.html" class="saw">회원가입</a></li> 17 <li><a href="signinmain.html" class="saw">회원가입</a></li>
21 <li><a href="question.html" class="saw">문의사항</a></li> 18 <li><a href="question.html" class="saw">문의사항</a></li>
22 <li><a href="afterlogin.html" class="saw">로그인이후</a></li> 19 <li><a href="afterlogin.html" class="saw">로그인이후</a></li>
23 </ol> 20 </ol>
21 + </div>
24 <div id="article"> 22 <div id="article">
25 <h2>로그인 </h2> 23 <h2>로그인 </h2>
26 <form class="formlogin" action="loginmain.html" method="post" id="login"> 24 <form class="formlogin" action="loginmain.html" method="post" id="login">
27 - <label for="email">Email:</label><br> 25 + <label for="email">이메일:</label><br>
28 - <input type="text" id="Email" name="email"><br> 26 + <input type="text" id="Email" name="email" placeholder="이메일을 입력하세요."><br>
29 - <label for="password">password:</label><br> 27 + <label for="password">비밀번호:</label><br>
30 - <input type="password" id="password" name="password"><br><br> 28 + <input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요."><br><br>
31 - <input type="submit" value="로그인"><br> 29 + <input type="submit" value="로그인">
32 - </form> 30 + <input type="button" value="회원가입" onclick="location.href='signinmain.html'">
33 - <form class="formlogin" action="signinmain.html" id="signin">
34 - <input type="submit" value="회원가입">
35 -
36 </form> 31 </form>
37 -
38 </div> 32 </div>
39 - </div> 33 +</div>
40 -
41 34
42 </body> 35 </body>
43 </html> 36 </html>
......
...@@ -4,23 +4,23 @@ ...@@ -4,23 +4,23 @@
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="style.css"> 6 <link rel="stylesheet" href="style.css">
7 -<style>
8 7
9 -</style>
10 </head> 8 </head>
11 <body> 9 <body>
12 10
13 <h1><a href="main.html" color:black>KHU Chatting service</a></h1> 11 <h1><a href="main.html" color:black>KHU Chatting service</a></h1>
14 <img src="image/main2.jpg" class="image"> 12 <img src="image/main2.jpg" class="image">
15 13
16 - <div id="grid"> 14 +<div id="grid">
17 - <ol> 15 + <div id="category">
16 + <ol class="center">
18 <li><a href="whatiskhuchat.html" class="saw">What is KHU chat? </a></li> 17 <li><a href="whatiskhuchat.html" class="saw">What is KHU chat? </a></li>
19 <li><a href="loginmain.html" class="saw">로그인</a></li> 18 <li><a href="loginmain.html" class="saw">로그인</a></li>
20 <li><a href="signinmain.html" class="saw">회원가입</a></li> 19 <li><a href="signinmain.html" class="saw">회원가입</a></li>
21 <li><a href="question.html" class="saw">문의사항</a></li> 20 <li><a href="question.html" class="saw">문의사항</a></li>
22 <li><a href="afterlogin.html" class="saw">로그인이후</a></li> 21 <li><a href="afterlogin.html" class="saw">로그인이후</a></li>
23 </ol> 22 </ol>
23 + </div>
24 <div id="article"> 24 <div id="article">
25 <h2><a href=https://www.helpshift.com/glossary/chat-service/ 25 <h2><a href=https://www.helpshift.com/glossary/chat-service/
26 title="what is chat service">chat service란 무엇인가?</a></h2> 26 title="what is chat service">chat service란 무엇인가?</a></h2>
...@@ -32,9 +32,7 @@ ...@@ -32,9 +32,7 @@
32 <p> 32 <p>
33 KHU chat service는 무엇인가요? 33 KHU chat service는 무엇인가요?
34 </p> 34 </p>
35 -
36 -
37 - </div>
38 </div> 35 </div>
36 +</div>
39 </body> 37 </body>
40 </html> 38 </html>
......
...@@ -10,20 +10,20 @@ ...@@ -10,20 +10,20 @@
10 <h1><a href="main.html" color:black>KHU Chatting service</a></h1> 10 <h1><a href="main.html" color:black>KHU Chatting service</a></h1>
11 <img src="image/question.jpg" class="image"> 11 <img src="image/question.jpg" class="image">
12 12
13 - <div id="grid"> 13 +<div id="grid">
14 - <ol> 14 + <div id="category">
15 + <ol class="center">
15 <li><a href="whatiskhuchat.html" class="saw">What is KHU chat?</a></li> 16 <li><a href="whatiskhuchat.html" class="saw">What is KHU chat?</a></li>
16 <li><a href="loginmain.html" class="saw">로그인</a></li> 17 <li><a href="loginmain.html" class="saw">로그인</a></li>
17 <li><a href="signinmain.html" class="saw">회원가입</a></li> 18 <li><a href="signinmain.html" class="saw">회원가입</a></li>
18 <li><a href="question.html" class="saw">문의사항</a></li> 19 <li><a href="question.html" class="saw">문의사항</a></li>
19 </ol> 20 </ol>
21 + </div>
20 <div id="article"> 22 <div id="article">
21 <h2>문의사항</h2> 23 <h2>문의사항</h2>
22 <p>Do you have any question? 24 <p>Do you have any question?
23 </p> 25 </p>
24 </div> 26 </div>
25 - </div> 27 +</div>
26 -
27 -
28 </body> 28 </body>
29 </html> 29 </html>
......
...@@ -4,39 +4,38 @@ ...@@ -4,39 +4,38 @@
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="style.css"> 6 <link rel="stylesheet" href="style.css">
7 -<style>
8 7
9 -</style>
10 8
11 </head> 9 </head>
12 <body> 10 <body>
13 11
14 <h1><a href="main.html" color:black>KHU Chatting service</a></h1> 12 <h1><a href="main.html" color:black>KHU Chatting service</a></h1>
15 <img src="image/signin.jpg" class="image"> 13 <img src="image/signin.jpg" class="image">
16 - 14 +<div class="media" id="grid">
17 - <div id="grid"> 15 + <div id="category">
18 - <ol> 16 + <ol class="center">
19 <li><a href="whatiskhuchat.html" class="saw">What is KHU chat? </a></li> 17 <li><a href="whatiskhuchat.html" class="saw">What is KHU chat? </a></li>
20 <li><a href="loginmain.html" class="saw">로그인</a></li> 18 <li><a href="loginmain.html" class="saw">로그인</a></li>
21 <li><a href="signinmain.html" class="saw">회원가입</a></li> 19 <li><a href="signinmain.html" class="saw">회원가입</a></li>
22 <li><a href="question.html" class="saw">문의사항</a></li> 20 <li><a href="question.html" class="saw">문의사항</a></li>
23 <li><a href="afterlogin.html" class="saw">로그인이후</a></li> 21 <li><a href="afterlogin.html" class="saw">로그인이후</a></li>
24 </ol> 22 </ol>
23 + </div>
25 <div id="article"> 24 <div id="article">
26 <h2>회원가입</h2> 25 <h2>회원가입</h2>
27 <div id="inputset"> 26 <div id="inputset">
28 <form class="signinform" action="loginmain.html"> 27 <form class="signinform" action="loginmain.html">
29 - <label for="email">Email:</label><br> 28 + <label for="email">이메일:</label><br>
30 - <input type="text" name="email"><br> 29 + <input type="text" name="email" placeholder="이메일을 입력하세요."><br>
31 30
32 - <label for="password">password:</label><br> 31 + <label for="password">비밀번호:</label><br>
33 - <input type="password" name="password"><br> 32 + <input type="password" name="password" placeholder="비밀번호를 입력하세요."><br>
34 33
35 <label for="name">이름:</label><br> 34 <label for="name">이름:</label><br>
36 - <input type="text" name="name"><br> 35 + <input type="text" name="name"placeholder="이름을 입력하세요."><br>
37 36
38 <label for="age">나이:</label><br> 37 <label for="age">나이:</label><br>
39 - <input type="text" name="age"><br><br> 38 + <input type="text" name="age" placeholder="나이를 입력하세요."><br><br>
40 39
41 <label for="sex">성별:</label><br> 40 <label for="sex">성별:</label><br>
42 <input type="radio" value="man" name="sex">남자<br> 41 <input type="radio" value="man" name="sex">남자<br>
...@@ -57,11 +56,8 @@ ...@@ -57,11 +56,8 @@
57 <input type="submit" value="회원가입신청"> 56 <input type="submit" value="회원가입신청">
58 </form> 57 </form>
59 </div> 58 </div>
60 -
61 -
62 - </div>
63 </div> 59 </div>
64 - 60 +</div>
65 61
66 </body> 62 </body>
67 </html> 63 </html>
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
29 display: block; 29 display: block;
30 margin-left: auto; 30 margin-left: auto;
31 margin-right: auto; 31 margin-right: auto;
32 - width: 60%; 32 + width: 50%;
33 margin-bottom:10px; 33 margin-bottom:10px;
34 34
35 } 35 }
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
38 color: black; 38 color: black;
39 text-decoration: none; 39 text-decoration: none;
40 } 40 }
41 +
41 #grid 42 #grid
42 { 43 {
43 display: grid; 44 display: grid;
...@@ -64,4 +65,103 @@ ...@@ -64,4 +65,103 @@
64 padding-left: 20px; 65 padding-left: 20px;
65 /*grid안에 #article */ 66 /*grid안에 #article */
66 } 67 }
68 +
69 + @media (min-width:300px) and (max-width:700px){
70 + #grid
71 + {
72 + display: block;
73 + }
74 + h1
75 + {
76 + text-align:center;
77 + color:"black";
78 + margin:0;
79 + padding:20px
80 + }
81 + ol
82 + {
83 + border-right:none;
84 + margin-left:35px;
85 + padding-left:60px;
86 + }
87 + #grid #category
88 + {
89 + border-bottom: 1px solid gray;
90 +
91 + }
92 +
93 + #grid ol
94 + {
95 + padding-left: 40px;
96 + margin:0;
97 + font-size: 15px;
98 +
99 + }
100 + #grid li
101 + {
102 + padding-top: 10px;
103 + padding-bottom: 10px;
104 + font-size:15px;
105 +
106 + }
107 + #grid #article
108 + {
109 + padding-top: 10px;
110 + padding-bottom: 10px;
111 + padding-left: 20px;
112 +
113 + /*grid안에 #article */
114 + }
115 + }
116 +
117 + @media (min-width:700px) and (max-width:1024px){
118 +
119 + #grid
120 + {
121 + display: block;
122 + }
123 + h1
124 + {
125 + text-align:center;
126 + color:"black";
127 + margin:0;
128 + padding:20px
129 + }
130 + ol
131 + {
132 + border-right:none;
133 + margin-left:35px;
134 + padding-left:60px;
135 + display: inline-block;
136 + }
137 + #grid #category
138 + {
139 + border-bottom: 1px solid gray;
140 + text-align: center;
141 + list-style-position: inside;
142 + }
143 +
144 + #grid ol
145 + {
146 + padding-left: 40px;
147 + margin:0;
148 + font-size: 15px;
149 +
150 + }
151 + #grid li
152 + {
153 + padding-top: 10px;
154 + padding-bottom: 10px;
155 + font-size:15px;
156 + }
157 + #grid #article
158 + {
159 + padding-top: 10px;
160 + padding-bottom: 10px;
161 + padding-left: 20px;
162 + text-align: center;
163 + /*grid안에 #article */
164 + }
165 +
166 + }
67 </style> 167 </style>
......
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
9 9
10 <h1><a href="main.html" color:black>KHU Chatting service</a></h1> 10 <h1><a href="main.html" color:black>KHU Chatting service</a></h1>
11 <img src="image/main2.jpg" class="image"> 11 <img src="image/main2.jpg" class="image">
12 - 12 +<div id="grid">
13 - <div id="grid"> 13 + <div id="category">
14 <ol> 14 <ol>
15 <li><a href="whatiskhuchat.html" class="saw">What is KHU chat? </a></li> 15 <li><a href="whatiskhuchat.html" class="saw">What is KHU chat? </a></li>
16 <li><a href="loginmain.html" class="saw">로그인</a></li> 16 <li><a href="loginmain.html" class="saw">로그인</a></li>
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
18 <li><a href="signinmain.html" class="saw">문의사항</a></li> 18 <li><a href="signinmain.html" class="saw">문의사항</a></li>
19 <li><a href="afterlogin.html" class="saw">로그인이후</a></li> 19 <li><a href="afterlogin.html" class="saw">로그인이후</a></li>
20 </ol> 20 </ol>
21 + </div>
21 <div id="article"> 22 <div id="article">
22 <h2>KHU chat service란?</a></h2> 23 <h2>KHU chat service란?</a></h2>
23 <p>we have random chat service and 24 <p>we have random chat service and
...@@ -33,8 +34,7 @@ ...@@ -33,8 +34,7 @@
33 </p> 34 </p>
34 35
35 </div> 36 </div>
36 - </div> 37 +</div>
37 -
38 38
39 </body> 39 </body>
40 </html> 40 </html>
......