Skip to content

Commit add0544

Browse files
kkn1125kkn1125
committed
전체 업데이트, 코드 갈아엎음
1 parent 1ee2938 commit add0544

File tree

4 files changed

+601
-386
lines changed

4 files changed

+601
-386
lines changed

‎index.html‎

Lines changed: 109 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,30 @@
55
<meta charset="UTF-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<script>
9+
document.documentElement.lang = navigator.language.split('-').shift();
10+
</script>
811
<!-- Bootstrap CSS -->
912
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
1013
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
14+
<style>
15+
body{
16+
height: 200vh
17+
}
18+
19+
.divider{
20+
margin-top: 3rem;
21+
height: 1em;
22+
}
23+
</style>
1124
<link rel="stylesheet" href="tutorial.css">
1225
<title>Tutorial</title>
1326
</head>
1427

1528
<body>
1629
<nav class="navbar navbar-expand-lg navbar-light bg-light">
1730
<div class="container-fluid">
18-
<a class="navbar-brand" href="#">Navbar</a>
31+
<a class="navbar-brand" id="brand" href="#">Tutorial</a>
1932
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
2033
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
2134
aria-expanded="false" aria-label="Toggle navigation">
@@ -29,81 +42,128 @@
2942
<li class="nav-item">
3043
<a class="nav-link" href="#">Link</a>
3144
</li>
32-
<li class="nav-item dropdown">
33-
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
34-
data-bs-toggle="dropdown" aria-expanded="false">
35-
Dropdown
36-
</a>
37-
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
38-
<li><a class="dropdown-item" href="#">Action</a></li>
39-
<li><a class="dropdown-item" href="#">Another action</a></li>
40-
<li>
41-
<hr class="dropdown-divider">
42-
</li>
43-
<li><a class="dropdown-item" href="#">Something else here</a></li>
44-
</ul>
45-
</li>
46-
<li class="nav-item">
47-
<a class="nav-link disabled">Disabled</a>
48-
</li>
4945
</ul>
50-
<form class="d-flex">
51-
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
52-
<button class="btn btn-outline-success" type="submit">Search</button>
53-
</form>
5446
</div>
5547
</div>
5648
</nav>
5749

5850
<main class="container">
5951
<div class="divider"></div>
60-
<div class="h1 fw-bold text-uppercase position-fixed top-25">tutorial test</div>
52+
<div id="tuto-0" class="h1 fw-bold border-start border-5 ps-3 border-success">Tutorials는</div>
6153
<div class="bg-light p-3 border rounded-3 my-3">
62-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nam est fugiat voluptatem sint. Vel
63-
ducimus qui ex, reiciendis ipsa, ut unde fugiat exercitationem obcaecati ab libero. Libero, iure ullam!
54+
<kbd>Tutorial JS</kbd>는 웹에서 쉽게 튜토리얼을 진행 할 수 있도록 도와주는 애플리케이션입니다. 현재 계속해서 업데이트 중이오니 많은 관심 바랍니다.
55+
<br>
56+
<div>
57+
<a class="badge text-muted" href="https://kkn1125.github.io/">
58+
개발자 블로그
59+
</a>
60+
</div>
6461
</div>
62+
<div class="h2">버전</div>
63+
<div class="bg-light p-3 border rounded-3 my-3">v0.1.0 pre-release</div>
6564

