Mingg's Diary

2023-11-17

아코디언 메뉴 아코디언 스타일 메뉴를 만들 때 방법은 여러가지가 있다. 여기서는 HTML과 CSS만으로 아코디언 메뉴를 만드는 방법을 알아보자. 예시 HTML <!DOCTYPE html> <html lang=”ko”> <head> <meta charset=”UTF-8″> <title>Accordion Style</title> <link rel=”stylesheet” href=”./style.css”> </head> <body> <div class=”accordion”> <input type=”checkbox” name=”accordion” id=”answer01″> <label for=”answer01″>짱구는 못말려<small class=”arrow”>?</small></label> <div> <ul> <li class=”accountno”>신짱구</li> <li class=”accountno”>신영식</li> <li class=”accountno”>봉미선</li> <li class=”accountno”>신짱아</li> </ul> </div> <input type=”checkbox” name=”accordion” id=”answer02″> <label for=”answer02″>네모바지 스폰지밥<small class=”arrow”>?</small></label> <div> <ul> <li class=”accountno”>스폰지밥</li> <li class=”accountno”>뚱이</li> <li class=”accountno”>징징이</li> <li class=”accountno”>다람이</li> </ul> </div> </div> </body> </html> CSS…

2023-11-16

jQuery – AJAX – get() 및 post()

get() 및 post() jQuery get() 및 post() 메서드는 HTTP GET 또는 POST 요청을 통해 서버에서 데이터를 요청하는 데 사용된다. HTTP 요청: GET 대 POST 클라이언트와 서버 간의 요청-응답에 일반적으로 사용되는 두 가지 방법은 GET과 POST다. GET – 지정된 리소스에서 데이터를 요청한다. POST – 처리할 데이터를 지정된 리소스에 제출한다. GET은 기본적으로 서버에서 일부 데이터를 가져오는(검색) 데 사용된다. ⭐ GET 메서드는 캐시된 데이터를 반환할 수 있다. POST를 사용하여 서버에서 일부 데이터를 가져올 수도 있다. 그러나 POST 메서드는 데이터를 캐시하지 않으며 요청과 함께…

2023-11-15

jQuery – AJAX – load()

