코드랩 레퍼런스

See the Pen SVG Text Animation4 by Webstoryboy (@webstoryboy) on CodePen.

See the Pen SVG - Text Animation3 by Webstoryboy (@webstoryboy) on CodePen.

See the Pen SVG - Text Animation2 by Webstoryboy (@webstoryboy) on CodePen.

See the Pen SVG - Text Animation by Webstoryboy (@webstoryboy) on CodePen.

See the Pen Mouse Event by Webstoryboy (@webstoryboy) on CodePen.

See the Pen Mouse Hover Image Change by Webstoryboy (@webstoryboy) on CodePen.

데이터 타입이란 변수에 저장되는 데이터 종류를 말합니다. 변수에는 숫자, 문자, 불린, 함수, 객체, 심벌 등 여러가지 유형을 넣을 수 있습니다. 데이터 타입 자바스크립트에서 데이터 타입은 원시 타입과 객체 타입으로 나눌 수 있습니다. 원시 타입은 데이터를 구성하는 가장 기본적인 불변 값이며, 원시타입에 속하지 않는 값은 객체라고 합니다. 객체 타입의 값을 변수에 대입하면 변수에는 그 객체에 대한 메모리가 할당됩니다. 자바스크립트에서는 배열, 함수, 정규 표현식이 객체에 해당됩니다. 심벌은 ECMAScript6에서 새로 추가된 값입니다. 자료형 설명 원시 타입 숫자(Number) 정수와 실수가 있지만, 자바스크립트에서는 정수와 실수를 구분하지 않고 사용할 수 있습니다. 문자열(String) "문자", "..

자바스크립트를 쓰기 위한 기본 문법입니다. 프로그램을 작성할 때 일정한 규칙을 지켜줘야 오류 없이 실행할 수 있습니다. 대문자와 소문자 자바스크립트는 대문자와 소문자를 구별하여 처리해야 합니다. 토근과 공백문자 프로그램을 구성하는 최소 단위를 토근(어휘)이라고 하며, 자바스크립트는 프로그램을 실행하기 전에 프로그램을 토큰으로 분해하여 처리합니다. 이런 동작을 구문 분석(파싱)이라고 합니다. 자바스크립트 주석 일반적으로 특정 코드에 대한 설명을 입력하거나 특정한 부분의 코드가 실행되지 않도록 사용하는 용도로 사용합니다. 주석 표시는 프로그램에 영향을 미치지 않습니다. /* ... */ : 여러줄에 주석을 적용하는 경우 // : 한 줄에 주석을 적용하는 경우 키워드와 식별자 자바스크립트에는 의미를 가진 단어..

Node.js 설치 편집기 설치 서브라임 텍스트 설치하기 웹 스톰 설치하기 비쥬얼 스튜디오 설치하기 어도비 브래킷 설치하기 웹브라우저 콘솔에서 실행하기 윈도우에서 확장자 표시 설정 윈도우7에서 변경하기 시작 - 제어판 - 모양 및 개인 설정 - 폴더 옵션 보기 탭에서 알려진 파일 형식의 파일 확장명 숨기기 체크 해제 윈도우10에서 변경하기 시작 - 파일 탐색기 - 보기 탭의 파일 확장명 체크 맥에서 변경하기 Finder - 환경 설정 고급 탭 - 모든 파일 확장자 보기 체크

PHP

See the Pen Random Gradient Background by Webstoryboy (@webstoryboy) on CodePen.

See the Pen Random Background by Webstoryboy (@webstoryboy) on CodePen.

See the Pen Linear Gradient Mouse Effect by Webstoryboy (@webstoryboy) on CodePen.

See the Pen Hover Effect Text by Webstoryboy (@webstoryboy) on CodePen.

See the Pen Parallax - Text Animation - letter2 by Webstoryboy (@webstoryboy) on CodePen. Intro Skill Website Work About Contact Never say never. Love conques all. Every wall is a door. Don't dream it, be it. Do it Now! Practice makes perfect. Share

See the Pen Parallax Text Animation - letter by Webstoryboy (@webstoryboy) on CodePen. Intro Skill Website Work About Contact Never say never. Love conques all. Every wall is a door. Don't dream it, be it. Do it Now! Practice makes perfect. Share

See the Pen Parallax Text Animation - animate.css by Webstoryboy (@webstoryboy) on CodePen. Intro Skill Website Work About Contact Love conquers all. Every wall is a door. Never say never. Don't dream it, be it. Do it Now! Practice makes perfect. Share

See the Pen Parallax Text Animaion by Webstoryboy (@webstoryboy) on CodePen. Intro Skill Website Work About Contact Love conquers all. Every wall is a door. Never say never. Don't dream it, be it. Do it Now! Practice makes perfect. Share

