/
index.html
153 lines (117 loc) · 4.53 KB
/
index.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
<!-- Front-End-Checklist -->
<!-- https://github.com/kesuskim/Front-End-Checklist#head -->
<!--
Progressive enhancement
메인 네비게이션 또는 검색 등의 기능들이 JavaScript Disabled 하여도 동작 하여야함 -->
<!--
404 5xx 에러 페이지가 있어야함
-->
<!--doctype html -> HTML5 사용을 의미 -->
<!doctype html>
<!-- 페이지 내의 언어 속성 부여 -->
<!-- 페이지 내의 글자 방향 속성 부여 -->
<!-- rtl : right to left-->
<html lang="ko" dir="ltr">
<head>
<!--
favicon 은 png가 좋긴한데 IE에서 전부 지원하지않음
IE는 11 버전부터 png gif의 favicon 을 지원 JPEG 인식 X
Free favicon Web Site
https://www.iconfinder.com/icon-sets/featured/free/5
download for png
After downloading move to favicon Convert Web Site
https://converticon.com/
- Get Started
- Choose image
- Export
- Select
16 x 16 24 x 24 32 x 32 ( Web Browser Require Value )
32 x 32 64 x 64 ( Windows 'Big Icon' Option Size 32 x 32 )
64 x 64 128 x 128 ( Mac OS Require Value )
IOS or AOS launcher use Size 152 x 152
16 x 16 ~ 256 x 256 All Check -> [Save As]
-->
<!-- 표준 favicon
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
-->
<!-- 추천 favicon 포맷
<link rel="icon" type="image/png" href="">
-->
<link rel="icon" type="image/x-icon" href="./lib/res/iconfinder_santa.ico">
<!-- ICO파일은 멀티 사이즈를 기원합니다. -->
<!-- 문자집합 선언 -->
<meta charset="utf-8"/>
<!-- Internet Explorer에게 최신의 렌더링 엔진을 사용 지시 -->
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<!-- Meta Description -->
<meta name="author" content="jaeuk_lee"/>
<meta name="description" content="깍돌이 스터디 페이지입니다."/>
<meta name="front-end-study" content="front-QA "/>
<!-- -->
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://example.com/page.html"/>
<meta property="og:title" content="Content Title"/>
<meta property="og:image" content="https://example.com/image.jpg"/>
<meta property="og:description" content="Description Here"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="og:locale" content="en_US"/>
<!-- css는 무조건 js보다 먼저 로딩이 되어야 한다. -->
<link rel="stylesheet" type="text/css" href="./lib/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="./lib/css/index.css"/>
<script src="./lib/js/gdlUtil.js"></script>
<script src="./lib/gdl.js"> </script>
<title>GDL VanillaJS Pages</title>
</head>
<style>
/* Component Control Area */
/* div.controlArea{
display:inline-block;
height:50px;
width:100%;sss
background-color:aquamarine
} */
</style>
<body>
<div id="app-root">
<!-- header section 의 role="banner" 필수 -->
<header role="banner">
<div class="HeaderImage"></div>
<div class="UserControl">
<span class="headerText">(모바일,PC지원,탭 지원) </span>
</div>
</header>
<!-- main 태그의 role="main" -->
<main role="main">
<div class="mainWrapper">
<aside >
</aside>
<article>
Article
Article
</article>
</div>
</main>
<!-- nav 태그의 role="navigation" -->
<nav role="navigation">
<ul>
<li>◀</li>
<li>▶</li>
</ul>
</nav>
<footer>
<div>
<span class="pages_desc">
ⓒ Gdl Blog Page
</span>
</div>
</footer>
</div><!-- app-root-->
<script>
var baseUrl="./logic/";
var arrayLogic = ["main.js"];
for(var i=0;i<arrayLogic.length;i++){
Util.include(baseUrl+arrayLogic[i],false);
}
</script>
</body>
</html>