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 @@
<h1><a href="main.html" color:black>KHU Chatting service</a></h1>
<img src="image/welcome.jpg" class="image">
<div id="grid">
<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>
......@@ -21,6 +22,7 @@
<li><a href="question.html" class="saw">문의사항</a></li>
<li><a href="afterlogin.html" class="saw">로그인이후</a></li>
</ol>
</div>
<div id="service">
<h2>로그인후 접속되는 페이지로 만들기</h2>
<form action="service/chatservice.html" id="chat">
......@@ -42,10 +44,8 @@
<label for="randomchat">랜덤채팅:</label>
<input type="submit" value="랜덤채팅">
</form>
</div>
</div>
</body>
</html>
......
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<title></title>
<style>
div{
border:10px solid green;
font-size:100px;
body{
margin:0;
}
@media(min-width:800px){
div{
display:none;
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>
<div>
Responsive
</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>
</html>
......
......@@ -3,18 +3,14 @@
<head>
<title>KHU KHU Chat</title>
<meta charset="utf-8">
<link rel="stylesheet" href="mediaquery.css">
<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">
<div id="grid">
<div class="media" 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>
......@@ -22,6 +18,7 @@
<li><a href="question.html" class="saw">문의사항</a></li>
<li><a href="afterlogin.html" class="saw">로그인이후</a></li>
</ol>
</div>
<div id="article">
<h2>로그인 </h2>
<form class="formlogin" action="loginmain.html" method="post" id="login">
......@@ -32,10 +29,8 @@
<input type="submit" value="로그인">
<input type="button" value="회원가입" onclick="location.href='signinmain.html'">
</form>
</div>
</div>
</div>
</body>
</html>
......
......@@ -11,7 +11,8 @@
<h1><a href="main.html" color:black>KHU Chatting service</a></h1>
<img src="image/main2.jpg" class="image">
<div id="grid">
<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>
......@@ -19,6 +20,7 @@
<li><a href="question.html" class="saw">문의사항</a></li>
<li><a href="afterlogin.html" class="saw">로그인이후</a></li>
</ol>
</div>
<div id="article">
<h2><a href=https://www.helpshift.com/glossary/chat-service/
title="what is chat service">chat service란 무엇인가?</a></h2>
......@@ -30,9 +32,7 @@
<p>
KHU chat service는 무엇인가요?
</p>
</div>
</div>
</div>
</body>
</html>
......
<style>
@media screen(min-width:320px) and (max-width:480px){
#grid
{
display: grid;
grid-template-rows: 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 */
}
}
@media screen(min-width:480px) and (max-width:800px){
#grid
{
display: grid;
grid-template-columns: 600px 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>
......@@ -10,20 +10,20 @@
<h1><a href="main.html" color:black>KHU Chatting service</a></h1>
<img src="image/question.jpg" class="image">
<div id="grid">
<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="question.html" class="saw">문의사항</a></li>
</ol>
</div>
<div id="article">
<h2>문의사항</h2>
<p>Do you have any question?
</p>
</div>
</div>
</div>
</body>
</html>
......
......@@ -4,17 +4,15 @@
<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/signin.jpg" class="image">
<div id="grid">
<div class="media" 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>
......@@ -22,6 +20,7 @@
<li><a href="question.html" class="saw">문의사항</a></li>
<li><a href="afterlogin.html" class="saw">로그인이후</a></li>
</ol>
</div>
<div id="article">
<h2>회원가입</h2>
<div id="inputset">
......@@ -33,10 +32,10 @@
<input type="password" name="password" placeholder="비밀번호를 입력하세요."><br>
<label for="name">이름:</label><br>
<input type="text" name="name"><br>
<input type="text" name="name"placeholder="이름을 입력하세요."><br>
<label for="age">나이:</label><br>
<input type="text" name="age"><br><br>
<input type="text" name="age" placeholder="나이를 입력하세요."><br><br>
<label for="sex">성별:</label><br>
<input type="radio" value="man" name="sex">남자<br>
......@@ -57,11 +56,8 @@
<input type="submit" value="회원가입신청">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
......
......@@ -38,26 +38,98 @@
color: black;
text-decoration: none;
}
@media screen(min-width:320px) and (max-width:480px){
#grid
{
display: grid;
grid-template-rows: 250px 1fr;
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 */
}
@media screen(min-width:480px) and (max-width:800px){
@media (min-width:300px) and (max-width:480px){
#grid
{
display: block;
}
h1
{
text-align:center;
color:"black";
margin:0;
padding:20px
}
ol
{
border-right:none;
}
#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;
/*grid안에 #article */
}
}
@media (min-width:480px) and (max-width:800px){
#grid
{
display: grid;
grid-template-columns: 250px 1fr;
border-top:1px solid gray;
display: block;
}
h1
{
text-align:center;
color:"black";
margin:0;
padding:20px
}
ol
{
border-right:none;
}
#category
{
border-bottom: 1px solid gray;
}
#grid ol
{
padding-left: 40px;
......@@ -77,4 +149,6 @@
padding-left: 20px;
/*grid안에 #article */
}
}
</style>
......
......@@ -9,8 +9,8 @@
<h1><a href="main.html" color:black>KHU Chatting service</a></h1>
<img src="image/main2.jpg" class="image">
<div id="grid">
<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>
......@@ -18,6 +18,7 @@
<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
......@@ -33,8 +34,7 @@
</p>
</div>
</div>
</div>
</body>
</html>
......