-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.html
169 lines (152 loc) · 7.45 KB
/
main.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
168
169
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 문서의 문자 인코딩 및 화면 크기 설정 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MAIN</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">MAIN (LOGIN)</h1>
<br>
<p class="col-md-12 fs-5">
앱의 진입점을 정의하고, 전반적인 구조를 정의하는 페이지를 구현합니다
<br>
사용자는 기존에 존재하는 계정으로 이메일과 비밀번호를 입력하여 로그인하거나,
회원가입 버튼을 통해 회원가입 페이지로 이동할 수 있습니다.
<br>
메인 (로그인) 페이지를 만들기 위해 아래의 개발 가이드를 따라 주세요.
</p>
<br>
<br>
<h3 class="fw-bold">🔗 MAIN (LOGIN) 구조</h3>
<hr>
<p class="col-md-12 fs-5">
메인 (로그인) 페이지의 구조는 다음 페이지를 참고해 주세요.
<br>
다음 페이지를 통해 코드 작성 단계와 코드에 대해 전반적인 이해를 얻을 수 있습니다.
<br>
Flutter를 활용하여 Dart를 기준으로 작성된 코드 및 구현 방식을 학습하여 다른 언어 및 프레임워크로 개발이 가능합니다.
<br>
<a href="main/structure.html" style="color: rgb(80, 164, 191);">Structure Explanation →</a>
</p>
<br>
<br>
<h3 class="fw-bold">🔎 MAIN (LOGIN) 주요 요소 및 기능 </h3>
<hr>
<p class="col-md-12 fs-5">
메인 (로그인) 페이지의 주요 구성 요소 및 기능은 다음 페이지를 참고해 주세요.
<br>
다음 페이지는 회원가입 페이지에 필요한 주요 기능 및 예제 코드를 포함하고 있습니다.
<br>
샘플 예제는 Flutter를 활용하여 개발된 Dart 코드입니다. 개발에 어려움을 겪고 있다면 예제 코드를 참고해 보세요.
<br>
<a href="main/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>