66-
<div class="d-flex card-wrap my-3">
67-
<div class="card">
65+
<div class="h2">이럴 때 사용합니다</div>
66+
<div id="tuto-1" class="row g-3 my-3">
67+
<div class="card col-12 col-md-6 col-lg-4">
6868
<div class="card-body">
69-
<h5 class="card-title">Card title</h5>
70-
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
71-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
72-
the card's content.</p>
73-
<a href="#" class="card-link">Card link</a>
69+
<h5 class="card-title">다양한 기능 페이지에 있는 경우</h5>
70+
<h6 class="card-subtitle mb-2 text-muted">첫 번째</h6>
71+
<p class="card-text">많은 기능을 담은 페이지는 튜토리얼이 따로 필요 할 수도 있습니다. 그럴때 사용하면 좋을 것이라 생각합니다.</p>
72+
<a href="#" class="card-link">Your Link</a>
7473
<a href="#" class="card-link">Another link</a>
7574
</div>
7675
</div>
77-
<div class="card">
76+
<div class="card col-12 col-md-6 col-lg-4">
7877
<div class="card-body">
79-
<h5 class="card-title">Card title</h5>
80-
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
81-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
82-
the card's content.</p>
83-
<a href="#" class="card-link">Card link</a>
78+
<h5 class="card-title">페이지에 안내가 필요한 경우</h5>
79+
<h6 class="card-subtitle mb-2 text-muted">두 번째</h6>
80+
<p class="card-text">혹은 페이지를 처음 접하는 사람에게 도움을 주기 위해 부분적으로 <kbd>on</kbd>, <kbd>off</kbd>기능으로 변경해서 활용가능합니다.</p>
81+
<a href="#" class="card-link">Your Link</a>
8482
<a href="#" class="card-link">Another link</a>
8583
</div>
8684
</div>
87-
<div class="card">
85+
<div class="card col-12 col-md-6 col-lg-4">
8886
<div class="card-body">
89-
<h5 class="card-title">Card title</h5>
90-
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
91-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
92-
the card's content.</p>
93-
<a href="#" class="card-link">Card link</a>
87+
<h5 class="card-title">기타 특수한 경우</h5>
88+
<h6 class="card-subtitle mb-2 text-muted">세 번째</h6>
89+
<p class="card-text">일반적인 웹 디자인이 아니라면 사용자가 혼돈 할 수 있으니 없는 것 보다 낫겠죠!?</p>
90+
<a href="#" class="card-link">Your Link</a>
91+
<a href="#" class="card-link">Another link</a>
92+
</div>
93+
</div>
94+
</div>
95+
96+
<div class="h2">사용법</div>
97+
<div id="tuto-2" class="bg-light p-3 border rounded-3 my-3">
98+
현재 유효한 속성은 크게 5가지입니다. <kbd>tutorial</kbd>, <kbd>style</kbd>, <kbd>naming</kbd>, <kbd>autoPlay</kbd>, <kbd>effect</kbd>입니다.
99+
</div>
100+
<div class="row g-3 my-3">
101+
<div id="tuto-3" class="card col-12 col-md-6 col-lg-4">
102+
<div class="card-body">
103+
<h5 class="card-title">tutorial</h5>
104+
<h6 class="card-subtitle mb-2 text-muted">튜토리얼 박스 대상 설정</h6>
105+
<p class="card-text">튜토리얼을 진행 할 대상을 지정하는 리스트입니다. 이때 <kbd>name</kbd>속성에 이름을 지정하며, <kbd>id</kbd> > <kbd>class</kbd> > <kbd>tagName</kbd>순으로 대상을 찾습니다. 그리고 <kbd>message</kbd>속성에 대상의 설명을 적으면 자동으로 스토리보드가 생성되어 버튼으로 조정되는 튜토리얼이 진행됩니다.</p>
106+
<a href="#" class="card-link">Your Link</a>
107+
<a href="#" class="card-link">Another link</a>
108+
</div>
109+
</div>
110+
<div id="tuto-4" class="card col-12 col-md-6 col-lg-4">
111+
<div class="card-body">
112+
<h5 class="card-title">style</h5>
113+
<h6 class="card-subtitle mb-2 text-muted">튜토리얼 박스 스타일 설정</h6>
114+
<p class="card-text">지정된 대상에 스타일을 조정합니다.
115+
<br>
116+
<br>
117+
<kbd>shadowColor</kbd>는 대상을 가리키는 영역 외 가려지는 부분의 색상을 조정합니다.
118+
<kbd>padding</kbd>은 대상을 가리키는 영역의 여유공간을 조정합니다.
119+
<br>
120+
<br>
121+
<kbd>border</kbd>,
122+
<kbd>msgBox</kbd>,
123+
<kbd>btns</kbd>는 공통으로 <kbd>rounded</kbd>속성이 있고, 모서리를 둥글게 합니다.
124+
<br>
125+
그 외 <kbd>border</kbd>와 <kbd>msgBox</kbd>는 <kbd>color</kbd>속성을 공통으로 가지고 텍스트 색상을 결정하며, <kbd>border</kbd>는 <kbd>width</kbd>속성으로 테두리 두께를, <kbd>msgBox</kbd>의 <kbd>bgColor</kbd>속성으로 메세지 박스의 배경색상을 조정합니다.
126+
</p>
127+
<a href="#" class="card-link">Your Link</a>
128+
<a href="#" class="card-link">Another link</a>
129+
</div>
130+
</div>
131+
<div id="tuto-5" class="card col-12 col-md-6 col-lg-4">
132+
<div class="card-body">
133+
<h5 class="card-title">naming</h5>
134+
<h6 class="card-subtitle mb-2 text-muted">튜토리얼 진행 버튼 명칭 설정</h6>
135+
<p class="card-text">버튼별로 이름을 세팅할 수 있도록 했습니다. 고정된 이름보다는 환경에 맞게 변해야 페이지에 조화 될 것이라 생각됩니다. <kbd>restart</kbd>는 재시작 버튼의 명칭, <kbd>prev</kbd>, <kbd>next</kbd>, <kbd>exit</kbd>의 버튼 명칭을 변경 할 수 있습니다.</p>
136+
<a href="#" class="card-link">Your Link</a>
137+
<a href="#" class="card-link">Another link</a>
138+
</div>
139+
</div>
140+
<div id="tuto-6" class="card col-12 col-md-6 col-lg-4">
141+
<div class="card-body">
142+
<h5 class="card-title">autoPlay</h5>
143+
<h6 class="card-subtitle mb-2 text-muted">튜토리얼 자동 진행 여부</h6>
144+
<p class="card-text">곧바로 실행되는 것보다 사용자가 언제든 켜고 끌 수 있도록 하는 것을 원하시면 <kbd>autoPlay</kbd>를 <kbd>false</kbd>로 두고 실행 할 수 있습니다. 반대로 <kbd>true</kbd>로 실행하시면 켜자마자 실행됩니다.</p>
145+
<a href="#" class="card-link">Your Link</a>
94146
<a href="#" class="card-link">Another link</a>
95147
</div>
96148
</div>
97149
</div>
98150
</main>
99151

