frontend developoer
PackSunHye ‘ s Portfolio
welcome to
portfolio 성장속도가 남다른 개발자 박선혜입니다.
my lovely
cat나의 평생 친구입니다.
물론 집에서 가끔 방해를 하긴 하지만 공부할 때에 곁에 있어주는 기특한 아이입니다.
저를 소개할 때에 빠질 수 없는 존재라 생각해 같이 소개합니다.
script effect 여러 이펙트의 자바스크립트를 공부해보았습니다.
-
QUIZ EEFECT
처음 배운 자바스크립트로 배열을 만들어
직접 60문제의 카드를 만들지 않고 제작했습니다. -
SEARCH EEFECT
간단한 자바스크립트 메서드를 이용하여
서치 게임을 만들어 봤습니다. -
SLIDER EEFECT
플러그인을 사용하지 않고 이미지 슬라이드를
직접 작성해보았습니다. -
MOUSE EEFECT
GSAP를 이용하여 마우스를 움직여 이미지를 반전시키거나
글자를 기울게 만들었습니다. -
PARALLAX EEFECT
패럴렉스 이펙트를 공부하여 스크롤링에 도움이 되는
사이트를 만들었습니다. -
GAME EEFECT
뮤직 플레이어, 기억력 게임, 카드 게임, 테트리스 게임등을 제작하여
게임을 할 수 있는 사이트를 만들었습니다.
사이트도 몇 개 만들어 봤습니다.SITE CODING
-
REACT SITE
- VIEW SITE
- PHP SITE
- REACT API
project & gguda
project & gguda
그 외 TIP에서 다이어리에 대한 궁금한 점이나 팁을 얻을 수 있거나, 도움을 줄 수 있습니다.
Diary & sticker site
javascript
자바스크립트를 시작하며, 변수와 객체, 배열등을 알아가고 그 에 적용하는 데이터를 불러오는 방법들인 for문과 forEarh문을 기초부터 차근히 공부해나아갔습니다. 이에 함수에 넣는 법, 다양한 조건에 실행하게 만드는 조건문 등 웹 개발에 필요한 자바스크립트와 메서드들을 공부했습니다.
quiz effect
처음으로 배웠던 이펙트로써, const 안에 정답을 넣고 if문으로 정답과 상대방이 적는 답이 같은지 확인과, 여러개의 객관식과 주관식을 문제를 일일히 적지 않아도 출력할 수 있게 하였습니다.
search effect
검색과 원하는 방식으로 나열, 또 배열안에 중요도를 표시해 선택한 중요도를 누르면 관련된 레퍼런스들만 나올 수 있게 하였습니다. 사용한 메서드는 indexOf() / search() , includes() , charAt() , find() , filter() , sort() / reverse() 등이 있습니다.
mouse effect
마우스를 움직여 어느쪽에 옮기면 커서가 변화하던가, 똑같이 움직일 때 이미지가 반전 되거나 이질감을 줄 수 있으며 폰트가 움직이거나, 반전 할 수 있습니다. GSAP를 이용해 커서의 중심을 맞추고 화면의 비율을 구해 좌표값을 구할 수 있습니다.
slider effect
이미지를 슬라이드 할 때, 다시 되돌아가는 슬라이드 와 첫번째 이미지를 복사함으로써 무한 반복으로 보이게 할 수 있고 버튼을 눌러 좌우로 움직이게 하거나, 이미지가 슬라이드 될 때 토글이 변화되는 등의 이펙트를 줄 수 있습니다. 마지막으로 auto로 움직이지만 stop버튼을 누르면 멈추게 할 수 있습니다.
parallax effect
자바스크립트를 시작하며, 변수와 객체, 배열등을 알아가고 그 에 적용하는 데이터를 불러오는 방법들인 for문과 forEarh문을 기초부터 차근히 공부해나아갔습니다. 이에 함수에 넣는 법, 다양한 조건에 실행하게 만드는 조건문 등 웹 개발에 필요한 자바스크립트와 메서드들을 공부했습니다.
responsive react site
자바스크립트를 시작하며, 변수와 객체, 배열등을 알아가고 그 에 적용하는 데이터를 불러오는 방법들인 for문과 forEarh문을 기초부터 차근히 공부해나아갔습니다. 이에 함수에 넣는 법, 다양한 조건에 실행하게 만드는 조건문 등 웹 개발에 필요한 자바스크립트와 메서드들을 공부했습니다.
responsive vue site
자바스크립트를 시작하며, 변수와 객체, 배열등을 알아가고 그 에 적용하는 데이터를 불러오는 방법들인 for문과 forEarh문을 기초부터 차근히 공부해나아갔습니다. 이에 함수에 넣는 법, 다양한 조건에 실행하게 만드는 조건문 등 웹 개발에 필요한 자바스크립트와 메서드들을 공부했습니다.
react site
자바스크립트를 시작하며, 변수와 객체, 배열등을 알아가고 그 에 적용하는 데이터를 불러오는 방법들인 for문과 forEarh문을 기초부터 차근히 공부해나아갔습니다. 이에 함수에 넣는 법, 다양한 조건에 실행하게 만드는 조건문 등 웹 개발에 필요한 자바스크립트와 메서드들을 공부했습니다.
vue site
자바스크립트를 시작하며, 변수와 객체, 배열등을 알아가고 그 에 적용하는 데이터를 불러오는 방법들인 for문과 forEarh문을 기초부터 차근히 공부해나아갔습니다. 이에 함수에 넣는 법, 다양한 조건에 실행하게 만드는 조건문 등 웹 개발에 필요한 자바스크립트와 메서드들을 공부했습니다.
react api site
자바스크립트를 시작하며, 변수와 객체, 배열등을 알아가고 그 에 적용하는 데이터를 불러오는 방법들인 for문과 forEarh문을 기초부터 차근히 공부해나아갔습니다. 이에 함수에 넣는 법, 다양한 조건에 실행하게 만드는 조건문 등 웹 개발에 필요한 자바스크립트와 메서드들을 공부했습니다.
php site
자바스크립트를 시작하며, 변수와 객체, 배열등을 알아가고 그 에 적용하는 데이터를 불러오는 방법들인 for문과 forEarh문을 기초부터 차근히 공부해나아갔습니다. 이에 함수에 넣는 법, 다양한 조건에 실행하게 만드는 조건문 등 웹 개발에 필요한 자바스크립트와 메서드들을 공부했습니다.
contact me
핱
빁
빁
빁