0

frontend

내증명사진

#프론트 개발자 # WEB 으로 돌아온 3D엔지니어 #낑깡 나는 설계를 한다. 3D 프로그램 “솔리드웍스로”로 내 몸보다 큰 기계를 디자인 하는 것이 본래 내 일이였다.
기계를 구현하는데 있어서 많은 돈 이 필요하고 사고 위험 또한 감안해야 한다.
나는 이 일을 하면서 나 자신보다는 상대방을 배려하는 엔지니어로 성장했다.
이젠 하드웨어를 넘어 소프트웨어를 디자인하려 한다.
나를 성장 시킨 이 배려심이 상상력과 함께 공간을 열어줄 것이다. 개발자 조재형

portfolio

sitepage
scriptpage
animationpage
sitepage표지

coding site

management & haedcoing

1

웹 사이트 관리
Dothome

FTP 클라이언트 서버를 사용하여 용어 정리 및 프로젝트 내용을 카탈로그로 사용하여 소분류 하여 내용을 빠르게 찾기 쉽게 정리, 채팅 기능과 광고를 넣은 정리 사이트입니다.

Management - FTP클라이언트 서버 업데이트 관리

Catalogue - 분류별로 공부한 내용을 정리 관리

Advertising - 광고 , 댓글 , 실시간 채팅기능 추가 관리

2

웹표준 사이트
Webstandrd

웹접근성지침서2.0을 바탕으로 사이트를 제작하였습니다. 웹 표준에 필요한 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성을 바탕 으로 코딩을 하였으며, 크로스브라우징도 작업하였습니다.

Web standards - 웹에서 표준적으로 사용되는 기술 규칙

Recommendation - 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성

Cross browsing - 웹 호환성 웹 접근성

3

반응형 사이트
Resoonsive

모든 장치에서 자연스럽게 나오도록 사이트를 제작하였습니다. 웹 표준에 필요한 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성을 바탕으로 코딩하였으며, 크로스 브라우징도 작업하였습니다.

Web standards - 웹에서 표준적으로 사용되는 기술 규칙

Cross browsing - 웹 호환성 웹 접근성

Resoonsive - 모든 장치에서의 호환

4

기업형 사이트
MEGABOX

swiper.js를 사용해 이미지 슬라이드를 구현하였고, 텝 메뉴가 적용되었습 니다. SVG를 이용하여 아이콘을 비롯한 이미지 최적화가 이루어졌습니다. Youtube API, 미디어 쿼리가 적용된 반응형 사이트입니다.

media query - 각각의 디바이스에 맞는 화면 구성

swiper.js - 반응형 슬라이더

Cross browsing - 웹 호환성 웹 접근성

5

PHP 사이트
PHP SITE

PHP를 사용하여 서버에서 스크립트와 화면을 구현하고 MySQL 연동 으로 DataBase에 회원관리와 게시물을 저장 등 기본적이고 동적인 웹사이트를 코딩하였습니다.

management - 회원관리 , 게시물 관리

PHP - PHP코드와 html 분리하여 동적인 페이지 설계

MySQL - 오픈 데이터베이스사용 정보저장

6

리엑트
리엑트 SITE

리엑트 싸이트 준비중 리엑트 싸이트 준비중리엑트 싸이트 준비중리엑트 싸이트 준비중리엑트 싸 리엑트 싸이트 준비중리엑트 싸이트 준비중리엑트 싸이트 준비중 리엑트 싸이트 준비중리엑트 싸이트 준비중리엑트 싸이트 준비중이트 준비중리엑트 싸이트 준비중

리엑트 싸이트 준비중

리엑트 싸이트 준비중

리엑트 싸이트 준비중

7

뷰 사이트
뷰 SITE

뷰사이트 준비중 뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중 뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중 뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중

뷰사이트 준비중

뷰사이트 준비중

뷰사이트 준비중

sitepage_back
scriptpage
animationpage
sitepage표지

coding script

javascript & jQuery

1

mouse
effect

자바스크립트와 제이쿼리를 이용하여 마우스
움직임에 따라 움직이는 스크립트를
비교 작성하였습니다. 또한,
마우스 움직임에 따른 여러가지 속성의
임팩트 효과를 정리 비교 하였습니다

2

sider
effect

