본문 바로가기
반응형

전체 글127

[JQuery]슬라이드 라이브러리 정리 – [bxSlider, Swiper] 웹 사이트에서 콘텐츠를 슬라이드 형식으로 보여주는 UI는 사용자 경험을 높이는 데 매우 유용한 요소입니다. jQuery 기반의 슬라이더 라이브러리는 이러한 기능을 구현하기 쉽게 만들어 줍니다. 이번 글에서는 bxSlider와 Swiper라는 두 가지 대표적인 슬라이드 라이브러리에 대해 소개하겠습니다. 1. bxSlider – 간단하고 유연한 jQuery 콘텐츠 슬라이더bxSlider는 jQuery 기반의 반응형 콘텐츠 슬라이더입니다. 다양한 옵션을 제공하면서도 코드가 간단해 초보자도 쉽게 적용할 수 있습니다. 공식 GitHub 페이지https://github.com/stevenwanderski/bxslider-4 GitHub - stevenwanderski/bxslider-4: Responsive jQu.. 2024. 7. 30.
[JQuery]실습 & 심화 기능 정리 – DOM 탐색과 필터링 기능 총정리, 애니메이션, Ajax, 이벤트 위임 이번 포스팅에서는 jQuery에서 자주 사용하는 DOM 탐색과 필터링 기능을 정리합니다. 특히 부모/자식 관계를 기반으로 한 요소 탐색, form 요소의 선택자, 형제/후속 요소 탐색, 그리고 each() 반복문까지 실습 예제와 함께 정리하였습니다. 그리고 jQuery의 애니메이션 처리, Ajax 통신, 그리고 동적 이벤트 처리(delegate) 기능에 대해 정리하겠습니다. 1. 부모 요소 & 자식 요소 선택자DOM 요소 간의 계층적 구조를 활용하여 특정 위치에 있는 요소를 선택할 수 있습니다.$(document).ready(function(){ // 첫 번째 & 마지막 자식 요소 $("#m1 > span:first-child").css("border", "2px solid red"); $("#m1.. 2024. 7. 26.
[JQuery]실습 정리 – 인터랙티브 웹을 위한 필수 기능 학습 jQuery는 JavaScript를 더 간편하게 사용할 수 있도록 도와주는 라이브러리입니다. 이번 포스팅에서는 jQuery의 주요 기능을 예제와 함께 정리하였습니다. 웹 요소를 제어하고 동적인 UI를 구현하는 데 필수적인 기능 위주로 소개합니다. 1. 마우스 hover 이벤트hover()는 마우스를 요소 위에 올렸을 때와 벗어났을 때 각각의 동작을 정의합니다.$("#p1").hover( function(){ alert("hover START"); }, function(){ alert("hover END"); }); 2. focus & blur 이벤트focus()는 입력 필드에 포커스가 갔을 때, blur()는 포커스가 해제됐을 때 스타일을 변경합니다.$("input").focus(function(){.. 2024. 7. 25.
[JQuery]기초 정리 — 선택자, 이벤트, 애니메이션, 속성 다루기 jQuery는 자바스크립트를 보다 간편하게 사용할 수 있도록 도와주는 라이브러리입니다. 다양한 선택자와 이벤트 처리, 애니메이션, 속성 조작 등을 매우 간단한 코드로 구현할 수 있다는 장점이 있습니다. 이번 글에서는 jQuery의 기본 선택자, 이벤트 처리, 화면 전환 효과, 애니메이션, 속성 선택자, 값 처리 메서드를 하나씩 정리해 보겠습니다. 1. jQuery 기본 선택자HTML 요소를 선택할 수 있는 다양한 방법입니다. CSS 선택자와 거의 동일하게 사용되며, 요소의 ID, 클래스, 태그 등으로 지정할 수 있습니다.$(document).ready(function() { $("p").css("border", "3px solid red"); // 태그 선택자 $("#gnb.. 2024. 7. 24.
[JQuery] JQuery(제이쿼리)란? 1. 제이쿼리(jQuery)란?jQuery는 자바스크립트를 보다 간단하고 효율적으로 사용할 수 있도록 만든 오픈 소스 기반의 자바스크립트 라이브러리입니다. 복잡한 DOM 조작, 이벤트 처리, AJAX, 애니메이션 등을 짧고 직관적인 코드로 작성할 수 있어 웹 개발자들 사이에서 널리 사용되고 있습니다. 2. jQuery의 주요 특징문법 단순화: 자바스크립트보다 더 짧고 직관적인 문법크로스 브라우징 지원: 브라우저 간의 호환성 문제를 줄여줌풍부한 플러그인: 슬라이드, 팝업, 탭 등 다양한 기능을 플러그인으로 구현 가능DOM 제어 및 이벤트 처리를 간단하게 구현 가능3. jQuery 공식 사이트 및 다운로드제이쿼리는 공식 웹사이트에서 직접 다운로드할 수 있습니다. https://jquery.com/downlo.. 2024. 7. 23.
[JavaScript] 자바스크립트 이벤트, 날짜, Math 메소드, 팝업창 정리 자바스크립트를 활용하여 동적인 웹사이트를 만들기 위해 반드시 알아야 할 핵심 기능들을 정리합니다. 이번 글에서는 이벤트 처리, 날짜 및 시간 함수, 수학 메소드, 팝업창 열기 등 다양한 기능을 실습 예제와 함께 소개합니다. 1. 이벤트(event)란?이벤트란 웹 브라우저에서 발생하는 HTML 요소에 대한 사용자의 행동(클릭, 입력 등)을 의미합니다. 예를 들어 버튼 클릭, 마우스 이동, 키보드 입력 등이 이벤트에 해당합니다. ▶ 이벤트 타입(event type)이벤트의 종류를 식별하는 문자열입니다.자주 사용되는 이벤트 타입: click, keydown, submit, change, mouseover 등▶ 이벤트 예제 코드// 상세 설명 보기document.querySelector('#open').oncl.. 2024. 7. 19.
반응형

티스토리툴바