tutorial/index.html at main · kkn1125/tutorial · GitHub

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
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
            document.documentElement.lang = navigator.language.split('-').shift();
        </script>
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link rel="stylesheet" href="docs.css">
        <link rel="stylesheet" href="tutorial.css">
        <title>Tutorial</title>
    </head>

    <body>
        <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: var(--tu-main)">
            <div class="container-fluid">
                <a class="navbar-brand" id="brand" href="#">TUTORIAL</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">
                            <a class="nav-link active" aria-current="page" href="https://kkn1125.github.io/" target="_blank">BLOG</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://kkn1125.github.io/contact" target="_blank">CONTACT</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://github.com/kkn1125/tutorial" target="_blank">GITHUB</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <main class="container">
            <div class="divider"></div>
            <div id="tuto-0" class="h1">Tutorial은</div>
            <div class="p-3 border rounded-3 my-3" style="background-color: var(--tu-secondary)">
                <kbd>Tutorial JS</kbd>는 웹에서 쉽게 튜토리얼을 진행 할 수 있도록 도와주는 애플리케이션입니다. 현재 계속해서 업데이트 중이오니 많은 관심 바랍니다.
                <br>
                <div>
                    <a class="badge text-muted" href="https://kkn1125.github.io/">
                        개발자 블로그
                    </a>
                </div>
            </div>
            <div class="h2">버전</div>
            <div class="p-3 border rounded-3 my-3" style="background-color: var(--tu-secondary)">v0.1.1 pre-release</div>

            <div class="h2">이럴 때 사용합니다</div>
            <div id="tuto-1" class="row g-3 my-3">
                <div class="card col-12 col-md-6 col-lg-4">
                    <div class="card-body">
                        <h5 class="card-title">다양한 기능 페이지에 있는 경우</h5>
                        <h6 class="card-subtitle mb-2 text-muted">첫 번째</h6>
                        <p class="card-text">많은 기능을 담은 페이지는 튜토리얼이 따로 필요 할 수도 있습니다. 그럴때 사용하면 좋을 것이라 생각합니다.</p>
                        <a href="#" class="card-link">Your Link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
                <div class="card col-12 col-md-6 col-lg-4">
                    <div class="card-body">
                        <h5 class="card-title">페이지에 안내가 필요한 경우</h5>
                        <h6 class="card-subtitle mb-2 text-muted">두 번째</h6>
                        <p class="card-text">혹은 페이지를 처음 접하는 사람에게 도움을 주기 위해 부분적으로 <kbd>on</kbd>, <kbd>off</kbd>기능으로 변경해서 활용가능합니다.</p>
                        <a href="#" class="card-link">Your Link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
                <div class="card col-12 col-md-6 col-lg-4">
                    <div class="card-body">
                        <h5 class="card-title">기타 특수한 경우</h5>
                        <h6 class="card-subtitle mb-2 text-muted">세 번째</h6>
                        <p class="card-text">일반적인 웹 디자인이 아니라면 사용자가 혼돈 할 수 있으니 없는 것 보다 낫겠죠!?</p>
                        <a href="#" class="card-link">Your Link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
            </div>

            <div class="h2">사용법</div>
            <div id="tuto-2" class="p-3 border rounded-3 my-3" style="background-color: var(--tu-secondary)">
                현재 유효한 속성은 크게 5가지입니다. <kbd>tutorial</kbd>, <kbd>style</kbd>, <kbd>naming</kbd>, <kbd>autoPlay</kbd>, <kbd>effect</kbd>입니다.
            </div>
            <div class="row g-3 my-3">
                <div id="tuto-3" class="card col-12 col-md-6 col-lg-4">
                    <div class="card-body">
                        <h5 class="card-title">tutorial</h5>
                        <h6 class="card-subtitle mb-2 text-muted">튜토리얼 박스 대상 설정</h6>
                        <p class="card-text">튜토리얼을 진행 할 대상을 지정하는 리스트입니다. 이때 <kbd>name</kbd>속성에 이름을 지정하며, <kbd>id</kbd> > <kbd>class</kbd> > <kbd>tagName</kbd>순으로 대상을 찾습니다. 그리고 <kbd>message</kbd>속성에 대상의 설명을 적으면 자동으로 스토리보드가 생성되어 버튼으로 조정되는 튜토리얼이 진행됩니다.</p>
                        <a href="#" class="card-link">Your Link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
                <div id="tuto-4" class="card col-12 col-md-6 col-lg-4">
                    <div class="card-body">
                        <h5 class="card-title">style</h5>
                        <h6 class="card-subtitle mb-2 text-muted">튜토리얼 박스 스타일 설정</h6>
                        <p class="card-text">지정된 대상에 스타일을 조정합니다.
                            <br>
                            <br>
                            <kbd>shadowColor</kbd>는 대상을 가리키는 영역 외 가려지는 부분의 색상을 조정합니다.
                            <kbd>padding</kbd>은 대상을 가리키는 영역의 여유공간을 조정합니다.
                            <br>
                            <br>
                            <kbd>border</kbd>,
                            <kbd>msgBox</kbd>,
                            <kbd>btns</kbd>는 공통으로 <kbd>rounded</kbd>속성이 있고, 모서리를 둥글게 합니다.
                            <br>
                            그 외 <kbd>border</kbd>와 <kbd>msgBox</kbd>는 <kbd>color</kbd>속성을 공통으로 가지고 텍스트 색상을 결정하며, <kbd>border</kbd>는 <kbd>width</kbd>속성으로 테두리 두께를, <kbd>msgBox</kbd>의 <kbd>bgColor</kbd>속성으로 메세지 박스의 배경색상을 조정합니다.
                        </p>
                        <a href="#" class="card-link">Your Link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
                <div id="tuto-5" class="card col-12 col-md-6 col-lg-4">
                    <div class="card-body">
                        <h5 class="card-title">naming</h5>
                        <h6 class="card-subtitle mb-2 text-muted">튜토리얼 진행 버튼 명칭 설정</h6>
                        <p class="card-text">버튼별로 이름을 세팅할 수 있도록 했습니다. 고정된 이름보다는 환경에 맞게 변해야 페이지에 조화 될 것이라 생각됩니다. <kbd>restart</kbd>는 재시작 버튼의 명칭, <kbd>prev</kbd>, <kbd>next</kbd>, <kbd>exit</kbd>의 버튼 명칭을 변경 할 수 있습니다.</p>
                        <a href="#" class="card-link">Your Link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
                <div id="tuto-6" class="card col-12 col-md-6 col-lg-4">
                    <div class="card-body">
                        <h5 class="card-title">autoPlay</h5>
                        <h6 class="card-subtitle mb-2 text-muted">튜토리얼 자동 진행 여부</h6>
                        <p class="card-text">곧바로 실행되는 것보다 사용자가 언제든 켜고 끌 수 있도록 하는 것을 원하시면 <kbd>autoPlay</kbd>를 <kbd>false</kbd>로 두고 실행 할 수 있습니다. 반대로 <kbd>true</kbd>로 실행하시면 켜자마자 실행됩니다.</p>
                        <a href="#" class="card-link">Your Link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
            </div>
        </main>

        <div class="divider"></div>
        <div class="divider"></div>
        <div class="divider"></div>

        <footer class="pt-3 mt-4 fixed-bottom text-white" style="background-color: var(--tu-primary)">
            <ul class="nav justify-content-center border-bottom pb-3 mb-3">
                <li class="nav-item">
                    <a href="https://kkn1125.github.io/" target="_blank" class="nav-link px-2">개발자 블로그</a>
                </li>
                <span class="vr mx-3"></span>
                <li class="nav-item">
                    <a href="https://kkn1125.github.io/contact" target="_blank" class="nav-link px-2">문의</a>
                </li>
                <span class="vr mx-3"></span>
                <li class="nav-item">
                    <a href="https://github.com/kkn1125/tutorial" target="_blank" class="nav-link px-2">깃허브</a>
                </li>
            </ul>
            <p class="text-center">copyright © 2021 kimson</p>
        </footer>
        <!-- Option 1: Bootstrap Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
        </script>
        <script src="tutorial.js"></script>
        <!-- <script src="https://cdn.jsdelivr.net/gh/kkn1125/tutorial@update-1/tutorial.js"
            integrity="sha384-QoJ9qdYpjWWNwkqNRgsPBX5luJVuldH5I+mXBXM53xuYlaea01lXk4TCqt6E4iZL" crossorigin="anonymous">
        </script> -->
        <script src="index.js"></script>
    </body>

</html>