자바스크립트와 제이쿼리를 이용하여 이미지
슬라이드 효과를 연출했습니다.
또한 스크립트와
제이쿼리를 비교하여속성의 임팩트
효과를 정리 비교 하였습니다

3

parllax
effect

자바스크립트와 제이쿼리를 이용하여 스크롤
움직임에 따라 변하는 페랠랙스 스크립트를
비교 작성하였습니다. 또한,
스크롤을 내릴때마다 레이아웃에 여러가지 속성의
임팩트 효과를 정리 비교 하였습니다

4

Game
effect

제이쿼리와 css를 활용하여 만든
퀴즈 게임과 퀴즈게임을 코딩 하였습니다
keyfream 그리고,
SVG 움직임에 따른 여러가지 속성의
에니메이션 효과를 사용 하였습니다

5

portfolio
Leverage design

자바스크립트와 제이쿼리를 이용하여 마우스
움직임에 따라 움직이는 스크립트를
비교 작성하였습니다. 또한,
마우스 움직임에 따른 여러가지 속성의
임팩트 효과를 정리 비교 하였습니다.

sitepage표지
sitepage_back
scriptpage_back
animationpage
animationpage표지
a n i m a t i o n switch

rotation_Text
ANIMATION

1번컨텐츠bg
1번컨텐츠bg
1번컨텐츠bg
1번컨텐츠bg

Random_Circle
ANIMATION

2번컨텐츠bg
2번컨텐츠bg
2번컨텐츠bg
2번컨텐츠bg

SVG_WAVE
ANIMATION

2번컨텐츠bg
2번컨텐츠bg
2번컨텐츠bg
2번컨텐츠bg
2번컨텐츠bg

Random_Circle
ANIMATION

4번컨텐츠bg
4번컨텐츠bg
4번컨텐츠bg
4번컨텐츠bg

thank you

새로운 도전을 하고 싶어 시작한 코딩이 삶의 많은 부분을 변화시켰습니다. 배움에 있
어서 늘 겸손한 자세로 피드백을 받아들이고, 포기하지 않고 끈기와 인내로 성장해 나
가는 개발자가 되는것이 저의 목표 입니다.

개발자 조재형

My Information

  • E-mail
  • Number
  • KaKao
  • Social
  • Github

My Skill

프로그램아이콘

frontend

내증명사진

#프론트 개발자 # WEB 으로 돌아온 3D엔지니어 #낑깡 나는 설계를 한다. 3D 프로그램 “솔리드웍스로”로 내 몸보다 큰 기계를 디자인 하는 것이 본래 내 일이였다. 기계를 구현하는데 있어서 많은 돈 이 필요하고 사고 위험 또한 감안해야 한다. 나는 이 일을 하면서 나 자신보다는 상대방을 배려하는 엔지니어로 성장했다. 이젠 하드웨어를 넘어 소프트웨어를 디자인하려 한다. 나를 성장 시킨 이 배려심이 상상력과 함께 공간을 열어줄 것이다. 개발자 조재형

본페이지는 모바일 페이지 입니다

*PC 또는 테블릿 가로버전 으로 보시면 더 좋은 컨텐츠를 제공합니다*

p

o

r

t

f

o

l

i

o

나의 사진
나의 사진
나의 사진
나의 사진
sitepage표지

coding site

management & haedcoing

1

웹 사이트 관리
Dothome

FTP 클라이언트 서버를 사용하여 용어 정리 및 프로젝트 내용을 카탈로그로 사용하여 소분류 하여 내용을 빠르게 찾기 쉽게 정리, 채팅 기능과 광고를 넣은 정리 사이트입니다.

Management - FTP클라이언트 서버 업데이트 관리

Catalogue - 분류별로 공부한 내용을 정리 관리

Advertising - 광고 , 댓글 , 실시간 채팅기능 추가 관리

2

웹표준 사이트
Webstandrd

웹접근성지침서2.0을 바탕으로 사이트를 제작하였습니다. 웹 표준에 필요한 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성을 바탕 으로 코딩을 하였으며, 크로스브라우징도 작업하였습니다.

Web standards - 웹에서 표준적으로 사용되는 기술 규칙

Recommendation - 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성

Cross browsing - 웹 호환성 웹 접근성

