03. 웹 표준 기술/jQuery8 [부트스트랩] ㅁ 빠르게 화면을 예쁘게 작업을 하고싶다면 무료 템플릿 사용.- 보통 이런 것들은 부트스트랩이라는 걸로 작업이 되어 있다. ㅁ 부투스트랩은 jQuery와는 상관없고 html, css와 관련 있다. ㅁ https://www.w3schools.com/ - 부트스트랩도 다양한 업체에서 제공하는데 조금씩 다르다.- w3schools가 깔끔하다.- 상단의 Bootstrap 메뉴 - B4 클릭- 최신버전이 무조건 좋은게 아니다. B5(Bootstrap 5) 버전은 아예 jQuery를 못 쓴다.- 버전에 대한 차이는 버전 아래에 쓰여 있다. B4는 IE 9 이하는 지원 안한다. - 특정 요소에 클래스만 넣으면 알아서 스타일이 반영된다. ㅁ 굳이 파일 다운받을 필요는 없고 cdn 방식으로 사용한다. - cs.. 2024. 8. 22. [jQuery] 06. effect ㅁ 특정 요소에 이펙트 효과를 주는 메소드- 물론 css로 해도 되지만 jQuery로도 간단하게 할 수 있다. ㅁ - 요소의 크기(width, height)가 조정되면서 보여지고 사라지는 효과의 메소드.크기가 점점 작아지면서 사라지고 점점 커지면서 보여지는 효과의 메소드들이다. - 사용법 요소.show | hide | toggle(['ms']); // 밀리세컨드 제시 가능 - show : 특정 요소의 가로 세로 크기가 점점 커지면서 display를 기존 상태로 처리- hide : 특정 요소의 가로 세로 크기가 점점 작아지면서 display를 최종 none 처리- toggle : show() hide() - block상태가 아닌 기존상태라고 한 이유는, div는 block이지만.. 2024. 8. 22. [jQuery] 05. each ㅁ each 메소드- 배열의 요소들 또는 객체의 속성들을 순회할때 사용할 수 있는 메소드- for in 문과 유사하게 수행됨. (반복문 느낌) - 사용법 (1) $.each( 배열 | 객체, function(매개변수1, 매개변수2) { 순회하면서 수행할 내용}) (2) $(배열).each(function(매개변수1, 매개변수2) { 순회하면서 수행할 내용}) - 배열이나 객체의 속성을 순회하면서 매번 function이 실행됨. (즉 콜백함수같은 거다) - 배열제시시 첫번째 인자값으로 인덱스 수, 두번째 인자값으로 (인덱스 자리에 있는) 요소가 전달됨.(dom 요소 아니고 배열에 있는 요소)- 객체제시시 첫번째 인자값으로 속성명, 두번째 인자값으로 속성값이 전달됨.(객체는 인덱스의 개념이 없.. 2024. 8. 22. [jQuery] 04. dom_dynamic ㅁ 동적으로 요소를 생성하거나 복제, 제거한다 ㅁ 동적으로 요소 생성 > (1) 문자열로 요소 만드는 방식- 변수 = '안녕하세요' // 이렇게 만들고 변수에 담을 수 있다는 뜻. (2) jQuery 객체로 요소 만드는 방식- 변수 = $('').text('안녕하세요'); - 변수 = $('안녕하세요'); // 더 간단한 방법 ( b태그 요소 객체가 만들어짐) - jQuery 객체로 요소를 만들면 jQuery 메소드를 사용할 수 있다.문자열을 달러 괄호로 감싸면 된다.- 이때까지 달러 괄호 안에 요소 선택을 위해 선택자를 써왔는데, 항상 선택자를 써야하는 것은 아니다.요소를 생성할 때는 문자열을 쓴다.- 어떤 태그의 요소를 만들고 싶.. 2024. 8. 21. [jQuery] 03. event ㅁ jQuery 방식으로도 특정 요소에 이벤트 핸들러를 연결할 수 있다.지금까진 인라인 이벤트 모델 방식으로 무언가를 클릭했을 때 선언적 함수가 호출되게만 했었다. ㅁ - jQuery용 객체에 이벤트 핸들러를 부여하는 메소드.- 주로 이벤트명이 곧 메소드명으로 되어있다. - 특정 이벤트 대상이 되는 요소에 특정 이벤트 발생시 실행될 function을 부여할 수 있다. ㅁ 이벤트 메소드 사용법 이벤트대상.이벤트메소드(이벤트핸들러); (1) 익명함수 이벤트대상.click( function([evt]) { 실행내용;} ) (2) 화살표 함수 // this 못 씀. 이벤트대상.click( (.. 2024. 8. 21. jQuery 실습문제, jQuery로 data 속성에 접근, 조작 ㅁ 뭐가 자바스크립트 방식이고 뭐가 jQuery 방식인지 구분할 수 있어야 한다.회사에서는 섞어서 쓴다. ㅁ 연습문제 (총 12문제) DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle> --> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">script>head>body> h2>연습h2> div id="practice"> h4>h4.. 2024. 8. 20. jQuery 02. dom_property (요소 선택해서 property 조작) ㅁ 요소 선택도 jQuery 방식으로, 메소스도 jQuery 측에서 제공하는 메소드들을 이용했다.이런 것들을 순수 자바스크립트 방식으로 하기에는 복잡하다.제공하지 않는 기능들도 많고. 그래서 jQuery를 사용한다. ㅁ 지금까지 요소 선택을 했다. 이제 요소의 속성값을 가져오거나 변경하는 것을 해본다.자바스크립트에서 DOM 객체 선택해서 property를 가져오거나 변경했었다. 그런걸 jQuery로 해본다. - 자주 사용했던 속성들과 관련된 메소드들이 jQuery 측에서 제공되고 있다.자바스크립트 방식과 비교해가면서 사용해본다. ㅁ innerText 및 innerHTML 속성 관련 메소드- 두 속성은 해당 요소의 컨텐츠 영역값을 가지고 있는데, 그때 그 컨텐츠 영역에 html 태그가 있다면 그 태그.. 2024. 8. 20. [jQuery] 01. jQuery ㅁ 지금까지 자바스크립트 방식으로 요소를 선택, 조작하고 속성도 제어했다.- 그런데 복잡한 구문들을 편리하게 쓰고한다면 제이쿼리라는 라이브러리를 사용할 수 있다.- 제이쿼리도 결국 자바스크립트 기반이기 때문에 소스코드를 작성한다.자바스크립트 소스코드랑 혼용해서 기술해도 된다. ㅁ jQuery- 자바스크립트만으로 코드를 짜게 되면 굉장히 구문이 복잡하다.다수의 요소에 동일한 이벤트를 부여할 때 매번 요소에 일일이 접근해야 해서 for문을 돌리는 등 번거롭다.- 자바스크립트의 복잡한 구문을 보다 간소화해서 사용할 수 있도록 만들어진 라이브러리 (.js)- 자바스크립트 코드가 내부적으로 다 작성되어 있다. 편하게 쓰도록 함수 등을 정의해 두었다. 자바스크립트 유용한 함수들이 만들어져 있는 모음집이다.우리는 .. 2024. 8. 20. 이전 1 다음
