-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (205 loc) · 10.7 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
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>웹카페 - 반응형 웹</title>
<link rel="shortcut icon" href="./assets/images/common/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="./assets/images/common/apple-touch-icon.png" />
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
crossorigin="anonymous" />
<link rel="stylesheet" as="style" crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
<link rel="stylesheet" href="./styles/style.css" />
<script src="./js/navigation.js" defer></script>
</head>
<body>
<header class="appHeader">
<h1 class="logo">
<a href="./main.html" class="logo__link" aria-label="Web Cafe"></a>
</h1>
<ul class="memberOnly">
<li><a href="/">로그인</a></li>
<li><span class="divider" aria-hidden="true">ㅣ</span><a href="/">회원가입</a></li>
<li><span class="divider" aria-hidden="true">ㅣ</span><a href="/">커뮤니티</a></li>
</ul>
<form action="https://formspree.io/[email protected]" method="POST" class="searchForm">
<fieldset>
<legend>검색</legend>
<div class="searchForm__group">
<div class="formInput">
<label for="search" class="a11yHidden formInput__label">검색어</label>
<input id="search" class="formInput__input" type="search" required placeholder="검색어를 입력하세요." name="search" />
</div>
<button type="submit" class="button button--primary button--fill">검색</button>
</div>
</fieldset>
</form>
<div class="buttonWrapper">
<button class="button--none button--burger" aria-label="메뉴 열기">
<span class="button--burgerBarTop"></span>
<span class="button--burgerBarMiddle"></span>
<span class="button--burgerBarBottom"></span>
</button>
</div>
</header>
<nav class="appNavigation menu">
<h2 class="a11yHidden">메인 메뉴</h2>
<ul class="menu__list">
<li class="menu__item"><a href="/" class="menu__link">HTML에 대해</a></li>
<li class="menu__item"><a href="/" class="menu__link">CSS에 대해</a></li>
<li class="menu__item"><a href="/" class="menu__link">웹표준/웹접근성</a></li>
<li class="menu__item"><a href="/" class="menu__link">묻고 답하기</a></li>
<li class="menu__item"><a href="/" class="menu__link">자료실</a></li>
</ul>
</nav>
<main class="appMain">
<section class="book">
<h2 class="book__title sprite spriteBook">
<span class="book__koTitle">추천서적</span>
<span class="book__enTitle accentBook">Recommend Book</span>
</h2>
<figure class="book__cover">
<img src="./assets/images/book_rwd.jpg" alt="" class="book__coverImage" aria-labelledby="book__coverCaption" />
<figcaption id="book__coverCaption" class="book__coverCaption">반응형웹 핵심 가이드북</figcaption>
</figure>
<dl class="book__info">
<dt>저자</dt>
<dd>김데레사</dd>
<dt class="a11yHidden">평점</dt>
<dd class="accentBook ratingStar" aria-label="5점 만점에 4점"><span aria-hidden="true">★★★★☆</span></dd>
</dl>
<p class="book__summary">반응형웹 디자인을 위한 핵심 내용을 다루고 있으며 미디어쿼리, 유연한 레이아웃, 반응형 이미지 기법을 학습할 수 있다. 모바일 및 다양한 해상도에 대응이 가능한 웹디자인을 이 책으로 시작해 보자!</p>
</section>
<section class="news">
<h2 class="news__title sprite spriteNews">
<span class="news__koTitle">새소식</span>
<span class="news__enTitle accentNews">WebCafe News</span></h2>
<figure class="news__videoContainer">
<!-- <video class="news__video" poster="./assets/media/poster.jpg" controls>
<source src="./assets/media/stories.mp4" type="video/mp4" />
<track src="./assets/media/stories-en.vtt" kind="captions" srclang="en" label="English Caption" />
</video> -->
<div class="iframeWrapper iframeRatio-16-9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/554aOV9iV7s" allowfullscreen></iframe>
</div>
<figcaption class="a11yHidden">구글 개발자 이야기</figcaption>
</figure>
<p class="news__summary">
구글플레이는 다양한 분야에서 활약하고 있는 국내 개발사들을 모시고 직접 이야기를 나눠보는
‘구글플레이 개발자와의 대화’ 행사를 정기적으로 개최할 예정입니다. 오늘 3월 29일(수) 구글 캠퍼스 서울에서 열린 첫 번째
‘구글플레이 개발자와의 대화’는 ‘해외에서 빵터진 한국 앱'을 주제로 진행됐는데요, 국내 앱 시장은 물론 글로벌 시장에서도 주목
받으며 글로벌 진출의 본보기가 되고 있는 개발사 세 곳과 함께 했습니다.
</p>
<time class="news__date" datetime="2022-07-21T14:03:23">
<span class="far fa-calendar-alt accentNews" aria-hidden="true"></span>2022.07.21
</time>
</section>
<section class="board">
<h2 class="board__title sprite spriteBoard">
<span class="board__koTitle">게시판</span>
<span class="board__enTitle accentBoard">WebCafe Board</span>
</h2>
<ul class="board__list">
<li class="board__item">
<a href="/" class="board__link">
<span class="far fa-dot-circle accentBoard" aria-hidden="hidden"></span>HTML5 표준 명세서를 읽는 방법
</a>
<time class="board__date" datetime="2022-07-21T11:24:30">2022-07-21</time>
</li>
<li class="board__item">
<a href="/" class="board__link">
<span class="far fa-dot-circle accentBoard" aria-hidden="hidden"></span>CSS를 활용한 애니메이션
</a>
<time class="board__date" datetime="2022-07-21T11:24:30">2022-07-21</time>
</li>
<li class="board__item">
<a href="/" class="board__link">
<span class="far fa-dot-circle accentBoard" aria-hidden="hidden"></span>프론트엔드 프레임워크 전격 해부
</a>
<time class="board__date" datetime="2022-07-21T11:24:30">2022-07-21</time>
</li>
<li class="board__item">
<a href="/" class="board__link">
<span class="far fa-dot-circle accentBoard" aria-hidden="hidden"></span>웹표준 그리고 정보접근성에 대하여
</a>
<time class="board__date" datetime="2022-07-21T11:24:30">2022-07-21</time>
</li>
<li class="board__item">
<a href="/" class="board__link">
<span class="far fa-dot-circle accentBoard" aria-hidden="hidden"></span> 웹카페 유튜브 라이브 참여는 오늘 자정까지 메일로 신청 가능
</a>
<time class="board__date" datetime="2022-07-21T11:24:30">2022-07-21</time>
</li>
</ul>
<a href="/" title="게시판" class="board__more">
<span class="far fa-plus-square accentBoard" aria-hidden="hidden"></span>더보기
</a>
</section>
<section class="favorite">
<h2 class="favorite__title sprite spriteFavorite">
<span class="favorite__koTitle">인기 사이트</span>
<span class="favorite__enTitle accentFavorite">Favorite Site</span>
</h2>
<ol class="favorite__list">
<li class="favorite__item">
<a class="favorite__link" href="https://ko.learnlayout.com/" target="_blank" data-tooltip="레이아웃을 배우자" rel="noopener noreferrer">
<span class="fas fa-external-link-alt accentFavorite" aria-hidden="true"></span> Learn CSS Layout
</a>
</li>
<li class="favorite__item">
<a class="favorite__link" href="https://flexboxfroggy.com/#ko" target="_blank" data-tooltip="게이머처럼 Flex" rel="noopener noreferrer">
<span class="fas fa-external-link-alt accentFavorite" aria-hidden="true"></span> Flexbox Froggy
</a>
</li>
<li class="favorite__item">
<a class="favorite__link" href="https://cssgridgarden.com/#ko" target="_blank" data-tooltip="농장주 되기 Grid" rel="noopener noreferrer">
<span class="fas fa-external-link-alt accentFavorite" aria-hidden="true"></span> CSS Grid Garden
</a>
</li>
<li class="favorite__item">
<a class="favorite__link" href="https://developer.mozilla.org/ko/" target="_blank" data-tooltip="최고의 웹교과서 MDN" rel="noopener noreferrer">
<span class="fas fa-external-link-alt accentFavorite" aria-hidden="true"></span> MDN Web Docs
</a>
</li>
</ol>
</section>
<article class="twitter">
<h2 class="twitter__title sprite spriteTwitter">
<span class="twitter__koTitle">트위터</span>
<span class="twitter__enTitle accentTwitter">WebCafe Twitter</span>
</h2>
<div class="twitter__container">
<dl class="twitter__userInfo">
<dt class="a11yHidden">사용자 이름</dt>
<dd class="twitter__userName">김데레사</dd>
<dt class="a11yHidden">사용자 ID</dt>
<dd class="twitter__userId accentTwitter">
<a href="/" target="_blank" title="트위터 계정으로 이동" rel=" noopener noreferrer">@seulbinim</a>
</dd>
</dl>
<figure class="twitter__userProfile">
<img src="./images/hero.jpg" alt="" class="twitter__userProfileImage" />
</figure>
<p class="twitter__summary">
웹표준 핵심 가이드북 개정판 출시 기념으로 세미나를 준비했습니다. 참석을
원하시는 분들은 페이스북과 트위터 그리고 유튜브 채널을 통해 문의주시기 바랍니다.
</p>
<time class="twitter__date" datetime="2021-07-21T15:03:25">
<span class="far fa-clock accentTwitter" aria-hidden="true"></span>일주일전
</time>
</div>
</article>
</main>
<footer class="appFooter">
<address class="address">
<span>서울 서초구 사평대로53길 30 반포엠 203호</span>
<span>이메일: <a class="address__link" href="mailto:[email protected]?subject=문의사항">[email protected]</a></span>
</address>
<small class="copyright">Copyright since © 2010 by Web Cafe CORPORATION ALL RIGHTS RESERVED.</small>
</footer>
</body>
</html>