코드랩 레퍼런스

Definition .finish() 메서드는 선택한 요소의 진행중인 애니메이션을 강제로 종료합니다. Syntax $("selector").finish(); Compatibility 6 7 8 9 10 11 .finish() Share

Definition .dequeue() 메서드는 스택에 쌓인 큐를 모두 제거합니다. Syntax $("selector").dequeue(); Compatibility 6 7 8 9 10 11 .dequeue() Share

Definition .delay() 메서드는 애니메이션 효과를 지연합니다. Syntax $("selector").delay() Compatibility 6 7 8 9 10 11 .delay() Share

Definition .clearQueue() 메서드는 첫 번째 큐만 실행하고 나머지 대기 중인 큐는 모두 삭제합니다. Syntax $("selector").clearQueue(); Compatibility 6 7 8 9 10 11 .clearQueue() Share

Definition .animate() 메서드는 선택한 요소에 애니메이션을 적용합니다. Syntax $("selector").animate(); Compatibility 6 7 8 9 10 11 .animate() Sample1 클릭하면 이미지가 움직이는 예제입니다. animation Click Sample2 클릭하면 width값이 변경되는 예제입니다. animation Click Sample3 slideToggle이 되는 애니메이션 예제입니다. animation Click Sample4 크기와 투명도가 변경되는 애니메이션 예제입니다. animation Click Sample5 크기, 투명도, 보더레디우스가 변경되는 애니메이션 예제입니다. animation Click Sample6 크기, 투명도, 보더가..

Definition .toggle() 메서드는 선택한 요소를 숨김/노출합니다. Syntax $("selector").toggle(); Compatibility 6 7 8 9 10 11 .toggle() Sample1 클릭하면 없어지고, 클릭하면 나타나는 예제입니다. 효과(Effect) 1 2 3 4 5 Click $(".list li").toggle(); Click $(".list li").toggle("fast"); Click $(".list li").toggle("normal"); Click $(".list li").toggle("slow"); Click $(".list li").toggle(2000); 효과(Effect) 1 2 3 4 5 Click $(".list li").toggle(); Cli..

Definition .show() 메서드는 선택한 요소를 보여줍니다. Syntax $("selector").show(); Compatibility 6 7 8 9 10 11 .show() Sample1 이미지를 보여주는 예제입니다. 효과(Effect) 1 2 3 $(".list .one1 img").show(); $(".list .one2 img").fadeIn(); $(".list .one3 img").slidedown(); $(".list img").hide(); 효과(Effect) 1 2 3 $(".list .one1 img").show(); $(".list .one2 img").fadeIn(); $(".list .one3 img").slidedown(); $(".list img").hide(); S..

Definition .hide() 메서드는 선택한 요소를 숨김니다. Syntax $("selector").hide(); Compatibility 6 7 8 9 10 11 .hide() Sample1 클릭하면 이미지가 없어지는 예제입니다. 효과(Effect) 1 2 3 $(".one1 img").hide(); $(".one2 img").fadeOut(); $(".one3 img").slideUp(); $(".list img").show(); 효과(Effect) 1 2 3 $(".one1 img").hide(); $(".one2 img").fadeOut(); $(".one3 img").slideUp(); $(".list img").show(); Sample2 클릭하면 이미지가 속도에 따라 없어지는 예제입니다..

Background-gradient는 백그라운드 그라디언트 설정을 할 수 있습니다. 속성 설명 linear-gradient 선형 그라데이션 백그라운를 설정합니다. radial-gradient 원형 그라데이션 백그라운를 설정합니다. repeating-linear-gradient 반복 선형 그라데이션 백그라운를 설정합니다. repeating-radial-gradient 반복 원형 그라데이션 백그라운를 설정합니다. Share

레이어 팝업 스타일1 See the Pen layer Popup Style1 by Webstoryboy (@webstoryboy) on CodePen. 레이어 팝업 스타일2 See the Pen layer Popup Style2 by Webstoryboy (@webstoryboy) on CodePen. 레이어 팝업 스타일3 See the Pen layer Popup Style3 by Webstoryboy (@webstoryboy) on CodePen. 레이어 팝업 스타일4 See the Pen layer Popup Style4 by Webstoryboy (@webstoryboy) on CodePen. Share

See the Pen layer Popup by Webstoryboy (@webstoryboy) on CodePen. 버튼을 클릭하면 숨겨져 있던 레이어 팝업이 보이는 가장 기본적인 레이어 팝업입니다. Popup1 Layer Popup We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated..

Dot Menu Style1 See the Pen Parallax = Dot Menu Style1 by Webstoryboy (@webstoryboy) on CodePen. Dot Menu Style2 See the Pen Parallax = Dot Menu Style2 by Webstoryboy (@webstoryboy) on CodePen. Dot Menu Style3 See the Pen Parallax = Dot Menu Style3 by Webstoryboy (@webstoryboy) on CodePen.

See the Pen Parallax = Dot Menu 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

