코밍이의 하루

1. 개발 환경 구분 내용 사용 언어 HTML5, CSS3, JS, jQuery 개발환경 Visual Studio Code 참고 도서 [Do it] 자바스크립트 + 제이쿼리 입문 웹브라우저 Chrome 2. 주요 문법 1) 탐색 선택자 - 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있음. - 종류 : 위치 탐색 선택자 , 속성 탐색 선택자 2) 위치 탐색 선택자 - 배열의 인덱스를 사용하여 특정 요소를 좀 더 정확하게 선택할 수 있음. 종류 사용법 설명 $("요소 선택:first") $("요소 선택").first() $("li:first") $("li").first() 전체 요소 중 첫 번째 요소만 선택 $("요소 선택:last") $("요소 선택").la..

1. 개발 환경 구분 내용 사용 언어 HTML5, CSS3, JS, jQuery 개발환경 Visual Studio Code 참고 도서 [Do it] 자바스크립트 + 제이쿼리 입문 웹브라우저 Chrome 2. 주요 문법 1) 인접 관계 선택자 - 직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이에 있는 요소를 선택할 때 사용 1-1) 부모 요소 선택자 - 선택한 요소를 감싸고 있는 부모 요소를 선택 기본형 $("요소 선택").parent(); 1-2) 하위 요소 선택자 - 기준 요소로 선택한 하위 요소만 선택 기본형 $("기준 요소 선택1 요소 선택2") ex) $("#wrap h1") 1-3) 자식 요소 선택자 - 선택된 요소를 기준으로 지정한 자식 요소만 선택 기본형 $("요소 선택 >..

1. 개발 환경 구분 내용 사용 언어 HTML5, JS, jQuery 개발환경 Visual Studio Code 참고 도서 [Do it] 자바스크립트 + 제이쿼리 입문 웹브라우저 Chrome 2. 주요 문법 1) 직접 선택자 - 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자 - 종류 : 전체(*), 아이디(#), 클래스(.), 요소명, 그룹(,) 선택자 1-1) 전체 선택자 - 전체 요소를 선택할 때 사용 - 현재 HTML의 모든 태그 선택 기본형 $("*") 1-2) 아이디 선택자 - 아이디 속성에 지정한 값을 포함하는 요소 선택 기본형 $("#아이디명") 1-3) 클래스 선택자 - 클래스 속성에 지정한 값을 포함한 요소 선택 기본형 $(".클래스명") 1-4) 요소명 선택자 - 지정한 요소명과 ..

1. 개발 환경 구분 내용 사용 언어 HTML5, JS, jQuery 개발환경 Visual Studio Code 참고 도서 [Do it] 자바스크립트 + 제이쿼리 입문 웹브라우저 Chrome 2. 주요 문법 1) 선택자 - HTML 요소를 선택하여 가져온다. 2) 제이쿼리 선택자 - 선택한 요소의 디자인 속성을 적용할 때 사용 - '동적' 스타일 적용 - $()에 문자형 데이터로 CSS 선택자를 입력 기본형 ① 선택한 요소에 지정한 스타일 적용 $("CSS 선택자").css("스타일 속성명", "값"); ② 선택한 요소에 지정한 속성 적용 $("CSS 선택자").attr("속성명", "값"); 3) 문서 객체 모델(DOM : Document Object Model) - HTML 문서 객체 구조 - 최상위..

1. JQuery란? - 모질라 사의 JS 개발자였던 존 레식(John Resig)이 JS를 이용하여 만든 라이브러리 언어 ※ 라이브러리 언어 : 자바스크립트로 만들어진 다양한 함수들의 집합 2. JQuery 특징 1) 호환성 문제 해결 - JS의 문서 객체 모델(DOM)과 이벤트 객체의 호환성 문제를 해결 2) 쉽고 편리한 애니메이션 효과 기능 구현 - 애니메이션과 다양한 효과를 지원하는 메소드를 제공하여 개발 시간 단축 3. JQuery 라이브러리 연동(다운로드 방식, 네트워크 전송방식) 1) 다운로드 방식 - 제이쿼리 라이브러리 제공하는 사이트에서 제이쿼리 라이브러리 파일을 직접 내려받아 HTML에 불러오는 방식 2) 네트워크 방식 - 온라인에서 제공하는 제이쿼리 라이브러리 파일을 네트워크를 통해 ..