3

반응형 사이트
Resoonsive

모든 장치에서 자연스럽게 나오도록 사이트를 제작하였습니다. 웹 표준에 필요한 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성을 바탕으로 코딩하였으며, 크로스 브라우징도 작업하였습니다.

Web standards - 웹에서 표준적으로 사용되는 기술 규칙

Cross browsing - 웹 호환성 웹 접근성

Resoonsive - 모든 장치에서의 호환

4

기업형 사이트
MEGABOX

swiper.js를 사용해 이미지 슬라이드를 구현하였고, 텝 메뉴가 적용되었습 니다. SVG를 이용하여 아이콘을 비롯한 이미지 최적화가 이루어졌습니다. Youtube API, 미디어 쿼리가 적용된 반응형 사이트입니다.

media query - 각각의 디바이스에 맞는 화면 구성

swiper.js - 반응형 슬라이더

Cross browsing - 웹 호환성 웹 접근성

5

PHP 사이트
PHP SITE

PHP를 사용하여 서버에서 스크립트와 화면을 구현하고 MySQL 연동 으로 DataBase에 회원관리와 게시물을 저장 등 기본적이고 동적인 웹사이트를 코딩하였습니다.

management - 회원관리 , 게시물 관리

PHP - PHP코드와 html 분리하여 동적인 페이지 설계

MySQL - 오픈 데이터베이스사용 정보저장

6

리엑트
리엑트 SITE

리엑트 싸이트 준비중 리엑트 싸이트 준비중리엑트 싸이트 준비중리엑트 싸이트 준비중리엑트 싸 리엑트 싸이트 준비중리엑트 싸이트 준비중리엑트 싸이트 준비중 리엑트 싸이트 준비중리엑트 싸이트 준비중리엑트 싸이트 준비중이트 준비중리엑트 싸이트 준비중

리엑트 싸이트 준비중

리엑트 싸이트 준비중

리엑트 싸이트 준비중

7

뷰 사이트
뷰 SITE

뷰사이트 준비중 뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중 뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중 뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중뷰사이트 준비중

뷰사이트 준비중

뷰사이트 준비중

뷰사이트 준비중

sitepage표지
sitepage표지

coding script

javascript & jQuery

1

mouse
effect

자바스크립트와 제이쿼리를 이용하여 마우스
움직임에 따라 움직이는 스크립트를
비교 작성하였습니다. 또한,
마우스 움직임에 따른 여러가지 속성의
임팩트 효과를 정리 비교 하였습니다

2

sider
effect

자바스크립트와 제이쿼리를 이용하여 이미지
슬라이드 효과를 연출했습니다.
또한 스크립트와
제이쿼리를 비교하여속성의 임팩트
효과를 정리 비교 하였습니다

3

parllax
effect

자바스크립트와 제이쿼리를 이용하여 스크롤
움직임에 따라 변하는 페랠랙스 스크립트를
비교 작성하였습니다. 또한,
스크롤을 내릴때마다 레이아웃에 여러가지 속성의
임팩트 효과를 정리 비교 하였습니다

4

Game
effect

제이쿼리와 css를 활용하여 만든
퀴즈 게임과 퀴즈게임을 코딩 하였습니다
keyfream 그리고,
SVG 움직임에 따른 여러가지 속성의
에니메이션 효과를 사용 하였습니다

5

portfolio
Leverage design

자바스크립트와 제이쿼리를 이용하여 마우스
움직임에 따라 움직이는 스크립트를
비교 작성하였습니다. 또한,
마우스 움직임에 따른 여러가지 속성의
임팩트 효과를 정리 비교 하였습니다.

sitepage표지
animationpage표지

rotation_Text
ANIMATION

cube
ANIMATION

shooting_star
ANIMATION

octopus_leg
ANIMATION

thank you

새로운 도전을 하고 싶어 시작한 코딩이 삶의 많은 부분을 변화시켰습니다. 배움에 있
어서 늘 겸손한 자세로 피드백을 받아들이고, 포기하지 않고 끈기와 인내로 성장해 나
가는 개발자가 되는것이 저의 목표 입니다.

개발자 조재형

My Information

  • E-mail
  • Number
  • KaKao
  • Social
  • Github

My Skill

프로그램아이콘