-
Notifications
You must be signed in to change notification settings - Fork 0
/
07_splash_homepage.html
183 lines (183 loc) · 6.44 KB
/
07_splash_homepage.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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta property="og:title" content="KangHyeonSeok Portfolio" />
<meta property="og:image" content="img/og_img.png" />
<meta property="og:description" content="웹표준과 웹 접근성을 사랑하는 강현석의 포트폴리오" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="shortcut icon" href="img/hs_favicon.ico" />
<title>Project HS</title>
</head>
<body>
<div id="wrap">
<header id="header">
<h1>
<a href="/index.html" title="HS portfolio"> <span>H</span><span>S</span> </a>
</h1>
<ul class="gnb">
<li>
<a href="/aboutme.html" title="About">
<span>About me</span>
</a>
</li>
<li>
<a href="/project.html" title="Career description">
<span>Project</span>
</a>
</li>
<li>
<a href="https://nikeman0806.github.io/" title="blog" target="_blank">
Blog
</a>
</li>
</ul>
</header>
<div id="project_container">
<!-- <div class="project_visual">
<h2>
Splash 홈페이지
</h2>
</div> -->
<div class="project_summary">
<div class="summary_tit">
<h3>Splash 홈페이지</h3>
</div>
<ul class="summary_info">
<li>
<h4>Technology</h4>
<p>
HTML, CSS
</p>
</li>
<li>
<h4>DATE</h4>
<p>
2018.08
</p>
</li>
<li>
<h4>ROLE</h4>
<p>
HTML, CSS
</p>
</li>
</ul>
<p class="summary_txt">
- 소상공인을 위한 결제 서비스 입니다.<br />
- 블루웨일 토큰을 사용하여 런칭한 서비스의 홈페이지를 제작하는 것입니다.<br />
- 웹표준 및 웹 접근성 적용 하였습니다.<br />
- 디자이너와 함께 ui/ux를 개선하였습니다.<br />
- 반응형으로 제작 하였습니다.<br />
</p>
</div>
<div class="project_detail_wrap">
<h3 class="blind">프로젝트 상세 설명</h3>
<div class="detail_visual">
<p class="detail_visual_img">
<img />
</p>
</div>
<div class="detail_responsive">
<div class="detail_responsive_txt">
<h4>사용자 환경에 맞춰 최적화되는 반응형웹</h4>
<p>
다양한 디바이스와 해상도에 맞게 최적화되는 반응형웹으로 개발하여<br />
여러 환경의 사용자에게 동일한 사용자경험을 제공하며, 사이트의 유지관리 효율성을
높였고 <br />
검색엔진에 친화적이게 제작되었습니다.
</p>
</div>
<p class="detail_responsive_img"></p>
</div>
<ul class="detail_explain_wrap">
<li>
<div class="explain_img"></div>
<div class="explain_txt">
<h4>
웹 접근성
</h4>
<p>
<span> - 쉬운 네비게이션을 구현 하였습니다.</span>
<span
>- 키보드, 마우스로 해당 컨트롤이 초점을 받았을 때 시각적으로 구별 할 수
있도록 하였습니다.</span
>
<span
>- 저시력, 시각장애인, 노인들도 콘텐츠를 인식하도록 제공하였습니다.</span
>
</p>
</div>
</li>
<li>
<div class="explain_img"></div>
<div class="explain_txt">
<h4>
쉬운 ux/ui
</h4>
<p>
<span>
- 유저가 필수 입력내용을 쉽게 보도록 아이콘을 구성하여 제작하였습니다.</span
>
<span>
- 예매성공, 실패 페이지를 실제 표와 비슷하게 css로 구성하였습니다.</span
>
</p>
</div>
</li>
</ul>
</div>
<div class="project_nav_wrap">
<div class="project_nav prev">
<a href="./06_bw_homepage.html" title="prev project">
<p class="project_nav_bg"></p>
<p class="project_nav_img"></p>
<div class="project_nav_detail">
<h3>PREV PROJECT</h3>
<h4>TEST PROJECT</h4>
<i>
<img src="img/icon_arrow_left.png" alt="화살표 icon" />
</i>
</div>
</a>
</div>
<div class="project_nav next">
<a href="./01_realmadrid.html" title="prev project">
<p class="project_nav_bg"></p>
<p class="project_nav_img"></p>
<div class="project_nav_detail">
<h3>NEXT PROJECT</h3>
<h4>TEST PROJECT</h4>
<i>
<img src="img/icon_arrow_right.png" alt="화살표 icon" />
</i>
</div>
</a>
</div>
<div class="project_list_btn">
<a href="./project.html" title="project list">
<span class="line line01"></span>
<span class="line line02"></span>
<span class="line line03"></span>
</a>
</div>
</div>
</div>
<footer>
<p class="copy">
<small>
Copyright © 2019 Kang Hyeon Seok. All rights reserved.
</small>
</p>
</footer>
</div>
</body>
</html>