본문 바로가기

Frontend

 (16)
Jquery 연습 ParallaxParallax - basicParallax - menuParallax - Responsive menuParallax - side menuParallax - Dot Parallax - Dot Style1Parallax - Dot Style2Parallax - Dot Style3Parallax - Text Animation-basicParallax - Text Animationc.cssParallax - Text Animationc LatterParallax - Text Animationc Latter2Menu-Hamburger-Style1Menu-Hamburger-Style2Menu-Hamburger-Style3Modal-basicModal-Layer pop style1Modal-Layer..
Jquery 제이쿼리제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어이다. 라이브러리는 자주 사용하는 코드를 재사용 및 효율성있게 사용할 수 있도록 만들어지는 다양한 함수의 집합을 의미한다.제이쿼리는 HTML에 포함되어 있는 클라이언트 사이드 스크립트 언어를 단수화하도록 설계된 웹 브라우저 호환성을 가진 자바스크립트 라이브러리 입니다.제이쿼리 장점제이쿼리 Css를 쉽게 적용할 수 있다제이쿼리 크로스브라우징을 지원합니다제이쿼리 플러그인이 풍부합니다제이쿼리는 코드를 적게, 효율적이게 작성 할 수 있습니다.제이쿼리는 좋은 확장성이과 Ajax기능을 구현합니다.제이쿼리를 사용하는 이유 view jQiery Sample one1 one2 one3 one4 ..
JavaScript 자바스크립트 자바스크립트는 웹 브라우저에서 동작되는 스크립트 언어를 말합니다. HTML은 정적인 레이아웃을 표현한다면 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였으며 Netscape Nacigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 EXMAScript를 따르는 표준화 작업을 통해 현재는 모든 브라우저에서 지원됩니다. (jQuery - Node.js, vue.js, ...) 자바스크립트..
JS Animation JS Animation $("selector").animate(properties) properties : border, margin, padding, height, font-size, bottom, left, top, right, line-height, opacity, border-radisu (transformX) Effect Property Description .hide() 선택한 요소를 숨깁니다. .show() 선택한 요소를 보여줍니다. .tog..
GSAP Animation GSAP Animation 사이트 : https://greensock.com/ CDN : TweenMax.to(target, duration, {vars}); Position : 버튼 클릭하면 오른쪽으로 이동하기Start box box box //jquery$(".btn1").on("click",function(){ $(".box1_1,.box1_2,.box1_3").animate({ ..
SVG Animation SVG SVG(Scalable Vector Graphic)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. Rect Rect : border-radius ..
Box-shadow CSS Reference box-shadow : {h-shadow} {v-shadow} {blur} {spread} {color} {inset} / none; Porperty Description h-shadow 그림자의 수평(X) 축 거리를 나타냅니다. ..
Border-radius border-radius border-radius : border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius border-radius: 5px 6px 7px 8px; = border-top-left-radius : 5px; = border-top-right-radius : 6px; = border-bottom-right-radius : 7px; = border-bottom-left-radiu..

티스토리툴바