See the Pen Parallax - Side Nav by Webstoryboy (@webstoryboy) on CodePen. Side Menu Bar Intro Skill Coding Design About Contact Open 시간은 금이다. 삶이 있는 한 희망은 있다 피할수 없으면 즐겨라 먼저핀 꽃은 먼저진다 모든 인생은 실험이다 내일은 내일의 태양이 뜬다 Share

See the Pen Parallax - Responsive Nav by Webstoryboy (@webstoryboy) on CodePen. WEB'S Intro Skill Coding Design About Contact 피할수 없으면 즐겨라 삶이 있는 한 희망은 있다 시간은 금이다. 먼저핀 꽃은 먼저진다 모든 인생은 실험이다 내일은 내일의 태양이 뜬다 Share

See the Pen Parallax = Dot Menu Style - box-shadow by Webstoryboy (@webstoryboy) on CodePen. Intro Skill Website Work About Contact Raise Your Head Time is Life itself The Life is only once I must do what I want to do Think Different There is no destiny Share

See the Pen Parallax = Dot Menu Style - opacity by Webstoryboy (@webstoryboy) on CodePen. Intro Skill Website Work About Contact Raise Your Head Think Different The Life is only once I must do what I want to do Time is Life itself There is no destiny Share

See the Pen Parallax = Dot Menu Style1 by Webstoryboy (@webstoryboy) on CodePen. Intro Skill Website Work About Contact Think Different Raise Your Head The Life is only once I must do what I want to do Time is Life itself There is no destiny Share

See the Pen Parallax - Show/Hide Menu by Webstoryboy (@webstoryboy) on CodePen. Intro Skill Coding Design About Contact Pardon all but yourself Better late than never Naver, never, give up Who dares, Wins Shor out "once more" Big goals gets big result Share

See the Pen Parallax - Hidden Menu by Webstoryboy (@webstoryboy) on CodePen. Intro Skill Coding Design About Contact Who dares, Wins Better late than never Naver, never, give up Pardon all but yourself Shor out "once more" Big goals gets big result Share

See the Pen Parallax - Sticky Nav by Webstoryboy (@webstoryboy) on CodePen. Intro Skill Coding Design About Contact Who dares, Wins Better late than never Naver, never, give up Pardon all but yourself Shor out "once more" Big goals gets big result Share

스케이러블 벡터 그래픽스(Scalable Vector Graphic, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML기반의 파일 형식으로, 1999년 W3C의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. Sample1 사각형과 보더값을 적용한 SVG입니다. Sample2 사각형에 보더 레디우스를 적용한 SVG입니다. Sample3 원형 SVG입니다. Sample4 타원형 SVG입니다. Sample5 폴리건 SVG입니다.

mo.js는 자바스크립트 애니메이션 플러그인 입니다. mo.js를 이용하면 애니메이션을 쉽고 퀄리티 있게 구현 할 수 있습니다. mojs.io CSS API Reference 속성 기본값 설명 el null 선택자 선택 x 0 translateX 속성 값 설정 y 0 translateY 속성 값 설정 z 0 translateZ 속성 값 설정 skewX 0 skewX 속성 값 설정 skewY 0 skewY 속성 값 설정 angleX 0 rotateX 속성 값 설정 angleY 0 rotateY 속성 값 설정 angleZ 0 rotateZ 속성 값 설정 scale 1 scale 속성 값 설정 scaleX 1 scaleX 속성 값 설정 scaleY 1 scaleY 속성 값 설정 opacity 1 투명도 속성 ..

mo.js는 자바스크립트 애니메이션 플러그인 입니다. mo.js를 이용하면 애니메이션을 쉽고 퀄리티 있게 구현 할 수 있습니다. mo.js 사이트 : mojs.io mo.js로 만든 사이트 : www.cartoonnetworkstudios.com Sample1 클릭하면 움직이는 기본 예제입니다. Mojs Click Sample2 클릭하면 크기가 작아지는 애니메이션입니다. Mojs Click Sample3 클릭하면 보더 속성 값을 변경하는 예제입니다. Mojs Click Sample4 여러가지 Shape 속성을 설정합니다. Sample5 여러가지 Shape 속성을 설정합니다. Sample6 요소의 위치를 랜덤으로 설정합니다.

anime.js는 자바스크립트 애니메이션 플러그인 입니다. anime.js를 이용하면 애니메이션을 쉽고 퀄리티 있게 구현 할 수 있습니다. animejs.com Sample1 클릭하면 이미지가 움직이는 예제입니다. Anime Click Sample2 움직이는 요소를 변수에 설정하는 예제입니다. Anime Click Sample3 여러개의 요소를 변수에 설정하는 예제입니다. Anime Anime Anime Click Sample4 CSS 속성을 적용한 예제입니다. Anime Click Sample5 CSS Transform 속성을 적용한 예제입니다. Anime Click Sample6 오브젝트 속성을 변경하는 예제입니다. {"prop":4,"prop2":"8%"} Click Sample7 오브젝트 속성을 ..