152+
<div class="divider"></div>
153+
<div class="divider"></div>
154+
<div class="divider"></div>
155+
100156
<footer class="pt-3 mt-4 fixed-bottom bg-white">
101157
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
102-
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
103-
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
104-
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
105-
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
106-
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
158+
<li class="nav-item">
159+
<a href="https://kkn1125.github.io/" class="nav-link px-2 text-muted">개발자 블로그</a>
160+
</li>
161+
<li class="nav-item">
162+
<a href="https://kkn1125.github.io/contact" class="nav-link px-2 text-muted">문의</a>
163+
</li>
164+
<li class="nav-item">
165+
<a href="https://github.com/kkn1125/tutorial" class="nav-link px-2 text-muted">깃허브</a>
166+
</li>
107167
</ul>
108168
<p class="text-center text-muted">© 2021 Company, Inc</p>
109169
</footer>

‎index.js‎

Lines changed: 48 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,69 @@
11
const tutorial = Tutorial.init({
2-
selector: [
2+
tutorial: [
33
{
4-
name: "navbar-brand",
5-
msg: "브랜드명을 자유롭게 변경할 수 있습니다.\n줄바꿈도 가능합니다"
4+
name: 'navbar',
5+
message: '네비게이션입니다.',
66
},
77
{
8-
name: "navbar-toggler",
9-
msg: "메뉴 버튼입니다."
8+
name: 'navbar-brand',
9+
message: '그 중에서도 브랜드를 설명하는 부분과 모바일에서 토글버튼이 있습니다.<br>웹에서 표시되지 않으면 튜토리얼 또한 표시되지 않고 표시되는 부분으로 건너뛰게 됩니다.',
1010
},
1111
{
12-
name: "h1",
13-
msg: "메인 텍스트입니다."
12+
name: 'navbar-toggler',
13+
message: '토글 버튼입니다. 반응형에 의해 안보일 수 도 있습니다.',
1414
},
1515
{
16-
name: "footer",
17-
msg: "푸터 입니다."
16+
name: 'tuto-0',
17+
message: '튜토리얼에 대한 설명입니다.',
18+
},
19+
{
20+
name: 'tuto-1',
21+
message: '필요에 의해 사용되어지는 튜토리얼은 단순 이유로도, 특수한 경우에도 사용할 수 있습니다.',
22+
},
23+
{
24+
name: 'tuto-2',
25+
message: '크게 설정하는 속성은 tutorial, style, naming, autoPlay, effet로 5가지 입니다.',
26+
},
27+
{
28+
name: 'tuto-3',
29+
message: 'id>class>tagName 순으로 대상을 찾고 리스트를 만들어 튜토리얼을 만듭니다. 추후 <kbd>tuto-*</kbd>속성을 추가하여 편리한 튜토리얼 설정을 구상 중 입니다.',
30+
},
31+
{
32+
name: 'tuto-4',
33+
message: 'style은 tutorial의 메세지 박스 배경색상|모깎기|텍스트색상, 외곽라인의 두께|색상|모깎기, 강조영역 외 배경색상, 강조영역 여유공간 등을 조정합니다.',
34+
},
35+
{
36+
name: 'tuto-5',
37+
message: 'naming에서는 진행되는 튜토리얼 박스를 따라다니는 버튼의 명칭을 변경합니다. 페이지들에 따라 조화되기 쉽도록 하기 위함입니다.',
38+
},
39+
{
40+
name: 'tuto-6',
41+
message: 'autoPlay는 시작하자마자 켜지는 것이 꺼릴 때 사용합니다.',
1842
},
1943
],
2044
style: {
21-
type: "rect",
22-
layerLine: true,
2345
padding: "1rem",
24-
bgColor: "rgba(0,0,0,0.2)",
46+
shadowColor: "rgba(0,0,0,0.7)",
2547
border: {
2648
rounded: "1rem",
27-
width: "3px",
49+
width: "10px",
2850
color: "#eb47a8",
29-
line: "solid",
3051
},
3152
msgBox: {
53+
rounded: ".5rem",
3254
bgColor: "rgba(0,0,0,0.5)",
55+
color: 'white',
56+
},
57+
btns: {
58+
rounded: ".5rem",
3359
}
3460
},
35-
tutorial: {
36-
restart: "latest"
37-
}
61+
naming: {
62+
restart: '튜토리얼 보기',
63+
prev: '이전',
64+
next: '다음',
65+
exit: '종료',
66+
},
67+
autoPlay: true,
68+
effect: 'none',
3869
});

0 commit comments

Comments
 (0)