load() jQuery load() 메서드는 간단하지만 강력한 AJAX 메서드다. 이 load() 메서드는 서버에서 데이터를 로드하고 반환된 데이터를 선택한 요소에 넣는다. 형식 $(selector).load(URL,data,callback); 매개변수 URL : 로드하려는 URL을 지정한다. data : 요청과 함께 보낼 쿼리 문자열 키/값 쌍 집합을 지정한다. callback : 메소드가 완료된 후 실행될 함수의 이름이다. 예제 예제 파일 <h2>jQuery and AJAX is FUN!!!</h2> <p id=”p1″>This is some text in a paragraph.</p> 예제 $(“#div1”).load(“demo_test.txt”); 예제 $(“#div1”).load(“demo_test.txt #p1”); 예제 $(“button”).click(function(){ $(“#div1”).load(“demo_test.txt”, function(responseTxt, statusTxt, xhr){ if(statusTxt == “success”) alert(“External content loaded successfully!”);…

2023-11-14

jQuery – AJAX – Introduction

AJAX AJAX는 전체 페이지를 다시 로드하지 않고도 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술이다. AJAX란? AJAX = 비동기 JavaScript 및 XML. 간단히 말해 AJAX는 전체 페이지를 다시 로드하지 않고 백그라운드에서 데이터를 로드하고 웹페이지에 표시하는 것이다. AJAX를 사용하는 애플리케이션의 예: Gmail, Google Maps, Youtube 및 Facebook 탭. jQuery와 AJAX jQuery는 AJAX 기능에 대한 여러 가지 방법을 제공한다. jQuery AJAX 방법을 사용하면 HTTP Get 및 HTTP Post를 모두 사용하여 원격 서버에서 텍스트, HTML, XML 또는 JSON을 요청할 수 있다. 그리고 외부…

2023-11-13

jQuery – Traversing – Filterings

Filterings first() last() eq() filter() not() 가장 기본적인 필터링 방법은 요소 그룹에서의 위치를 기반으로 특정 요소를 선택할 수 있는 first(), last() 및 eq()다. filter()와 not()같은 다른 필터링 방법을 사용 하면 특정 기준과 일치하거나 일치하지 않는 요소를 선택할 수 있다. jQuery first() first() 메서드는 지정된 요소의 첫 번째 요소를 반환한다. 예제 $(document).ready(function(){ $(“div”).first(); }); jQuery last() last()메서드는 지정된 요소의 마지막 요소를 반환한다. 예제 $(document).ready(function(){ $(“div”).last(); }); jQuery eq() eq()메서드는 선택한 요소의 특정 인덱스 번호를 가진 요소를 반환한다. 예제 $(document).ready(function(){ $(“p”).eq(1);…

2023-11-12

jQuery – Traversing – Siblings

Siblings jQuery를 사용하면 DOM 트리를 옆으로 탐색하여 요소의 형제 요소를 찾을 수 있다. 형제자매는 같은 부모를 공유한다. DOM 트리에서 옆으로 탐색하기 DOM 트리에서 옆으로 탐색하는 데 유용한 jQuery 메서드가 많이 있다. siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil() jQuery siblings() siblings() 메서드는 선택한 요소의 모든 형제 요소를 반환한다. 예제 1 $(document).ready(function(){ $(“h2”).siblings(); }); 예제 2 $(document).ready(function(){ $(“h2”).siblings(“p”); }); jQuery next() next() 메서드는 선택한 요소의 다음 형제 요소를 반환한다. 예제 $(document).ready(function(){ $(“h2”).next(); }); jQuery nextAll() nextAll() 메서드는 선택한 요소의 다음 형제…

2023-11-11

jQuery – Traversing – Descendants

Descendants jQuery를 사용하면 DOM 트리를 탐색하여 요소의 자손을 찾을 수 있다. 자손이란 자녀, 손자, 증손자 등을 말한다. DOM 트리 탐색 DOM 트리를 탐색하는 데 유용한 두 가지 jQuery 방법은 다음과 같다. children() find() jQuery children() children()메서드는 선택한 요소의 모든 직계 하위 항목을 반환한다. 이 방법은 DOM 트리 아래로 단일 수준만 통과한다. 예제 1 $(document).ready(function(){ $(“div”).children(); }); 예제 2 $(document).ready(function(){ $(“div”).children(“p.first”); }); jQuery find() find()메서드는 선택한 요소의 하위 요소를 마지막 하위 항목까지 반환한다. 예제 1 $(document).ready(function(){ $(“div”).find(“span”); }); 예제 2 $(document).ready(function(){…

2023-11-10

jQuery – Traversing – Ancestors

Ancestors jQuery를 사용하면 DOM 트리를 탐색하여 요소의 조상을 찾을 수 있다. 조상은 부모, 조부모, 증조부모 등이다. DOM 트리 탐색 DOM 트리를 탐색하는 데 유용한 세 가지 jQuery 메서드는 다음과 같다. parent() parents() parentsUntil() jQuery parent() parent() 메서드는 선택한 요소의 직접 상위 요소를 반환한다. 이 방법은 DOM 트리에서 한 수준 위로만 이동한다. 예제 $(document).ready(function(){ $(“span”).parent(); }); jQuery parents() parents() 메서드는 선택한 요소의 모든 상위 요소를 문서의 루트 요소()까지 반환한다. 예제 1 $(document).ready(function(){ $(“span”).parents(); }); 예제 2 $(document).ready(function(){ $(“span”).parents(“ul”); }); jQuery parentUntil()…

2023-11-09

jQuery – Traversing – 트래버스

트래버스 “이동”을 의미하는 jQuery 탐색은 다른 요소와의 관계를 기반으로 HTML 요소를 “찾기”(또는 선택)하는 데 사용된다. 하나의 선택 항목으로 시작하여 원하는 요소에 도달할 때까지 해당 선택 항목을 통해 이동한다. 아래 이미지는 HTML 페이지를 DOM 트리로 보여준다. jQuery 탐색을 사용하면 선택한 현재 요소부터 트리의 상위, 하위 및 형제으로 쉽게 이동할 수 있다. 이러한 움직임을 DOM 트리 탐색 또는 이동이라고 한다. 트래버스란? <div> 요소는 <ul>의 부모이자 그 안에 있는 모든 것의 조상 이다. <ul> 요소는 <li> 요소의 상위 요소자 <div> 요소의 하위…

2023-11-08

jQuery – HTML – 차원

차원 jQuery를 사용하면 요소 및 브라우저 창의 크기를 다루는 것이 쉽다. 차원 작업 width() height() innerWidth() innerHeight() outerWidth() outerHeight() jQuery width() 및 height() width() 메서드는 요소의 너비(패딩, 테두리 및 여백 제외)를 설정하거나 반환한다. height() 메서드는 요소의 높이(패딩, 테두리 및 여백 제외)를 설정하거나 반환한다. 예제 $(“button”).click(function(){ var txt = “”; txt += “Width: ” + $(“#div1”).width() + “”; txt += “Height: ” + $(“#div1”).height(); $(“#div1”).html(txt); }); jQuery innerWidth() 및 innerHeight() innerWidth() 메서드는 요소의 너비(패딩 포함)를 반환한다. innerHeight() 메서드는 요소(패딩 포함)의 높이를…