포트폴리오

자바스크립트를 사용하여 제작한 슬라이드 효과입니다. setInterval()을 사용하여 일정 시간이 지나면 다음 이미지가 나타나는 유형, 하단의 닷 버튼을 클릭해 원하는 이미지로 이동할 수 있는 유형, 이전 및 다음 버튼을 클릭해 이동하는 유형 등 다양한 유형의 이미지 슬라이드를 제작해 보았습니다.

CSS로 적용할 수 있는 속성들을 검색할 수 있는 사이트입니다. indexOf(), search(), charAt() 등 자바스크립트의 다양한 메서드들을 사용했습니다. 입력창에 직접 타이핑하거나, 유형을 타이핑하거나, 알파벳 첫글자를 클릭하는 등 원하는 방법으로 속성을 검색할 수 있습니다. 또한, 중요도순 혹은 오름차순, 내림차순 등 원하는 방법으로 속성들을 정렬할 수도 있습니다.

웹디자인기능사 자격증 필기 시험을 준비하며, 기출문제를 풀어볼 수 있는 퀴즈 사이트를 제작해 보았습니다. 버튼을 클릭하면 정답을 바로 확인할 수 있는 유형, 주관식으로 정답을 직접 입력할 수 있는 유형, 객관식으로 정답을 선택할 수 있는 유형, 이외에도 정답을 한 문제씩 확인할 수 있는 유형, 한번에 정답을 확인할 수 있는 유형 등 다양한 유형의 퀴즈 이펙트를 작업해 보았습니다.

자바스크립트와 CSS를 활용하여 여러 가지 마우스 이펙트 유형을 작업해 보았습니다. 단순히 커서의 모습을 바꾸고, 특정 위치에 마우스를 오버하면 커서의 형태가 바뀌는 효과에서 시작하여, GSAP를 이용해 부드러운 움직임을 구현하기도 했습니다. 이외에도 마우스 움직임에 따라 이미지 혹은 텍스트가 움직이는 애니메이션 효과를 작업해 보았습니다.

scrollTop()을 사용하여 현재 스크롤 위치를 알아내고, 위치에 따라 메뉴가 활성화되거나, 이미지나 텍스트가 서서히 나타나는 패럴랙스 이펙트를 작업해 보았습니다. 브라우저의 마지막 섹션에 다다르면 가장 위로 올라갈 수 있는 Top버튼도 제작해 주었고, 부드럽게 움직일 수 있도록 smooth 효과도 넣어주었습니다.

자바스크립트 서치 이펙트를 응용하여 게임을 제작하였습니다. 메모리 게임과 유사한 규칙으로, 제한 시간 2분 동안 최대한 많은 개수의 CSS 속성들을 타이핑하는 게임입니다. START 버튼을 클릭하면 버튼이 사라지고, 속성을 타이핑할 수 있는 입력창이 나타납니다.게임 플레이를 원하신다면, 사이트 내에서 노란색 폴더를 클릭해 주세요!

카드를 뒤집어 같은 그림을 찾는 메모리 게임입니다. 게임 시작 버튼을 클릭하면 모든 카드가 섞이고, 잠시 동안 카드들의 위치를 보여줍니다. 점수는 100점부터 시작하며, 잘못된 카드를 뒤집으면 5점씩 감점됩니다. 제한 시간은 없으나, 점수가 0점이 되면 게임이 종료됩니다. 게임 플레이를 원하신다면, 사이트 내에서 분홍색 폴더를 클릭해 주세요!

자바스크립트로 구현한 테트리스 게임입니다. 방향키로 블록을 이동시킬 수 있으며, 위쪽 방향키로 블록을 회전시킬 수 있습니다. space bar를 누르면 블록이 빠르게 낙하합니다. Line을 5줄, 10줄, 15줄 제거할 때마다 블록이 낙하하는 속도가 빨라집니다. 아직 미숙한 점은 많지만, 게임 플레이를 원하신다면, 사이트 내에서 연두색 폴더를 클릭해 주세요!