-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnavi.html
167 lines (149 loc) · 7.2 KB
/
navi.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
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 문서의 문자 인코딩 및 화면 크기 설정 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HOME</title>
<!-- Bootstrap CSS 가져오기 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<!-- 네비게이션 바 설정 -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: rgb(0,0,0);">
<div class="container-fluid">
<!-- UROP 로고 링크 -->
<a class="navbar-brand" href="index.html">UROP</a>
<!-- 네비게이션 바 버튼 설정 -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 네비게이션 바 아이템 목록 설정 -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- 개발 가이드 드롭다운 메뉴 -->
<li class="nav-item dropdown">
<a id="guide-link" class="nav-link dropdown-toggle" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
개발 가이드
</a>
<!-- 개발 가이드 하위 메뉴 -->
<ul class="dropdown-menu">
<li><a id="environment-link" class="dropdown-item">환경설정</a></li>
<li><a id="client-link" class="dropdown-item">클라이언트</a></li>
<li><a id="server-link" class="dropdown-item">서버</a></li>
<li><a id="algorithm-link" class="dropdown-item">알고리즘</a></li>
</ul>
</li>
<!-- 앱 설명 드롭다운 메뉴 -->
<li class="nav-item dropdown">
<a id="description-link" class="nav-link dropdown-toggle" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
앱 설명
</a>
<!-- 앱 설명 하위 메뉴 -->
<ul class="dropdown-menu">
<li><a id="build-link" class="dropdown-item">앱 빌드 방법</a></li>
<li><a id="app-link" class="dropdown-item">앱 구동 모습 설명</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="fw-bold">BOTTOM NAVIGATION</h1>
<br>
<p class="col-md-8 fs-5">
다른 페이지로 이동할 수 있는 간단한 바텀 네비게이션을 생성합니다.
<br>
바텀 네비게이션을 만들기 위해 아래의 개발 가이드를 따라 주세요.
</p>
<br>
<br>
<h3 class="fw-bold">🔗 BOTTOM NAVIGATION 구조</h3>
<hr>
<p class="col-md-12 fs-5">
바텀 네비게이션의 구조는 다음 페이지를 참고해 주세요.
<br>
다음 페이지를 통해 코드 작성 단계와 코드에 대해 전반적인 이해를 얻을 수 있습니다.
<br>
Flutter를 활용하여 Dart를 기준으로 작성된 코드 및 구현 방식을 학습하여 다른 언어 및 프레임워크로 개발이 가능합니다.
<br>
<a href="navi/structure.html" style="color: rgb(80, 164, 191);">Structure Explanation →</a>
</p>
<br>
<br>
<h3 class="fw-bold">🔎 BOTTOM NAVIGATION 주요 요소 및 기능 </h3>
<hr>
<p class="col-md-12 fs-5">
바텀 네비게이션의 주요 구성 요소 및 기능은 다음 페이지를 참고해 주세요.
<br>
다음 페이지는 바텀 네비게이션에 필요한 주요 기능 및 예제 코드를 포함하고 있습니다.
<br>
샘플 예제는 Flutter를 활용하여 개발된 Dart 코드입니다. 개발에 어려움을 겪고 있다면 예제 코드를 참고해 보세요.
<br>
<a href="navi/function.html" style="color: rgb(80, 164, 191);">Main Function →</a>
</p>
</div>
</div>
<!-- 페이지 내 스타일 설정 -->
<style>
.navbar-brand {
font-size: 20px;
font-weight: bold;
margin-left: 10px;
}
.nav-item {
font-size: 20px;
font-weight: bold;
margin-left: 10px;
}
.form-control {
font-weight: bold;
font-size: 20px;
}
.form-label {
font-weight: bold;
font-size: 20px;
}
</style>
<!-- Bootstrap JavaScript 가져오기 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<!-- 페이지 로딩 시 실행될 스크립트 -->
<script>
document.addEventListener("DOMContentLoaded", function () {
// 환경설정 페이지로 이동
document.getElementById("environment-link").addEventListener("click", function () {
window.location.href = "environment.html";
});
// 클라이언트 페이지로 이동
document.getElementById("client-link").addEventListener("click", function () {
window.location.href = "client.html";
});
// 서버 페이지로 이동
document.getElementById("server-link").addEventListener("click", function () {
window.location.href = "server.html";
});
// 알고리즘 페이지로 이동
document.getElementById("algorithm-link").addEventListener("click", function () {
window.location.href = "algorithm.html";
});
// 앱 빌드 방법 페이지로 이동
document.getElementById("build-link").addEventListener("click", function () {
window.location.href = "build.html";
});
// 앱 구동 모습 설명 페이지로 이동
document.getElementById("app-link").addEventListener("click", function () {
window.location.href = "app.html";
});
});
</script>
</body>
</html>