-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
175 lines (173 loc) · 9.67 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
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>portfolio</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 400, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}
});
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*프리로드*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
/*전체 페이지*/
body {margin:0px; font-family: 'Noto Sans KR', sans-serif;}
a {text-decoration: none; color: white;}
/*헤더*/
#header_main {height: 60px; margin-left:auto; margin-right:auto;}
header {position:fixed; width:100%; height:60px; top:0px; background-color:rgba(0,0,0,0.7); color:#fff; z-index: 1;}
header h1 {float:left; margin:0px; margin-left: 12px; font-size: 30px; font-weight: normal;}
header h1 strong {font-size: 36px; font-weight: bold;}
header ul {float :right; margin: 0px; margin-right:10px; list-style-type:none; width: 130px; padding-left: 0px;}
header ul li {float:left; margin-top: 5px; margin-left:20px; font-size: 15px;}
@media (min-width: 768px) {
#header_main {width:768px;}
header {height: 60px;}
header ul {float:right; width: auto; margin-right:30px; margin-top: 20px;}
header ul li {float:left; margin-top: 0px; margin-left:50px; font-size: 21px;}
}
@media (min-width: 1024px) {
#header_main {width:1024px;}
}
/*메인*/
section {margin-top: -20px;}
section h2{text-align: center; font-size:64px; margin:0px;}
section h3{text-align: center; font-size:32px;}
section p{font-size: 20px; font-weight: 600;}
section img{width:80%; margin:20px; margin-left: 10%; margin-right: 10%;}
section .textbody {width :90%; margin:auto;}
section .blank150 {height :150px;}
section .blank300 {height :300px;}
section .imgtext {width :80%; margin-left: 10%; margin-right:10%;}
#main_content1 {background-image: url('image/bg1.jpg');}
#main_content2 {background-image: url('image/bg2.jpg');}
#main_content2_1 {background-image: url('image/bg3.jpg');}
#main_content3 {background-image: url('image/bg4.jpg');}
@media (min-width: 768px) {
section img {width :40%; margin-left: 5%; margin-right:5%;}
section .textbody {width :80%; margin:auto;}
section .imgtext {width :40%; ; margin-left: 5%; margin-right:5%;}
}
@media (min-width: 1024px) {
section .textbody {width :60%; margin:auto;}
}
</style>
</head>
<body>
<header>
<div id="header_main">
<a href=""><h1>2018년형 <strong>유현석</strong></h1></a>
<ul>
<a href="#main_content1"><li>개요</li></a>
<a href="#main_content2"><li>창작 능력</li></a>
<a href="#main_content3"><li>공학 지식</li></a>
</ul>
</div>
</header>
<article>
<section id="main_content1">
<div class="textbody">
<div class="blank300"></div>
<h3>2018년형 유현석</h3>
<h2>다재다능.</h2>
<p>이 지원자는 놀라움으로 가득합니다. 수 년간 다져진 코딩 능력,
다양한 창작물 제작 경험, 인문학적 소양을 바탕으로 한 공학 지식 구비,
이외에도 수많은 장점을 가진, 새로운 시대를 이끌어 갈 학생. 유현석을 만나보세요.
</p>
</div>
<div class="blank150"></div>
</section>
<section id="main_content2">
<div class="blank300"></div>
<div class="textbody">
<h3>창작 능력</h3>
<h2>A부터 Z까지, 전천후 창작자.</h2>
<p>유현석은 초등학생때부터 컴퓨터를 이용해 다양한 창작물을 만들어왔습니다.
플래시 게임을 즐기며, 그런 게임을 직접 제작하고 싶어졌고, 어린 시절 여러 습작들을 제작하며 창작의 기본 틀을 닦았습니다.
</p>
<div class="blank150"></div>
<img src="image/capture_1.PNG" alt="capture_1"></img>
<p class="imgtext" style="float:right;">이 캡처된 프로그램은 워크샵에서 사용했던 플래시입니다. 같은 그림을 찾는 고전적 알고리즘의 게임을,
워크샵에서 사용하기 위해 최적화해서 사용했습니다. 이런 프로그램은 오랜 기간 누적된 지식이 있었기에 만들 수 있었습니다.
</p>
<div class="blank150"></div>
<img src="image/capture_2.PNG" alt="capture_2"></img>
<p class="imgtext" style= "float:right;">이는 동 워크샵에서 시간을 재는 용도로 활용한 플래시입니다. 배경에 효과를 주고, 시간/디자인 변경을
쉽게 할 수 있게 하여 오래 사용할 수 있도록 했습니다.
</p>
</div>
<div class="blank150"></div>
</section>
<section id="main_content2_1">
<div class="blank150"></div>
<div class="textbody" style="color:white;">
<h3>UCC 제작도 꾸준히</h3>
<p>중학교에 진학한 이후로는, UCC 제작에 흥미가 생겨 꾸준히 UCC를 만들었습니다. 초기엔 소니 베가스를 사용하였고,
후에 프리미어와 애프터이펙트를 사용하여 더욱 수준 높은 영상을 만들기 시작했습니다
</p>
<img src="image/capture_3.PNG" alt="capture_3" ></img>
<p class="imgtext" style="float:right;">애프터 이펙트로 3D 객체를 다루던 부분을 캡처하였습니다. 위 영상을 포함해 다양한 영상을 만들며,
영상 제작 및 편집 기법에 대해 배웠습니다. 이외에도 영상 작업에 필요했던 다른 작업들(포토샵, BGM 등)도 도전해 보았습니다.
</p>
<div class="blank150"></div>
<h3>감독 및 편집 등으로 제작에 참여한 UCC입니다.</h3>
<p style="text-align:center;">이외에도 많은 UCC 제작에 참가했습니다.<p>
<img src="image/capture_4.jpg" alt="capture_4"></img>
<img src="image/capture_5.jpg" alt="capture_5" style="float:right;"></img>
<img src="image/capture_6.jpg" alt="capture_6"></img>
<img src="image/capture_7.jpg" alt="capture_7" style="float:right;"></img>
<div class="blank150"></div>
</p>
</div>
</section>
<section id="main_content3">
<div class="blank300"></div>
<div class="textbody">
<h3>공학 지식</h3>
<h2>무엇이든 뚝딱.</h2>
<p>유현석은 창작에 관한 능력 뿐만 아닌, 깊은 공학적 지식도 가지고 있습니다. 중학생부터 고등학생까지 이어진 방송부 활동에서 엔지니어로서 충실히 일했습니다. 고등학교 3학년인 현재도 몇몇 선생님은 기계 수리를 시키기 위해 저를 부르시고는 합니다.
</p>
<p>컴퓨터 공학자의 꿈을 꾸고 있었기에, 초등학교 시절 C부터 시작하여 여러 프로그래밍 언어의 기초를 공부했습니다. 또, 플래시에 사용되는 액션스크립트를 익히며 지금도 유용하게 쓰고 있는 스크립트 계열 언어들의 구조를 익혔습니다.
</p>
<img src="image/capture_8.PNG" alt="capture_8" ></img>
<p class="imgtext" style="float:right;">고등학교에 진학해 들은 기술 수업은 진로 설정에 있어서 전환점이 되었습니다. 교내 기술수업 시간에서 아두이노를 활용한 피지컬 컴퓨팅을 배웠는데, 그 과정에서 상당한 흥미와 재미를 느꼈습니다. 이 사진은 3학년 때 탐구과제로 제작한, MIDI 연주가 가능한 플로피디스크 악기입니다. 더 자세한 정보는 <a href=”https://docs.google.com/document/d/13Zg-YR62470ZcqrFkIr-_Y39L63mL0HJU6XrZfqs75E/edit?usp=sharing”>탐구보고서</a>에 나와있습니다.
</p>
<div class="blank150"></div>
<img src="image/capture_9.PNG" alt="capture_9" ></img>
<p class="imgtext" style="float:right;">이 코드는 지금 보고계신 이 홈페이지를 구성하는 코드입니다. 컴퓨터 프로그램 뿐만 아닌 웹 디자인과 프로그래밍도 능숙히 할 수 있습니다.</p>
</p>
</div>
<div class="blank300"></div>
</article>
<script>
var content2top = $('#main_content2').offset().top;
var content2_1top = $('#main_content2_1').offset().top;
var content3top = $('#main_content3').offset().top;
$(window).scroll(function(){
var scrolled = $(window).scrollTop();
var displaymin = scrolled + $(window).height();
if(scrolled < content2top) {$('#main_content1').css('background-position-y',-(scrolled*0.5)+'px');}
if(displaymin > content2top && scrolled < content2_1top) {$('#main_content2').css('background-position-y',-(scrolled*0.5)+'px');}
if(displaymin > content2_1top && scrolled < content3top) {$('#main_content2_1').css('background-position-y',(content2top-scrolled)*0.5+'px');}
if(displaymin > content3top) {$('#main_content3').css('background-position-y',(content2_1top-scrolled)*0.5+'px');}
});
</script>
</body>