I AM
DEVELOPER

안녕하세요, 개발의 매력은 상상하는 것을 실현하는 것이라고 생각합니다.
자기가 상상한것을 실현시키기 위해서는 많은 노력과 실력이 밑바탕이 되어야 한다고 생각합니다. 그런 부분에서, 저는 아직 많이 배워야하고, 훨씬 더 많은 노력을 해야한다는 것을 알고 있습니다. 비록 지금의 저는 많이 미숙하지만, 앞으로 항상 배우고 발전하는 개발자가 되겠습니다.

WESTENDARD SITE

웹 표준 지침서를 준수하고 크로스브라우징 작업을 한 사이트입 니다. 모든 사용자가 이용에 불편이 없도록 대체 텍스트로 웹 접 근성 또한 고려하였습니다. 슬라이드, 탭, 메뉴, 팝업, 동영상 기 능을 작업하였으며, 동적인 부분을 더하기 위해 slick.js 등과 같 은 플러그인을 이용하여 배너와 갤러리에 효과를 주었습니다. 크 로스 브라우징은 익스플로러 8버전부터 지원합니다

code view

site view

PHP SITE

PHP 만든 포트폴리오 사이트입니다. PHP로 페이지의 정보를 입력하면 데이터베이스에 입력한 정보를 저장하여 불러서 로그인, 회원가입, 댓글 기능, 블로그 기능, 퀴즈 게임 등이 각 페이지에 구현하고 메인은 슬라이스 기능을 넣고 댓글, 블로그, 퀴즈 페이지의 기능을 가져와서 페이지의 글이 추가되면 추가된 항목이 메인 페이지에도 반영이 될 수 있도록 작업하였습니다.

code view

site view

react SITE

리액트로 만든 포트폴리오 사이트입니다. 컴포넌트를 활용하여 사이트를 완성하였고, SCSS를 사용하여 스타일을 지정했습니다. 포트폴리오와 레퍼런스 페이지는 작성한 json 파일의 정보를 get방식가져오고 유튜브와 무비 페이지는 api를 활용하여 각 사이트의 정보를 포토폴리오 사이트에서도 볼 수 있도록 작업하였습니더. 검색기능도 실제 사이트에서 검색한 것처럼 사이트의 검색정보도 볼 수 있도록 기능을 구현해놓았습니다.

code view

site view

project SITE

프로젝트 사이트는 기획, 디자인, 컨셉트 등을 홀로 제작한 사이트 입니다. 사이트는 위의 소개한 PHP 사이트를 기반으로 코딩을 공부할 때 퀴즈 등의 게임으로 배우게 되면 재밌게 익하나갈 수 있을 것이라 생각하여 코딩 기초 퀴즈 사이트를 제작하게 되었습니다. 태그나 메서드, css속성 등의 가볍게 참고용으로 알아갈 수 있는 간단한 퀴즈들로 구성 되어 있습니다.

code view

site view

site View

music
javascript

음악 플레이어를 구현하였습니다.
음악 재생하기, 이전곡, 다음 곡 재생과 반복 듣기, 한번 반복, 그에 따라 아이콘 변경하기 곡이 끝나면 다음 곡 재생하기와 뮤직 리스트 펼치기 ,
리스트를 클릭하면 해당 곡 재생하기와 재생곡 시간에 따라 움직이는 바와 재생 시간 표기, 재생바를 누르면 해당 지점 음악이 재생되도록하고 곡을 재생하면
변경되는 이미지나 오디오명도 변경되어 출력되도록 하였습니다.

site View

memory
javascript

카드 암기 게임을 만들었습니다.
몇 초 동안 카드 안의 그림을 보여주고 다시 카드를 뒤집어서 뒤집힌 카드의 짝을 이루는 그림을 맞추는 게임입니다.
스타트 버튼을 누르면 게임 규칙과 설명이 나옵니다. 게임을 플레이 하시고 나시면 합산 점수와 연속으로 맞춘 갯수 등이 스코어가 나타납니다.
그 외 틀리면 이미지가 흔들리고 카드 뒤집는 도중에 다른 카드가 뒤집히지 않도록 또 맞춘 카드들은 뒤집히지 않게 하도록 구현하였습니다.

site View

typing
javascript

영문 타이핑 연습을 할 수 있는 게임입니다.
입력칸에 예제에 맞춰 타이핑하면 타이머가 움직이기 시작하면서 글자가 파란색으로 변합니다 틀리면 빨간색으로 표기 됩니다.
1분동안한 타이핑 실수와 맞은 갯수등의 스코어가 하단에 표시 됩니다 1분 동안 얼마나 타이핑 할 수 있는 지 확인해보세요!

site View

tetris
javascript

테트리스 게임입니다. 특정 모양의 블록을 쌓아올리는 게임입니다.
특정 모양의 블록을 쌓아올려서 한줄을 완성하면 사라지고 블록을 천장까지 닿지 않게 하고 최대한 점수를 내야합니다.
블록은 css로 구현하고 블록 교체와 내려오는 애니메이션, 블록을 쌓아올릴 수 있도록 바닥에 닿으면 블록이 사라지않고 쌓인 블록 위에
블록을 쌓을 수 있고 천장까지 닿으면 더 이상 블록이 내려오면 게임오버 되도록 하였습니다.

seach