forked from flukeout/flukeout.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
200 lines (169 loc) · 7.35 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html>
<head>
<title>CSS 다이너 - 어느 CSS 선택자에서 먹을 것인가!</title>
<script>
var agent = navigator.userAgent.toLowerCase();
if ( (navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) || (agent.indexOf("msie") != -1) ) {
alert('인터넷 익스플로러에서는 작동하지 않습니다. 크롬 같은 다른 브라우저를 사용해주세요.')}
</script>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/levels.js" type="text/javascript" charset="utf-8"></script>
<script src="js/restaurant.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mCustomScrollbar.min.js"></script>
<link rel="icon" type="image/png" href="favicon.png">
<link href='https://fonts.googleapis.com/css?family=Exo+2:200,400,600,400italic,600italic' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<meta property="og:url" content="http://cssdiner.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="CSS 다이너" />
<meta property="og:description" content="CSS 선택자를 재미있게 배우고 연습할 수 있는 게임입니다. CSS Dinner의 한국어판입니다." />
<meta property="og:image" content="https://flukeout.github.io/images/fb-share.jpg" />
<meta charset="utf-8"/>
</head>
<body>
<div class="left-col">
<header>
CSS 다이너
<div class="logo">
<plate><apple /></plate>
</div>
<span class="share-menu">
공유
<a class="share-twitter" type="twitter" href="#"></a>
<a class="share-facebook" type="facebook" href="#"></a>
<a class="share-email" type="email" href="#"></a>
</span>
</header>
<h2 class="order"></h2>
<div class="note">
<h3>걱정마세요, 당신은 도착했어요!</h3>
<p>
당신은 CSS 선택자를 배우러 방금 왔습니다!
선택자들은 스타일을 적용하기 위한 요소를 선택할 때 쓰이는 방법입니다.
</p>
<h4>진열 1 - CSS 규칙</h4>
<pre>
p {
margin-bottom: 12px;
}</pre>
<p>
여기, "p"가 선택자입니다. ((모든) <p> 요소를 선택합니다.)
그리고 margin-bottom 스타일이 적용됩니다.
</p>
<p>
게임을 플레이하려면, CSS 선택자를 아래에 입력하여 table 위의 올바른 음식을 선택해주세요. 만일 당신이 올바른 것을 골랐다면 당신은 다음 레벨로 넘어가게 됩니다.
</p>
<p>
각 음식들에 마우스 커서를 올리면 그것들의 HTML 마크업 소스를 보실 수 있습니다.
</p>
<p>
선택자를 잘 써서 올바른 음식을 고르는 걸 도와주세요!
→
</p>
<a class="note-toggle" href="#">예, 잘 알겠습니다!</a>
</div>
<a class="note-toggle" href="#">도와주세요, 빼낼 수가 없어요!</a>
<div class="game-wrapper">
<div class="table-wrapper">
<div class="table-surface"></div>
<div class="nametags"></div>
<div class="table"></div>
</div>
<div class="table-edge">
<div class="table-leg"></div>
<div class="table-leg"></div>
</div>
</div>
<div class="editor">
<div class="editor-pane">
<div class="input-header">
<div class="file-name">style.css</div> CSS 편집기
</div>
<div class="file-window css-view">
<div class="line-numbers">
1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>11<br/>12<br/>13<br/>14<br/>15<br/>16<br/>17<br/>18<br/>19<br/>20
</div>
<input class="input-strobe" type="text" placeholder="여기에 '선택자'를 입력해주세요."/><span class="plus">+</span><div class="enter-button">enter</div>
<div>
{<br/>
/* CSS 스타일은 여기에 적히게 됩니다. */<br/>
}
</div>
<div class="help">
<br/>
/* <br/>
넘어가고 싶은 레벨을 적으세요.
<br/>
예 → "5"를 적으면 레벨 5로 넘어갑니다. <br/>*/
</div>
</div>
</div>
<div class="editor-pane html-view">
<div class="input-header">
<div class="file-name">table.html</div>
HTML 뷰어
</div>
<div class="file-window">
<div class="line-numbers">1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>11<br/>12<br/>13<br/>14<br/>15<br/>16<br/>17<br/>18<br/>19<br/>20</div>
<div class="markup"></div>
</div>
</div>
</div>
<div class="what-is-this">
<p>
Made by <a href="http://www.twitter.com/flukeout">@flukeout</a> — come say hi!
</p>
<p>
Have feedback or questions? Please file an isssue on <a href="https://github.com/flukeout/css-diner/issues">the Github repo</a>.
</p>
</div>
<div class="helper"><!-- This is the popup that floats over table elements --></div>
</div><!-- /left-col -->
<div class="right-col">
<div class="help-wrapper">
<h1 class="level-header">
<span class="level-text"></span>
<span class="checkmark"></span>
</h1>
<div class="level-nav">
<a class="previous" href="#"></a>
<a class="next" href="#"></a>
</div>
<div class="level-progress"><div class="progress"></div></div>
<div class="display-help">
<h3 class="selector-name"></h3>
<h2 class="title"></h2>
<h3 class="syntax"></h3>
<div class="hint"></div>
<h4 class="examples-title">예시</h4>
<div class="examples"></div>
<div style="margin-top:100px;cursor:pointer;width:60px" class="askAnswer">정답보기</div>
<div style="text-align:center;display:none" class="answer"></div>
</div>
</div>
<div class="level-menu">
<h2>레벨 선택</h2>
<div class="levels"><!-- level links are inserted here--></div>
<a class="reset-progress" href="#">레벨 초기화</a>
</div>
<div class="level-menu-toggle-wrapper">
<div class="level-menu-toggle"></div>
</div>
</div><!-- /right-col -->
<script>
if(location.hostname != "localhost"){
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-62998410-1', 'auto');
ga('send', 'pageview');
} else {
var ga = false;
}
</script>
</body>
</html>