목록2018/01 (97)
코드랩 레퍼런스
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..
Definition 자식 선택자는 바로 하위 자식만 선택합니다.(parent > child) Syntax $("div > ul").메서드; Compatibility 6 7 8 9 10 11 Child Sample1 자식 선택자(Child Selector) 예제입니다. 선택자(Selectors) 기본 선택자(Basic) 계층 선택자(Hierarchy) Descendant Selector 모든 자식을 선택합니다. Child Selector는 바로 하위 자식만 선택합니다.(parent > child) Next Adjacent Selector 다음 형제 태그를 선택합니다.(prev + next) Next Siblings Selector 다음 형제 모든 태그를 선택합니다.(prev ~ siblings) 기본필터 ..
Definition 자손 선택자 모든 자식을 선택합니다. Syntax $("div ul").메서드; Compatibility 6 7 8 9 10 11 Descendant Sample1 자손 선택자(Descendant Selector) 예제입니다. 선택자(Selectors) 기본 선택자(Basic) 계층 선택자(Hierarchy) Descendant Selector 모든 자식을 선택합니다. Child Selector는 바로 하위 자식만 선택합니다.(parent > child) Next Adjacent Selector 다음 형제 태그를 선택합니다.(prev + next) Next Siblings Selector 다음 형제 모든 태그를 선택합니다.(prev ~ siblings) 기본필터 선택자(Basic Fi..
Definition 다중 셀렉터는 여러가지 태그를 선택합니다. Syntax $("element, element, ....").메서드; Compatibility 6 7 8 9 10 11 element Sample1 다중 Element 예제입니다. 선택자(Selectors) 전체 셀렉터는 전체 태그를 선택합니다. 클래스 셀렉터는 클래스 태그를 선택합니다. 아이디 셀렉터는 아이디 태그를 선택합니다. 태그 셀렉터는 기본 태그를 선택합니다. 다중 셀렉터는 여러가지 태그를 선택합니다. 기본 선택자입니다. 선택자(Selectors) 선택자입니다. $("#one1").addClass("on");//아이디 선택자 $(".one2").addClass("on");//클래스 선택자 $("*").addClass("on"); /..
Definition 태그 셀렉터는 기본 태그를 선택합니다. Syntax $("element").메서드; Compatibility 6 7 8 9 10 11 element Sample1 Element 예제입니다. 선택자(Selectors) 전체 셀렉터는 전체 태그를 선택합니다. 클래스 셀렉터는 클래스 태그를 선택합니다. 아이디 셀렉터는 아이디 태그를 선택합니다. 태그 셀렉터는 기본 태그를 선택합니다. 다중 셀렉터는 여러가지 태그를 선택합니다. 기본 선택자입니다. 선택자(Selectors) 선택자입니다. $("#one1").addClass("on");//아이디 선택자 $(".one2").addClass("on");//클래스 선택자 $("*").addClass("on"); // 전체 선택자 $("li").add..
Definition 아이디 셀렉터는 아이디 태그를 선택합니다. Syntax $("#id").메서드; Compatibility 6 7 8 9 10 11 #id Sample1 아이디 선택자 예제입니다. 선택자(Selectors) 전체 셀렉터는 전체 태그를 선택합니다. 클래스 셀렉터는 클래스 태그를 선택합니다. 아이디 셀렉터는 아이디 태그를 선택합니다. 태그 셀렉터는 기본 태그를 선택합니다. 다중 셀렉터는 여러가지 태그를 선택합니다. 기본 선택자입니다. 선택자(Selectors) 선택자입니다. $("#one1").addClass("on");//아이디 선택자 $(".one2").addClass("on");//클래스 선택자 $("*").addClass("on"); // 전체 선택자 $("li").addClass(..
Definition 클래스 셀렉터는 클래스 태그를 선택합니다. Syntax $(".class").메서드; Compatibility 6 7 8 9 10 11 .class Sample1 Selector .class 예제입니다. 선택자(Selectors) 전체 셀렉터는 전체 태그를 선택합니다. 클래스 셀렉터는 클래스 태그를 선택합니다. 아이디 셀렉터는 아이디 태그를 선택합니다. 태그 셀렉터는 기본 태그를 선택합니다. 다중 셀렉터는 여러가지 태그를 선택합니다. 기본 선택자입니다. 선택자(Selectors) 선택자입니다. $("#one1").addClass("on");//아이디 선택자 $(".one2").addClass("on");//클래스 선택자 $("*").addClass("on"); // 전체 선택자 $("..
Definition (*)전체 셀렉터는 전체 태그를 선택합니다. Syntax $("*").메서드; Compatibility 6 7 8 9 10 11 * Sample1 sample 예제입니다. 선택자(Selectors) 전체 셀렉터는 전체 태그를 선택합니다. 클래스 셀렉터는 클래스 태그를 선택합니다. 아이디 셀렉터는 아이디 태그를 선택합니다. 태그 셀렉터는 기본 태그를 선택합니다. 다중 셀렉터는 여러가지 태그를 선택합니다. 기본 선택자입니다. 선택자(Selectors) 선택자입니다. $("#one1").addClass("on");//아이디 선택자 $(".one2").addClass("on");//클래스 선택자 $("*").addClass("on"); // 전체 선택자 $("li").addClass("on"..
반복문 반복되는 부분을 실행할 때 사용하는 제어문입니다. while문 var 변수 = 초기값 while (조건식){ 실행문; 증감식; } Sample1 while 1번째 실행 2번째 실행 3번째 실행 4번째 실행 5번째 실행 6번째 실행 7번째 실행 8번째 실행 9번째 실행 10번째 실행 ... Sample2 100보다 작은 숫자에서 4의배수 6의배수 출력하기 12 24 36 48 60 72 84 96 ... Sample3 100보다 작은 숫자에서 짝수는 파란색, 홀수는 빨간색 출력하기 1 2 3 4 5 6 7 8 ..... 93 94 95 96 97 98 99 100 ... do while문 while 문의 경우에는 조건식의 만족 여부를 먼저 검사한 후, 중괄호에 있는 실행문의 실행 여부를 결정합니다...
조건문(제어문) 조건문은 말 그대로 조건에 맞으면 실행하고, 맞지 않으면 다른 코드를 실행하도록 조건을 거는 제어문입니다. if문 if문 단독으로 사용하는 형태입니다. if (조건) { //실행코드 } Example1 View ... Example2 View ... if ~ else문 두개의 값을 비교하여 코드를 별개로 실행합니다. if (조건) { //참일 때 실행 코드 } else { //거짓일 때 실행 코드 } Example1 View ... Example2 View ... Example3 View ... 다중 if문 여러가지 조건에 따라 조건문을 설정합니다. if (조건) { //참일 때 실행 코드 } else if { //앞 조건이 거짓일 때 실행 코드 } else if { //앞 조건이 거짓일..
자바스크립트를 쓰기 위한 기본 문법입니다. 프로그램을 작성할 때 일정한 규칙을 지켜줘야 오류 없이 실행할 수 있습니다. 대문자와 소문자 자바스크립트는 대문자와 소문자를 구별하여 처리해야 합니다. 토근과 공백문자 프로그램을 구성하는 최소 단위를 토근(어휘)이라고 하며, 자바스크립트는 프로그램을 실행하기 전에 프로그램을 토큰으로 분해하여 처리합니다. 이런 동작을 구문 분석(파싱)이라고 합니다. 자바스크립트 주석 일반적으로 특정 코드에 대한 설명을 입력하거나 특정한 부분의 코드가 실행되지 않도록 사용하는 용도로 사용합니다. 주석 표시는 프로그램에 영향을 미치지 않습니다. /* ... */ : 여러줄에 주석을 적용하는 경우 // : 한 줄에 주석을 적용하는 경우 키워드와 식별자 자바스크립트에는 의미를 가진 단어..