0
scroll
t
h
e
a
b
s
o
l
u
t
e
b
e
s
t
d
e
v
e
l
o
p
e
r
김이형
김이형
김이형
김이형
a
t
t
e
n
    
n
t
i
o
n
a
t
t
e
n
    
n
t
i
o
n
a
t
t
e
n
    
n
t
i
o
n
잡초같은 사람입니다.
어려움에 무딪쳐도 꾸준히 일어나서 성장할 것입니다.
지속적인 도전이 큰 성취를 불러온다고 생각합니다.
실패하지 않는 것은 새로운 시도를 하지않는 것과 같기에
실패 속에서 성장하고 나아가며 배우겠습니다.
천천히 걷더라고 뒷걸음 치지 않는 자세로 임하겠습니다.
익숙함에 머물지 말고, 새로움을 추구하겠습니다.
the site
webstandard site1
웹표준을 준수하며 만든 반응형 사이트입니다. 웹접근성 및 호환성을 고려하며 HTML, CSS, javascript를 이용하였으며, 다양한 기기에서의 원활한 동작을 위해 미디어 쿼리를 사용한 반응형으로 제작하였습니다. 헤더, 슬라이더, 이미지, 텍스트, 카드, 배너, 푸터 영역으로 구성되어 있습니다.
webstandard site2
웹표준을 준수하며 만든 반응형 사이트입니다. 웹접근성 및 호환성을 고려하며 HTML, CSS, javascript를 이용하였으며, 다양한 기기에서의 원활한 동작을 위해 미디어 쿼리를 사용한 반응형으로 제작하였습니다. 헤더, 슬라이더, 이미지, 텍스트, 카드, 배너, 푸터 영역으로 구성되어 있습니다.
PHP BLOG
PHP를 이용한 블로그 사이트를 제작하였습니다. 로그인과 회원가입, 게시판과 블로그, 댓글 등의 기능들이 동작할 수 있도록 구현하였습니다. MYSQL을 이용한 데이터 관리를 하였습니다.
PHP PROJECT
PHP를 이용한 팀프로젝트를 진행하였습니다. 식물을 주제로 정보를 제공하는 사이트를 제작하였습니다. 로그인, 회원가입, 마이페이지, 댓글, 게시판과 같은 기능들이 동작할 수 있도록 구현하였습니다. MYSQL을 이용한 데이터 관리를 하였습니다.
VUE API
VUE를 사용하여, API를 활용한 사이트를 만들었습니다. 사이트에 자신을 소개하는 내용과, css 속성들을 정리한 내용을 담아내고. youtube, Unsplash, TMDB를 활용하여 유튜브 영상과 이미지 정보, 영화의 순위와 같은 정보를 알려주는 사이트를 만들었습니다.
B
A
S
I
C
B
A
S
I
C
css
html
javascript
mainsite
Reference Reference Reference Reference Reference Reference Reference
Reference Reference Reference Reference Reference Reference
R
E
A
C
T
R
E
A
C
T
API
react를 사용하여, API를 활용한 사이트를 만들었습니다. 사이트에 자신을 소개하는 내용과, css 속성들을 정리한 내용을 담아내고. youtube, Unsplash, TMDB를 활용하여 유튜브 영상과 이미지 정보, 영화의 순위와 같은 정보를 알려주는 사이트를 만들었습니다.
youtube
RAPID API를 활용하면서 유튜브 사이트를 만들어보았습니다. 좌측에 유튜버 리스트와 우측에 유튜버의 영상 목록이 있습니다. 영상을 클릭하면 영상을 플레이하거나,조회수와 좋아요와 같은 정보 확인이 가능합니다. 유튜버를 눌렀을때 채널의 정보를 보여줍니다.
PROJECT
react를 사용하여, TMDB의 API를 활용한 영화 정보를 보여주는 사이트를 만들었습니다. 인기있는 영화와 감정에 따른 장르를 필터링하여 리스트를 불어오며, 검색도 가능합니다. 영화를 클릭하면 해당 영화의 다양한 정보와 예고편을 볼 수 있습니다.
game
게임이펙트에는 다양한 체험요소를 넣었습니다. 뮤직플레이어는 음악의 재생에 필요한 기능들을 구현하였으며, 메모리게임은 뒤집힌 카드의 짝을 맞추는 게임이며, 테트리스는 블록을 채우는 게임입니다.
EFFECT
javascript
quiz
주관식과 객관식문제를 풀어보는 퀴즈 이펙트입니다. 다양한 문제를 풀거나 한문제씩 풀어볼 수 있으며 문제를 모두 풀고 점수를 확인하는 것과 한 문제씩 확인하는 유형, 오답일 경우에 해설을 보여주게 하는 등을 만들었습니다.
search
CSS 속성을 검색하는 이펙트입니다. indexOf, search, includes, charAt, find, filter와 같은 메서드를 활용하여 다양한 검색 기능을 구현했습니다. sort와 reverse를 이용한 정렬기능과 마지막에는 속성들을 시간안에 검색하는 게임을 만들었습니다.
mouse
마우스의 움직임을 통한 다양한 효과를 만들어보았습니다. javascript를 이용하고, 부드러운 움직임을 구현하기 위해 자바스크립트의 애니메이션 라이브러리인 GSAP를 활용하였습니다. 마우스 커서에 효과를 주거나 움직임에 따른 대상에 효과를 주는 것을 구현하였습니다.
slider
슬라이드를 동작하도록 만들었습니다. 이미지가 방향성을 가지고 이동하는 슬라이드를 만들었으며, 자동으로 움직이거나 버튼을 클릭하여 움직이는 방식, 닷메뉴를 클릭하거나 재생과 일시정지를 하는 것을 구현하였습니다.
parallax
다양한 방식의 패럴렉스 효과를 만들었습니다. 스크롤의 위치값을 이용한 다양한 종류의 메뉴바, 스크롤에 따라 나오는 메뉴바, 스크롤을 하면서 글자와 이미지에 이질감을 주거나 가려져 있다가 나타나는 등의 다양한 효과를 구현하였습니다.
김이형
CONTACT
CONTACT