반응형 사이트를 만들 때 제일 많이 쓰는 기법이 컨텐츠 요소를 정 가운데 오게 하는 방법입니다. 이 방법에는 여러가지 방법이 있으며 각각의 장단점이 있습니다. 컨텐츠 요소를 가운데 오게 하는 방법에 대해서 정리해보겠습니다. 1. 인라인구조 가운데 정렬 : 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다. - 부모요소(인라인구조) : text-align : center; line-height: (height값과 동일하게) 2. 블록구조 가운데 정렬 : 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다. - 요소(블록구조) : margin:0 auto; width값 설정, line-height: (height값과 동일하게) 3. 요소의 성질을 table..

패럴랙스 사이트(ParallaxScrolling)와 메뉴를 연동하여 각 섹션에 해당하는 메뉴를 표시해주는 예제입니다. Parallax Basic 예제에서 추가되는 작업입니다. See the Pen parallax = menu by Webstoryboy (@webstoryboy) on CodePen. offset값과 scrollTop값이 같으면 화면에 해당 섹션이 보입니다. scroll값이 offset값과 같거나 크면 메뉴에 active라는 클래스가 붙습니다. 이런 원리를 이용하면 패럴랙스의 기본이 완성이 됩니다. Jquery Property .eq() : .eq() 메서드는 선택한 요소의 인덱스 번호를 갖는 요소를 반환합니다. .offset() : .offset() 메서드는 선택한 요소의 좌표 값(문서 ..

Definition :target 셀렉터는 이벤트를 발생한 타겟을 선택합니다. Syntax $(":target").메서드; Compatibility 6 7 8 9 10 11 :target Share

Definition :root 셀렉터는 문서의 루트 요소를 선택합니다. Syntax $(":root").메서드; Compatibility 6 7 8 9 10 11 :root Share

Definition :odd 셀렉터는 선택된 요소 중에서 홀수 번째 요소를 선택합니다. Syntax $(":odd").메서드; Compatibility 6 7 8 9 10 11 :odd Sample1 :odd() 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀렉터는 선택된 요소 중에..

Definition :not() 셀렉터는 현재 선택한 요소의 반대 요소를 선택합니다. Syntax $(":not()").메서드; Compatibility 6 7 8 9 10 11 :not() Sample1 :not() 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀렉터는 선택된 요소..

Definition :lt(index) 셀렉터는 선택된 태그에서 인덱스보다 작은 인덱스를 가지고 있는 태그를 선택합니다. Syntax $(":lt()").메서드; Compatibility 6 7 8 9 10 11 :lt() Sample1 :lt() 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. ..

Definition :last 셀렉터는 선택된 요소 중에서 마지막 번째 요소를 선택합니다. Syntax $(":last").메서드; Compatibility 6 7 8 9 10 11 :last Sample1 :last 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀렉터는 선택된 요소..

Definition :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. Syntax $(":lang()").메서드; Compatibility 6 7 8 9 10 11 :lang() Sample1 :lang() 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀렉터는 선택된 요..

Definition :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. Syntax $(":header").메서드; Compatibility 6 7 8 9 10 11 :header Sample1 :header 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀렉터는 선택된..

Definition :gt(index) 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. Syntax $("div:gt(index)").메서드; Compatibility 6 7 8 9 10 11 :gt() Sample1 :gt() 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 ..

Definition :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. Syntax $("div:first").메서드; Compatibility 6 7 8 9 10 11 :first Sample1 :first 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀렉터는 선..

Definition :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. Syntax $("div:even").메서드; Compatibility 6 7 8 9 10 11 :even Sample1 :even 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀렉터는 선택된 요..

Definition :eq(index) 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. Syntax $("div:eq(index)").메서드; Compatibility 6 7 8 9 10 11 :eq() Sample1 :eq() 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀..

Definition :animated 셀럭터는 애니메이션 태그를 선택합니다.. Syntax $("div:animated").메서드; Compatibility 6 7 8 9 10 11 :animated Sample1 :animated 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀렉터..

Definition 형제들 선택자 다음 형제 모든 태그를 선택합니다.(prev ~ siblings) Syntax $("div ~ ul").메서드; Compatibility 6 7 8 9 10 11 Next Siblings Sample1 형제들 선택자(Next Siblings Selector) 예제입니다. 선택자(Selectors) 기본 선택자(Basic) 계층 선택자(Hierarchy) Descendant Selector 모든 자식을 선택합니다. Child Selector는 바로 하위 자식만 선택합니다.(parent > child) Next Adjacent Selector 다음 형제 태그를 선택합니다.(prev + next) Next Siblings Selector 다음 형제 모든 태그를 선택합니다.(p..

Definition 형제 선택자 다음 형제 태그를 선택합니다.(prev + next) Syntax $("div + ul").메서드; Compatibility 6 7 8 9 10 11 Next Adjacent Sample1 형제 선택자(Next Adjacent Selector) 예제입니다. 선택자(Selectors) 기본 선택자(Basic) 계층 선택자(Hierarchy) Descendant Selector 모든 자식을 선택합니다. Child Selector는 바로 하위 자식만 선택합니다.(parent > child) Next Adjacent Selector 다음 형제 태그를 선택합니다.(prev + next) Next Siblings Selector 다음 형제 모든 태그를 선택합니다.(prev ~ sib..