코드랩 레퍼런스

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 { //앞 조건이 거짓일..

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

배열 배열은 여러개의 데이터를 순차적으로 저장하는 저장소입니다. var 변수명 = [값 1, 값 2, 값 3.....]; Sample1 배열 선언 300 100 200 ... Sample2 배열 선언과 동시에 초기화하기 600 100 200 300 ... Sample2 배열의 크기 구하기 5 ... Sample2 for문을 이용한 배열의 합 구하기 5500 ... Share

변수는 하나의 데이터를 처리하는 저장소 역할을 합니다. 변수는 프로그램을 작성하는 데 가장중요한 요소이므로 선언하는 방법과 이름 짓는 방법에 대해서 알아보도록 하겠습니다. 변수의 선언 var 변수명 = 값; Sample1 변수 10 200 javascript 210 2000 변수의 종류 변수는 사용 가능 범위에 따라 4가지로 구분됩니다. 지역 변수 : 특정 범위 안에서만 사용하는 경우 전역 변수 : 모든 영역 안에서 사용하는 경우 매개변수(파라미터) : 함수 외부에서 함수 내부로 데이터를 전달하기 위해 사용하는 경우 멤버변수(프로퍼티) : 클래스 내부에 만들어지며 주로 객체에서 사용하는 경우 Sample1 지역 변수 / 전역 변수 area 함수 안 x의 값 : 300 y의 값 : 600 z의 값 : 50..

자바스크립트 자바스크립트(JavaScript)는 웹 브라우저에서 동작되는 스트립트 언어를 말합니다. HTML은 정적인 레이아웃을 표현한다면, 자바스트립트(JavaScript)는 동적인 기능을 표현합니다. 자바스크립트(JavaScript)는 1995년 넷그케이프 커뮤니케이션스의 브렌던 아이크가 개발하였으며 Netscape Navigator 2.0에 구현되었습니다. 1996년에는 마이크로소프트 사의 Internet Explorer3.0에 탑대되었으며 Java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 EXMAScript를 따르는 표준화 작업을 통해 현재는 모든 브라우저에서 지원됩니다. 자바스크립트 언어의 특징 자바스크립트는 인터프린터 언어입니다. 자바스크립..

css를 통해서 글씨를 줄이거나 안보이게 하는 효과입니다. Sample1 한 줄 일경우 원하는 크기만큼 줄임효과를 보여줍니다. 한 줄 효과 문서에 대한 대체 링크를 설정합니다. 문서에 대한 저자 링크를 설정합니다. 문서에 대한 북마크 URL을 설정합니다. 문서에 대한 도움과 관련된 링크를 설정합니다. 문서에 대한 저작권과 관련된 링크를 설정합니다. 문서에 대한 다음 문서 링크를 제공합니다. 문서에 대한 링크를 사용하지 않을 때 설정합니다. 문서에 대한 대체 링크를 설정합니다. 문서에 대한 저자 링크를 설정합니다. 문서에 대한 북마크 URL을 설정합니다. 문서에 대한 도움과 관련된 링크를 설정합니다. 문서에 대한 저작권과 관련된 링크를 설정합니다. 문서에 대한 다음 문서 링크를 제공합니다. Sample2 ..

Definition .index() 메서드는 이벤트가 발생한 요소의 인덱스 값을 반환합니다 Syntax $(selector).index(); $(selector).index(selector); $(selector).index(element); Compatibility 6 7 8 9 10 11 .index() Sample1 index를 이용해 li를 선택하는 예제입니다. 필터링(Filtering) : 글을 클릭하여 인덱스를 확인합니다. .eq() : 인덱스 번호에 해당하는 요소를 찾습니다. .filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다. .first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다. .has() : 선택된 요소들이 자신의 ..

패럴랙스 사이트(ParallaxScrolling)의 가장 기본이 되는 예제입니다. 각 버튼의 값과 각각의 컨텐츠 값을 ainmate로 연결해주는 작업입니다. 그럴려면 스크롤 값을 구해서 body한테 넣어주면 자연스러운 애니메이션이 형성됩니다. See the Pen Parallax by Webstoryboy (@webstoryboy) on CodePen. Jquery Property .eq() : .eq() 메서드는 선택한 요소의 인덱스 번호를 갖는 요소를 반환합니다. .offset() : .offset() 메서드는 선택한 요소의 좌표 값(문서 기준)을 설정하거나 반환합니다. .animate() .scrollTop() : .scrollTop() 메서드는 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다..

Parallax Style 종류 설명 Parallax Basic Parallax 기본 스타일입니다. Parallax Basic2 Parallax 메뉴 연동하기

Sublime Text는 기본 셋팅을 소스를 통해 수정할 수 있습니다. GUI 방식이 아니기 때문에 처음에는 어려울 수 있지만 디테일한 부분까지 설정할 수 있어 전문성이 뛰어납니다. Preferencs > setting Default Uers "font_face": "", 폰트 종류 설정 "font_size": 10, 폰트 사이즈 설정 "font_options": [], 폰트 옵션 설정 "line_numbers": true, 줄 번호 설정 "gutter": true, 기본 간격 설정 "margin": 4, 간격 설정 "fold_buttons": true, 접기 버튼 설정 "fade_fold_buttons": true, 마우스를 올리기 전에 버튼을 감춥니다. "rulers": [], 세로 간격 설정 "sp..

Sublime Text는 코딩, 마크업을 하기 위한 에디터입니다. Sublime Text 의 다양한 기능을 제공하는 플러그인을 알아보겠습니다. 플러그인은 프로그램에 설치하면 바로 사용 할 수 있는 확장기능을 말합니다. Sublime Text 플러그인 Emmet : 복잡한 코드를 간단하게 만들어주는 플러그인 Sftp : 호스팅 서버와 연결해 주는 파일 전송 프로그램 SideBarEnhancements : 사이드바 기능 향상 플러그인 AutoFileName : 자동으로 주변 경로를 불러오는 플러그인입니다. Color Picker : CSS 컬러 색을 편하게 설정할 수 있는 플러그인 AutoPrefixr : 자동으로 벤더프리픽스를 만들어주는 플러그인 Minifier : 코드를 빈칸없이 최소한으로 만들어주는 플..

제이쿼리는 사이트 개발에 필수적인 요소이며, 플러그인 역시 없어서는 안되는 필수적인 요소입니다. 제이쿼리 플러그인은 검색하면 쉽게 구할 수 있지만, 쉽게 구하는 만큼 프로젝트와의 호환성과 품질등을 고려해야 합니다. 그래서 프러그인을 선택할 때 살펴보아야 할 항목을 정리하였습니다. 문서 정리가 깔끔한가? 좋은 플러그인은 그만큼 문서도 보기 좋게 정리가 잘 되어 있다. 보기 좋게 정리되었다는 것은 그 만큼 플러그인 배포에 신경을 쓰고 소스에도 신경을 많이 썼다는 얘기이다. 업데이트는 잘되는가? 좋은 플러그인은 주기적으로 업데이트가 발생하며, 여러가지 문제점이나 호환성을 수시로 신경씁니다. 개발자의 배포 버전 관리가 잘 되어 있다면, 버그나 애로 사항들도 지원을 받을 수 있다는 얘기입니다. 또한 깃허브나 블러..

HTML5 Shiv는 구 브라우저에서 HTML5 태그를 인식시키는 스크립트입니다. HTML5 Shiv https://github.com/aFarkas/html5shiv HTML5 Shiv는 구 버전의 브라우저가 header, nav, aside, nav, section 같은 html5 태그를 인식할 수 있도록 설정해주는 스크립트입니다. 익스플로러 6~8버전은 새로운 HTML5 태그를 인식 할 수 없기 때문에 구조가 깨지는 문제가 생깁니다. 이 문제를 해결하려면 이 스크립트를 연동하면 됩니다. 구 익스플로러에서 생기는 문제이기 때문에 조건식 주석으로 설정해주면 해당 브라우저에서만 다운 받을 수 있게 할 수 있습니다.

Moderniz는 구 버전 브라우저에서 HTML5와 CSS3의 기능을 확인하기 위한 스크립트입니다. Modernizr modernizr.com Moderniz는 구 버전 브라우저에서 HTML5와 CSS3의 기능을 확인하기 위한 스크립트입니다. 브라우저 검사를 통해 HTML 요소에 어떤 기능이 지원이 되는지 확인 할 수 있으며, CSS3를 지원하는 경우와, 지원하지 않는 경우의 CSS작업이 가능합니다. Moderniz 소스를 연동하면 다음과 같이 html 태그 표현 가능한 CSS들이 나열됩니다. 그럼 CSS3의 지원 여부에 따라 다음과 같이 코드를 작성할 수 있습니다. /* background-size 미지원 할 경우 */ background-image: url(../img/img.jpg); backgro..

.scrollTop() 메서드는 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다. Definition .scrollTop() 메서드는 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다. Syntax $(selector).scrollTop(); Compatibility 6 7 8 9 10 11 .scrollTop() Sample 선택한 요소의 속성 값을 가져옵니다. offset().left = 0px offset().top = 0px position().left = 0px position().top = 0px scrollLeft = 0px scrollTop = 0px Drag offset().left = 0px offset().top = 0px position().left = 0px positio..

개념적인 요소들은 검색해 보면 나오니까 생략할께요^^ 반응형 디자인 3요소만 확인하면 그리드 레이아웃, 가변형 이미지, 미디어쿼리입니다. 스프라이트 이미지 기법은 여기를 참고해주세요 http://darum.daum.net/convention/image 기술적인 질문 1. display:inline 과 display:block의 차이점이 무엇인가요? display:inline은 텍스트 요소를 말하여 display:block은 박스 영역을 의미합니다. 참고 : http://coderap.tistory.com/303 2. dl,dd가 무엇인가요? ul, li 는 목록형 태그를 의미하며, dl은 설명형 목록 태그를 의미합니다. dd은 설명형 목록 태그의 목록 요소를 의미합니다. 참고 : http://codera..

마인드 맵은 아이디어를 시각화하고 개발에 도움을 주는 도구입니다. 마인드마이스터(MindMeister) www.mindmeister.com MindMeister는 아이디어를 시작적으로 구성, 개발하고 공유할 수 있는 온라인 마인드맵 도구입니다. MindMeister 모바일 앱에서도 작동이 되며, 여러가지 테마를 선택하여 작업할 수 있습니다. 마인드 맵을 공유하고, 프레젠테이션 기능도 할 수 있습니다. 코글(Coggle) http://coggle.it Coggle도 브라우저 기반의 마인드맵 도구입니다. 필기와 메모가 가능하며, 모든 사람들이 공유 할 수 있습니다. 사진을 추가하고 히스토리를 이용할 수 있으며, 이메일을 추가하여 알람을 받을 수 있으며, 프리젠텐이션이 가능합니다.

Emmet은 코딩을 빠르고 쉽게 만들어 주는 초고속 코딩 도구입니다. 예전에 젠 코딩이라는 이름으로 많은 인기를 끌었으며 현재는 Emmet으로 변경되어 지금까지 사용하고 있습니다. 축약어 Abbreviations 다음과 같이 축약어를 적고, tab 또는 Ctrl + E를 누르면 변환이 됩니다. doc doc4 !!! !!!xt !!!xs html:5 or ! nav>ul>li>a>img div+p+div div>ul>li*4^^+p+div (div>ul>li*4)+p+span #wrap>#header+#nav+#sidebar+#contents+#footer #link>a[href="#" target="_blank"]*10 ul[id="ul" class="ul"]>li*8 ul#ul.ul>li*8 ul#u..

Sublime Text는 코딩, 마크업을 하기 위한 에디터입니다. 인터페이스 및 사용 호환성이 좋아 요즘 많이 사용하고 있는 에디터 중에 하나입니다. 윈도우 및 맥에서 사용이 가능하며, 사용하기 전에 몇 가지 셋팅이 필요합니다. Setting 서브라임 설치는 다운받아서 설치합니다. sublimetext.com 기본 서브라임만 설치된 상태이기 때문에 필요한 기능을 설치하려면 Package Control를 설치해야 합니다. Package Control View > Show Console를 클릭합니다. Package Control 소스를 복사하여 Console 붙여넣기 합니다. Preference에 Package Control이 있다면 설치가 완료된 것입니다. Sidebar Enhancements Sideba..

tan()는 숫자의 탄젠트 값을 반환합니다. Definition Math.tan(number)는 숫자의 탄젠트 값을 반환합니다. Syntax Math.tan(number) Compatibility 6 7 8 9 10 11 tan()

sqrt()는 숫자의 제곱근을 반환합니다. Definition Math.sqrt(number)는 숫자의 제곱근을 반환합니다. Syntax Math.sqrt(number) Compatibility 6 7 8 9 10 11 sqrt()

sin()는 숫자의 사인 값을 반환합니다. Definition sin(number)는 숫자의 사인 값을 반환합니다. Syntax Math.sin(number) Compatibility 6 7 8 9 10 11 sin()