본문 바로가기

Webstoryboy

Category

Explanation

전체 글

(864)
[jQuery] 필터링 필터링 선택된 집합에서 다시 조건에 맞는 집합을 선택합니다. 필터링(Filtering) 메서드 설명 .eq() 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다. .filter() 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다. .first() 선택된 요소에서 첫 번째 자식 요소를 찾습니다. .has() 선택한 요소에서 주어진 선택자가 있으면 선택한 요소를 선택합니다. .is() 선택된 요소 객체의 특징을 판별합니다. .last() 선택된 요소에서 마지막번째 자식 요소를 찾습니다. .map() 선택된 요소의 배열 집합을 새롭게 변경합니다. .not() 선택된 요소에서 조건에 맞지 않는 것을 선택합니다. .slice() 선택된 요소에서 조건의 범위로 재선택합니다. Sample : 필터링 기본 태..
[jQuery] 트리구조 트리구조 Tree 구조를 기반으로 찾아가는 방식입니다. 트리구조 탐색(Tree Traversal) 메서드 설명 .children() 선택한 요소의 바로 아래 자식 요소만 선택합니다. .closest() 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다. .find() 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다. .next() 선택한 요소의 다음 요소를 선택합니다. .nextAll() 선택한 요소의 다음 모든 요소를 선택합니다. .nextUntil() 선택한 요소의 다음 요소 중 조건에 맞을 때까지 찾습니다. .parent() 선택한 요소의 부모 요소를 선택합니다. .parents() 선택한 요소의 모든 부모 요소를 선택합니다. .parentsUntil() 선택한 요소의 부모 요..
[Javascript] 튜토리얼 자바스크립트 튜토리얼 자바스크립트 튜토리얼입니다. 자바스크립트 구분 강의 섹션 페이지 유튜브 자바스크립트 자바스크립트 자바스크립트 기초 자바스크립트 기초 변수 변수 변수의 종류 변수의 유형 변수의 변환 배열 배열 연산자 산술연산자 대입연산자 증감연산자 비교연산자 논리연산자 문자열 결합 연산자 조건문 if문 if ~ else문 다중 if문 중첩 if문 switch문 조건부 연산자 반복문 while문 do while문 for문 for in 반복문 중첩 for문 break문 continue문 함수 함수 함수의 사용형태 기본 함수 익명 함수 매개변수가 있는 함수 리턴값이 있는 함수 가변인자 함수 재귀 함수 콜백 함수 내부 함수 클로저 템플릿 리터럴 화살표 함수 내장 함수 기본 함수 객체 객체 내장 객체 Obje..
[jQuery] 폼 선택자 폼 선택자 폼 요소와 관련된 속성을 선택 하는 방법입니다. 폼 선택자(Forms) 폼 선택자 종류 설명 :button 버튼 입력 양식을 선택합니다. :checkbox 체크박스 입력 양식을 선택합니다. :checked :checked된 입력 양식을 선택합니다. :disabled :disabled된 입력 양식을 선택합니다. :enabled :enabled된 입력 양식을 선택합니다. :focus 입력 양식에 포커스된 태그를 선택합니다. :file 파일 업로드 양식을 선택합니다. :image 이미지 입력 양식을 선택합니다. :input 모든 입력 양식을 선택합니다. :password 암호 입력 양식을 선택합니다. :radio 라디오 버튼 입력 양식을 선택합니다. :reset 리셋 입력 양식을 선택합니다. :se..
[jQuery] 자식 요소 필터 선택자 자식 요소 필터 선택자 자식 요소들을 선택 하는 방법입니다. 자식 요소 필터 선택자(Child Filters) 자식 요소 필터 선택자 종류 설명 :first-child 첫 번째 자식 요소를 선택합니다. :first-of-type 자식 중 첫 번째 유형의 자식 요소를 선택합니다. :last-child 마지막 번째 자식 요소를 선택합니다. :last-of-type 자식 중 마지막 번째 유형의 자식 요소를 선택합니다. :nth-child() index번째에 있는 자식 요소를 선택합니다. :nth-last-child() index번째에 있는 마지막 자식 요소를 선택합니다. :nth-last-of-type() index번째에 있는 마지막 유형의 자식 요소를 선택합니다. :nth-of-type() index번째에 ..
[jQuery] 보임 필터 선택자 보임 필터 선택자 화면에 보이거나 보이지 않는 요소를 찾습니다. 보임 필터 선택자(Visibility Filters) visibility:hidden;이나 opacity:0;은 위치가 제거되지 않았기 때문에 :hidden 선택자에게 선택되지 않습니다. 컨텐츠를 보이지 않게 하는 방법 display:none; visibility:hidden; opacity:0; width:0; height:0; form 요소 중에 type="hidden" 부모 요소가 보이지 않거나 숨겨져 있을 때 보임 필터 선택자 종류 설명 :hidden 보이지 않는 요소를 선택합니다. :visible 보이는 요소를 선택합니다. Sample1 내용 필터 선택자 예제입니다. 결과 속성 선택자 기본 선택자 계층 선택자 속성 선택자 기본 필터..
[jQuery] 내용 필터 선택자 내용 필터 선택자 콘텐츠와 관련된 요소를 선택하는 방법입니다. 내용 필터 선택자(Content Filters) 내용 필터 선택자 종류 설명 :contains() 선택된 집합의 일치하는 문자열 요소를 선택합니다. :empty 선택된 집합 요소에 텍스트가 없을 때 선택됩니다. :has() 선택된 집합의 일치하는 요소를 선택합니다. :parent 선택된 집합 요소에 텍스트가 있들 때에 선택됩니다. Sample1 내용 필터 선택자 예제입니다. 결과 속성 선택자 기본 선택자 계층 선택자 속성 선택자 기본 필터 선택자 내용 필터 선택자 :contains() :empty :has() :parent 보임 필터 선택자 자식요소 필터 선택자 폼 필터 선택자 리셋 클릭하면 :contains()를 선택합니다. 클릭하면 :em..
[jQuery] 기본 필터 선택자 기본 필터 선택자 필터는 선태자 앞에 :(콜론)을 붙어 표현을 하며, 필터를 사용해 다양한 조건에 따라 선택할 수 있습니다. 기본 필터 선택자(Basic Filters) 기본 필터 선택자 종류 설명 :animated 선택된 집합에서 show, hide, slideDown, slideUp등의 애니메이션 태그를 선택합니다. :eq(index) 선택된 태그들의 인덱스 번호를 통해 선택합니다. :gt(index) 선택된 집합에서 인덱스보다 큰 인덱스를 가지고 있는 태그들을 선택합니다. :lt(index) 선택된 집합에서 인덱스보다 작은 인덱스를 가지고 있는 태그들을 선택합니다. :header 선택된 집합에서 제목 요소(h1~h6)들을 선택합니다. :first 선택된 요소 중에서 첫 번째 요소를 찾아 선택합니다...
[jQuery] 속성 선택자 속성 선택자 태그의 속성을 사용하여 선택하는 방법입니다. 속성 선택자(Hierarchy) 속성 선택자 종류 예시 설명 [name|="value"] $("li a[href|='web']") 속성 중에 'web'과 같은 속성 값을 선택합니다. [name*="value"] $("li a[href*='web']") 속성 중에 'web'가 포함되어 있는 태그를 선택합니다. [name~="value"] $("li a[href~='web']") 속성 중에 'web'으로 시작하는 태그를 선택합니다. [name$="value"] $("li a[href$='web']") 속성 중에 'web'으로 끝나는 태그를 선택합니다. [name="value"] $("li a[href='web']") 속성 중에 'web'와 일치하는 속..
[jQuery] 계층 선택자 계층 선택자 계층적인 구조에서 선택하는 방법입니다. 계층 선택자(Hierarchy) 계층 선택자 종류 예시 설명 하위 선택자(Descendant Selector) $("div p") div 태그의 모든 자식 중 p 태그를 모두 선택합니다. 자식 선택자(Child Selector) $("div > p") div 태그의 모든 자식 중 첫번째 자식 p 태그를 선택합니다. 형제 선택자(Next Adjacent Selector) $("div + p") div 태그의 인접한 형제 p 태그 중 첫번째 태그만 선택합니다. 형제들 선택자(Next Siblings Selector) $("div ~ p") div 태그의 인접한 형제 p 태그를 모두 선택합니다. Sample1 기본 선택자 예제입니다. 결과 계층 선택자 기본 ..
[jQuery] 기본 선택자 기본 선택자 기본 선택자는 CSS와 동일하게 선택자를 선택하는 방법입니다. 가장 기본적으로 요소를 선택하는 방법입니다. 이 방법은 CSS와 동일합니다. 기본 선택자(Basic Selectors) 기본 선택자 종류 예시 설명 태그 선택자 $("p") 기본 태그를 선택합니다. 클래스 선택자 $(".class") 클래스 태그를 선택합니다. 아이디 선택자 $("#id") 아이디 태그를 선택합니다. 그룹 선택자 $("p, .class, #id") 여러가지 태그를 선택합니다. 전체 선택자 $("*") 전체 태그를 선택합니다. Sample1 기본 선택자 예제입니다. 결과 기본 선택자 태그 선택자 : 기본 태그를 선택합니다. 클래스 선택자 : 클래스 태그를 선택합니다. 아이디 선택자 : 아이디 태그를 선택합니다. 그룹..
[jQuery] 변수의 변환(형변환) 변수의 변환(형변환) 변수에는 여러가지 자료형이 들어 갈 수 있습니다. 이런 자료형의 성질을 변환 시킬 수 있는데 이것을 자료형 변환 또는 형변환이라고 합니다. 자료형 변환 자료형 변환을 하는 방법은 직접 명시적으로 자료형을 변환하거나 자바스크립트 객체를 이용하여 변환하는 방법이 있습니다. 형변환 변수의 자료형을 변형하는 예제입니다. html
[jQuery] Basic 제이쿼리 기초 제이쿼리를 사용하기 위한 기본 사용방법입니다. 제이쿼리 사용방법 제이쿼리를 사용하기 위해서는 자바스크립트 라이브러리 파일이 필요합니다. jQuery 라이브러리는 jQuery 공식사이트에서 다운 받을 수 있습니다. jQuery는 1.x, 2.x, 3.x 버전이 있습니다. 1.x 버젼은 IE6, IE7, IE8 버젼을 지원합니다. 제이쿼리 다운로드 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 다운 받아야 합니다. 다운 받기 Script CDN 사용하기 CDN(Content Distribution Network)는 전 세계적으로 분산되어 있는 서버 네트워크를 사용하는 시스템입니다. 콘텐츠를 효율적으로 사용하기 위한 네트워크 시스템을 의미합니다. 다음은 구글에서 제공하는 CDN입니다. Script..
[jQuery] Intro 제이쿼리 제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어입니다. 제이쿼리는 HTML에 포함되어 있는 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된, 웹 브라우저 호환성을 가진 자바스크립트 라이브러입니다. 라이브러리는 자주 사용하는 코드를 재사용 및 효율성 있게 사용할 수 있도록 만들어진 다양한 함수의 집합을 의미합니다. 제이쿼리의 장점 제이쿼리는 CSS를 쉽게 적용할 수 있습니다. 제이쿼리는 크로스브라우징을 지원합니다. 제이쿼리는 플러그인이 풍부합니다. 제이쿼리는 코드를 적게, 효율적으로 작성할 수 있습니다. 제이쿼리는 좋은 확장성과 ajax기능을 구현합니다.
[Javascript] 반복문 for in 반복문 for in 반복문은 for문 쉽게 사용하는 방법을 제공합니다. for in 반복문 for in 반복문은 for문과 비슷하게 for 키워드를 사용합니다. 반복과 내부 요소에 접근하는 방식에 차이가 있으며 in 키워드를 기준으로 변수와 반복할 대상을 설정합니다. for(변수 in 반복할 대상){ //실행 코드 } Sample1 for in 반복문 이용한 배열 예제입니다. 결과 100200300400500 100200300400500 html Sample2 for in 반복문 이용한 객체 예제입니다. 결과 1단계 2단계 3단계 HTML1단계CSS2단계JavaScript3단계 코딩 공부 순서는 다음과 같습니다. HTML은 1단계 입니다. CSS은 2단계 입니다. JavaScript은 3단계..
[Javascript] 조건문 중첩 if문 중첩 if문은 조건문 안에 조건문이 오는 것을 말합니다. 중첩 if문 중첩 if문은 if문 안에 if문이 오는 구조입니다. if (조건식1) { if (조건식2) { //실행문 } } Sample1 중첩 if문을 이용한 아이디어/비밀번호 예제입니다. html
[Javascript] 연산자 정리 연산자를 통해 다음과 같은 예제를 만들 수 있습니다. Sample1 적정 체중을 알아보는 예제입니다. html Sample2 지출 내역을 알아보는 예제입니다. html
[Javascript] 배열 배열 배열은 여러개의 데이터를 순차적으로 저장하는 저장소입니다. 배열 배열은 여러개의 데이터를 순차적으로 저장하는 저장소이며, 사용하는 방법이 다양합니다. 문법 var 변수명 = [값1, 값2, 값3......] 배열 사용하는 방법1 배열을 선언하고 데이터를 순차적으로 선언하는 방법입니다. var arr1 = new Array(); arr1[0] = 100; arr1[1] = 200; 배열 사용하는 방법2 배열을 선언과 동시에 데이터를 넣는 방법입니다. var arr2 = new Array(100,200); 배열 사용하는 방법3 배열을 선언하지 않고 바로 데이터를 넣는 방법입니다. var arr3 = [100,200]; 배열 배열 선언하는 예제입니다. html 배열 객체의 메서드 및 속성 종류 설명 jo..
[Javascript] 변수의 유형 변수의 유형 변수에는 여러가지 유형이 들어 갈 수 있습니다. 프로그램 언어에 있어 가장 기본적인 요소이며 데이터 타입이라고 합니다. 데이터 타입에는 숫자, 문자열, 논리값, 특수값, 심벌, 객체, 함수 등을 표현할 수 있습니다. 변수의 유형(데이터 타입) 데이터 타입 설명 숫자(Number) 숫자를 사용할 수 있습니다. 문자열(String) 문자을 사용할 수 있습니다. 논리값(Boolean) 참과 거짓을 사용할 수 있습니다. 특수값(null) 아무런 값이 없을 경우 표현합니다. 특수값(undefined) 정의되지 않은 상태를 표현합니다. 심벌(symbol) 자기 자신을 제외한 유일한 값일 때 표현합니다. 객체(object) 객체 형태도 사용 가능합니다. 함수(function) 함수 형태도 사용 가능합니다..
[Javascript] 변수의 종류 변수의 종류 변수는 사용 가능 범위에 따라 지역 변수, 전역 변수, 매개 변수, 멤버 변수로 구분됩니다. 변수의 종류 지역 변수 : 특정 범위 안에서만 사용하는 변수 전역 변수 : 모든 영역 안에서 사용하는 변수 매개변수(파라미터) : 함수 외부에서 함수 내부로 데이터를 전달하기 위한 변수 멤버변수(프로퍼티) : 클래스 내부에 만들어지며 주로 객체에서 사용하는 변수 지역변수/전역변수 지역변수와 전역변수에 대한 예제입니다. html 매개변수 매개변수에 대한 예제입니다. script
[Javascript] 변수 변수 변수는 하나의 데이터를 저장하는 저장소입니다. 변수는 변수는 사용 가능 범위에 따라 지역변수, 전역변수, 매개변수, 멤버변수로 나눌 수 있으며, 변수는 식별자로 구분해야 하기 때문에 변수에는 숫자, 문자열, 불린, 함수, 객체등을 사용할 수 있습니다. 변수 변수는 하나의 데이터를 저장하는 저장소입니다. 변수 선언 변수는 변수명을 선언하고 값을 넣을 수 있습니다. var 변수명 = 값; 변수명 자바스크립트에는 의미를 가진 단어들이 있기 때문에 사용자가 임의로 사용할 수 없는 단어들이 있습니다. 키워드 : 자바스크립트에서 사용하는 단어 식별자 : 사용자가 임의로 사용하는 단어 식별자를 만드는 규칙 사용자가 사용할 수 있는 문자 : 알파벳(a~z, A~Z), 숫자(0~9), 밑줄(_), 달러기호($) 첫..
자바스크립트 기초 기초 자바스크립트를 다루기 위해서는 기초적인 특징과 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지 후 스크립트를 공부하는 것이 좋습니다. 주석 /* ... */ : 여러 줄에 주석을 적용하는 경우 // : 한 줄에 주석을 적용하는 경우 자바스크립트 주석은 일반적으로 특정 코드에 대한 설명을 입력하거나 특정한 부분의 코드가 실행되지 않도록 사용합니다. 주석 표시는 프로그램에 영향을 미치지 않습니다. 대문자와 소문자 날짜 객체 생성 : New date();(X) 날짜 객체 생성 : new Date();(O) 자바스크립트는 대문자와 소문자를 구별합니다. console와 Console은 각각 다른 문자열로 처리되니 유의하시기 바랍니다. 토큰과 공백문자 토근 : 프로그램을 구성하는 최소 단위 프로그램을 ..
[Javascript] 소개 자바스크립트 자바스크립트(JavaScript)는 웹 브라우저에서 동작되는 스트립트 언어를 말합니다. HTML은 정적인 레이아웃을 표현한다면, 자바스트립트(JavaScript)는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였스며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 ESMAScript를 따르는 표준화 작업을 통해 현재는 모든 브라우저에서 지원됩니다. 자바스크립트란? 자바스크립트는 객체 기반의 클라이언트 스크립트 언어로 웹 페이지를 동적으로 만드는데..
[PHP] Basic [PHP] Basic