forked from TJKIMaejin/WebProject
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathseil.html
157 lines (140 loc) · 6.94 KB
/
seil.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- 구글폰트 -->
<link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
<style type="text/css">
.wrap{
width: 900px;
margin: auto;
}
#posting-box {
display: none;
}
body {
background-size: cover;
background-position: center;
}
</style>
<script type="text/javascript">
function openclose() {
// id 값 posting-box의 display 값이 block 이면
if ( $('#posting-box').css('display') == 'block' ) {
// posting-box를 가리고
$('#posting-box').hide();
} else {
// 아니면 posting-box를 펴라
$('#posting-box').show();
}
} function openclose1() {
// id 값 posting-box의 display 값이 block 이면
if ( $('#posting-box').css('display') == 'block' ) {
// posting-box를 가리고
$('#posting-box').hide();
} else {
// 아니면 posting-box를 펴라
$('#posting-box').show();
}
} function openclose2() {
// id 값 posting-box의 display 값이 block 이면
if ( $('#posting-box').css('display') == 'block' ) {
// posting-box를 가리고
$('#posting-box').hide();
} else {
// 아니면 posting-box를 펴라
$('#posting-box').show();
}
} function openclose3() {
// id 값 posting-box의 display 값이 block 이면
if ( $('#posting-box').css('display') == 'block' ) {
// posting-box를 가리고
$('#posting-box').hide();
} else {
// 아니면 posting-box를 펴라
$('#posting-box').show();
}
} function openclose4() {
// id 값 posting-box의 display 값이 block 이면
if ( $('#posting-box').css('display') == 'block' ) {
// posting-box를 가리고
$('#posting-box').hide();
} else {
// 아니면 posting-box를 펴라
$('#posting-box').show();
}
}
</script>
</head>
<body>
<div class ="wrap">
<div class="jumbotron" style="background-color: white">
<h1 class="display-4" style="text-align:center;">오늘 뭐 먹지</h1>
<hr class="my-4">
<nav aria-label="breadcrumb">
<ol class="breadcrumb" style="background-color: white">
<button type="button" class="btn btn-outline-primary" style="margin:10px" onclick="openclose()"id="cate1" >알류</button>
<button type="button" class="btn btn-outline-secondary"style="margin:10px" onclick="openclose1()" id= "cate2" >유재품</button>
<button type="button" class="btn btn-outline-success" style="margin:10px" onclick="openclose2()">Success</button>
<button type="button" class="btn btn-outline-danger" style="margin:10px" onclick="openclose3()">Danger</button>
<button type="button" class="btn btn-outline-warning" style="margin:10px" onclick="openclose3()">Warning</button>
<button type="button" class="btn btn-outline-info" style="margin:10px" onclick="openclose4()">Info</button>
<button type="button" class="btn btn-outline-dark" style="margin:10px"onclick="openclose5()">Dark</button>
</ol>
</nav>
</div>
<div id="posting-box" class="form-post">
<form style="background-color : white">
<div class="form-group">
<nav aria-label="breadcrumb" >
<ol class="breadcrumb">
<button type="button" class="btn btn-outline-primary" style="margin:10px " ></button>
<button type="button" class="btn btn-outline-secondary"style="margin:10px" onclick="openclose()" >유재품</button>
<button type="button" class="btn btn-outline-success" style="margin:10px" onclick="openclose()">Success</button>
<button type="button" class="btn btn-outline-danger" style="margin:10px" onclick="openclose()">Danger</button>
<button type="button" class="btn btn-outline-warning" style="margin:10px" onclick="openclose()">Warning</button>
<button type="button" class="btn btn-outline-info" style="margin:10px" onclick="openclose()">Info</button>
<button type="button" class="btn btn-outline-dark" style="margin:10px"onclick="openclose()">Dark</button>
</ol>
</nav>
</div>
<button onclick="posting()" type="button" class="btn btn-primary">기사저장</button>
</form>
</div>
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</body>
</html>