2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
MinsoftK
51008a41 1 parent 6ba502cd

setting media query modify OL to inlin block

Inline Side-by-side
Showing 9 changed files with 162 additions and 125 deletions
...@@ -13,7 +13,8 @@ ...@@ -13,7 +13,8 @@
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 + <div id="category">
17 <ol> 18 <ol>
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>
...@@ -21,6 +22,7 @@ ...@@ -21,6 +22,7 @@
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>
......
...@@ -3,18 +3,14 @@ ...@@ -3,18 +3,14 @@
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="mediaquery.css">
7 <link rel="stylesheet" href="style.css"> 6 <link rel="stylesheet" href="style.css">
8 -<style>
9 -
10 -</style>
11 </head> 7 </head>
12 <body> 8 <body>
13 9
14 <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>
15 <img src="image/login.jpg" class="image"> 11 <img src="image/login.jpg" class="image">
16 - 12 +<div class="media" id="grid">
17 - <div id="grid"> 13 + <div id="category">
18 <ol> 14 <ol>
19 <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>
20 <li><a href="loginmain.html" class="saw">로그인</a></li> 16 <li><a href="loginmain.html" class="saw">로그인</a></li>
...@@ -22,6 +18,7 @@ ...@@ -22,6 +18,7 @@
22 <li><a href="question.html" class="saw">문의사항</a></li> 18 <li><a href="question.html" class="saw">문의사항</a></li>
23 <li><a href="afterlogin.html" class="saw">로그인이후</a></li> 19 <li><a href="afterlogin.html" class="saw">로그인이후</a></li>
24 </ol> 20 </ol>
21 + </div>
25 <div id="article"> 22 <div id="article">
26 <h2>로그인 </h2> 23 <h2>로그인 </h2>
27 <form class="formlogin" action="loginmain.html" method="post" id="login"> 24 <form class="formlogin" action="loginmain.html" method="post" id="login">
...@@ -32,10 +29,8 @@ ...@@ -32,10 +29,8 @@
32 <input type="submit" value="로그인"> 29 <input type="submit" value="로그인">
33 <input type="button" value="회원가입" onclick="location.href='signinmain.html'"> 30 <input type="button" value="회원가입" onclick="location.href='signinmain.html'">
34 </form> 31 </form>
35 -
36 - </div>
37 </div> 32 </div>
38 - 33 +</div>
39 34
40 </body> 35 </body>
41 </html> 36 </html>
......
...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
11 <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>
12 <img src="image/main2.jpg" class="image"> 12 <img src="image/main2.jpg" class="image">
13 13
14 - <div id="grid"> 14 +<div id="grid">
15 + <div id="category">
15 <ol> 16 <ol>
16 <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>
17 <li><a href="loginmain.html" class="saw">로그인</a></li> 18 <li><a href="loginmain.html" class="saw">로그인</a></li>
...@@ -19,6 +20,7 @@ ...@@ -19,6 +20,7 @@
19 <li><a href="question.html" class="saw">문의사항</a></li> 20 <li><a href="question.html" class="saw">문의사항</a></li>
20 <li><a href="afterlogin.html" class="saw">로그인이후</a></li> 21 <li><a href="afterlogin.html" class="saw">로그인이후</a></li>
21 </ol> 22 </ol>
23 + </div>
22 <div id="article"> 24 <div id="article">
23 <h2><a href=https://www.helpshift.com/glossary/chat-service/ 25 <h2><a href=https://www.helpshift.com/glossary/chat-service/
24 title="what is chat service">chat service란 무엇인가?</a></h2> 26 title="what is chat service">chat service란 무엇인가?</a></h2>
...@@ -30,9 +32,7 @@ ...@@ -30,9 +32,7 @@
30 <p> 32 <p>
31 KHU chat service는 무엇인가요? 33 KHU chat service는 무엇인가요?
32 </p> 34 </p>
33 -
34 -
35 - </div>
36 </div> 35 </div>
36 +</div>
37 </body> 37 </body>
38 </html> 38 </html>
......
1 -<style>
2 -
3 -@media screen(min-width:320px) and (max-width:480px){
4 - #grid
5 - {
6 - display: grid;
7 - grid-template-rows: 250px 1fr;
8 - border-top:1px solid gray;
9 -
10 - }
11 - #grid ol
12 - {
13 - padding-left: 40px;
14 - margin:0;
15 - font-size: 15px;
16 - }
17 - #grid li
18 - {
19 - padding-top: 10px;
20 - padding-bottom: 10px;
21 - font-size:15px;
22 - }
23 - #grid #article
24 - {
25 - padding-top: 10px;
26 - padding-bottom: 10px;
27 - padding-left: 20px;
28 - /*grid안에 #article */
29 - }
30 -}
31 -@media screen(min-width:480px) and (max-width:800px){
32 -
33 - #grid
34 - {
35 - display: grid;
36 - grid-template-columns: 600px 1fr;
37 - border-top:1px solid gray;
38 -
39 - }
40 - #grid ol
41 - {
42 - padding-left: 40px;
43 - margin:0;
44 - font-size: 15px;
45 - }
46 - #grid li
47 - {
48 - padding-top: 10px;
49 - padding-bottom: 10px;
50 - font-size:15px;
51 - }
52 - #grid #article
53 - {
54 - padding-top: 10px;
55 - padding-bottom: 10px;
56 - padding-left: 20px;
57 - /*grid안에 #article */
58 - }
59 -
60 -
61 -
62 -
63 -
64 -}
65 -
66 -
67 -
68 -
69 -
70 -
71 -</style>
...@@ -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 + <div id="category">
14 <ol> 15 <ol>
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,17 +4,15 @@ ...@@ -4,17 +4,15 @@
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>
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>
...@@ -22,6 +20,7 @@ ...@@ -22,6 +20,7 @@
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">
...@@ -33,10 +32,10 @@ ...@@ -33,10 +32,10 @@
33 <input type="password" name="password" placeholder="비밀번호를 입력하세요."><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>
......
...@@ -38,26 +38,98 @@ ...@@ -38,26 +38,98 @@
38 color: black; 38 color: black;
39 text-decoration: none; 39 text-decoration: none;
40 } 40 }
41 - @media screen(min-width:320px) and (max-width:480px){ 41 +
42 #grid 42 #grid
43 { 43 {
44 display: grid; 44 display: grid;
45 - grid-template-rows: 250px 1fr; 45 + grid-template-columns: 250px 1fr;
46 border-top:1px solid gray; 46 border-top:1px solid gray;
47 47
48 } 48 }
49 + #grid ol
50 + {
51 + padding-left: 40px;
52 + margin:0;
53 + font-size: 15px;
54 + }
55 + #grid li
56 + {
57 + padding-top: 10px;
58 + padding-bottom: 10px;
59 + font-size:15px;
60 + }
61 + #grid #article
62 + {
63 + padding-top: 10px;
64 + padding-bottom: 10px;
65 + padding-left: 20px;
66 + /*grid안에 #article */
49 } 67 }
50 - @media screen(min-width:480px) and (max-width:800px){
51 68
69 + @media (min-width:300px) and (max-width:480px){
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 + }
85 + #category
86 + {
87 + border-bottom: 1px solid gray;
52 } 88 }
53 89
90 + #grid ol
91 + {
92 + padding-left: 40px;
93 + margin:0;
94 + font-size: 15px;
95 + }
96 + #grid li
97 + {
98 + padding-top: 10px;
99 + padding-bottom: 10px;
100 + font-size:15px;
101 + }
102 + #grid #article
103 + {
104 + padding-top: 10px;
105 + padding-bottom: 10px;
106 + padding-left: 20px;
107 + /*grid안에 #article */
108 + }
109 + }
110 +
111 + @media (min-width:480px) and (max-width:800px){
54 #grid 112 #grid
55 { 113 {
56 - display: grid; 114 + display: block;
57 - grid-template-columns: 250px 1fr; 115 + }
58 - border-top:1px solid gray; 116 + h1
117 + {
118 + text-align:center;
119 + color:"black";
120 + margin:0;
121 + padding:20px
122 + }
123 + ol
124 + {
125 + border-right:none;
59 126
60 } 127 }
128 + #category
129 + {
130 + border-bottom: 1px solid gray;
131 + }
132 +
61 #grid ol 133 #grid ol
62 { 134 {
63 padding-left: 40px; 135 padding-left: 40px;
...@@ -77,4 +149,6 @@ ...@@ -77,4 +149,6 @@
77 padding-left: 20px; 149 padding-left: 20px;
78 /*grid안에 #article */ 150 /*grid안에 #article */
79 } 151 }
152 +
153 + }
80 </style> 154 </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>
......