소개
프로그래밍 세계에 익숙하다면 프로그래밍 언어가 얼마나 중요한지 잘 알고 계실 것입니다. 가장 중요하고 자주 사용되는 언어로는 HTML, CSS, 그리고 JavaScript 등이 있습니다. HTML과 CSS가 웹사이트를 디자인하고 구조화하는 데 도움이 된다면, JavaScript는 웹사이트를 대화형으로 만들 수 있게 해줍니다. 웹 프로젝트에 고유한 기능을 추가하기 위해 사용할 수 있는 여러 JavaScript 라이브러리가 있습니다. 그중 하나가 바로 jQuery 라이브러리입니다.
jQuery 자체는 프로그래밍 언어가 아닙니다. 이는 JavaScript로 웹 개발을 더 쉽게 할 수 있도록 도와주는 도구입니다. 이를 통해 작업을 더 간단하고 직관적으로 만들 수 있습니다. 이 도구는 '적게 쓰고 더 많이 하기(Write Less, Do More)'라는 개념을 기반으로 하는 것으로 유명합니다. 웹 개발을 더 쉽게 만드는 것 외에도, jQuery는 크로스 브라우저 호환성이라는 추가적인 이점도 제공합니다. 즉, 출력을 위해 어떤 브라우저를 사용하든 코드가 적절하게 렌더링될 수 있음을 의미합니다.
jQuery가 어떻게 작업을 더 간결하게 만드는지 더 잘 시각화하기 위해 한 가지 예를 들어보겠습니다. "Hello, World!" 프로그램을 작성한다고 가정해 봅시다. 각각 JavaScript와 jQuery에서는 다음과 같이 나타납니다.
|
1 2 |
JavaScript document.getElementById("demo").innerHTML = "Hello, World!"; |
|
1 2 |
jQuery $("#demo").html("Hello, World!"); |
이 두 줄의 코드는 모두 동일한 결과를 생성합니다. 하지만 보시다시피 jQuery는 작성을 더 간결하고 핵심적으로 만들어 줍니다.
이 튜토리얼에서는 jQuery의 기초에 대해 모두 배우게 됩니다. 다음 웹사이트에서 직접 도구를 다운로드할 수 있습니다: 이 웹사이트. 이 튜토리얼은 여러분이 jQuery에 대한 지식이 전혀 없는 완전한 초보자라는 가정하에 진행됩니다. 이 튜토리얼에서는 jQuery를 설치하는 방법과 이와 관련된 몇 가지 기본 개념을 알려드립니다. jQuery의 일반적인 선택자(selector), 이벤트, 효과 중 일부를 살펴보겠습니다. 그런 다음 유용한 예제를 통해 API, DOM, CDN과 같은 개발 개념을 테스트하는 방법을 배우게 됩니다. jQuery의 세계에 익숙해지기 위해 계속 읽어보세요.
시작하기 전에
미리 알고 있으면 유리한 몇 가지 사항이 있습니다. 예를 들어, HTML과 CSS가 어떻게 작동하는지에 대한 기본적인 이해가 있으면 큰 도움이 됩니다. 이 튜토리얼에서는 해당 내용을 다루지 않습니다. 최소한 간단한 웹사이트를 설정하는 방법은 알고 있다는 가정하에 진행됩니다. 또한 일반적으로 프로그래밍이 어떻게 작동하는지에 대한 기본적인 이해도 있어야 합니다. 그렇다고 해서 진행하기 위해 반드시 JavaScript 전문가여야 하는 것은 아닙니다. 프로그래밍의 논리, 변수, 데이터 타입과 같은 개념에 어느 정도 익숙하기만 하면 충분합니다.
시스템에 jQuery를 설정하는 방법
먼저 시스템에 jQuery를 설정하는 방법을 알아보겠습니다. jQuery는 JavaScript 라이브러리이므로 JavaScript 파일로 제공됩니다. 웹사이트의 HTML 코드에 이 파일을 링크해야 합니다. 여기에는 두 가지 방법이 있습니다. 앞서 언급했듯이, 한 가지 방법은 여기. 공식 웹사이트 외에도, 다음과 같은 Google Hosted Libraries의 바로 여기.
에서 jQuery를 찾을 수 있습니다. 또 다른 방법은 콘텐츠 전송 네트워크(CDN)를 사용하여 파일을 링크하는 것입니다. CDN은 웹 콘텐츠를 로컬로 전송하는 데 도움을 주는 서버 집합으로 구성됩니다. CDN을 통해 jQuery 파일을 호스팅하면 사용자가 콘텐츠를 훨씬 더 빠르게 받을 수 있습니다. 이것이 바로 이 튜토리얼의 이 시점부터 콘텐츠 전송 네트워크를 사용하는 이유입니다.
첫 번째 예제에서는 웹 프로젝트를 만들어 보겠습니다. 이 작은 프로젝트에는 style.css 파일이 css/ 디렉터리에 포함되어 있습니다. script.js 파일은 js/ 디렉터리에 위치합니다. 마지막으로, index.html 파일이 웹 프로젝트의 루트에 존재합니다:
이 프로젝트에 따라 HTML 스켈레톤을 생성하겠습니다. 그 후, 이를 index.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="en"> <head> <title>jQuery 데모</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> |
이곳이 jQuery 파일을 연결할 위치입니다. 앞서 말씀드렸듯이, CDN을 통해 연결할 것입니다. jQuery 링크는 다음의 앞에 입력하게 됩니다: </body> 태그. 그 후, 다음이었던 사용자 정의 JavaScript 파일을 추가할 수 있습니다: script.js (우리 예제에서). JavaScript 파일은 항상 다음과 같이 jQuery 라이브러리 아래에 두어야 한다는 점을 기억하세요:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="en"> <head> <title>jQuery 데모</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/script.js"></script> </body> </html> |
대신 jQuery 라이브러리의 로컬 복사본을 다운로드했다면 어떻게 해야 할까요? 그런 경우에는 jQuery 파일을 다음 폴더에 저장해야 합니다: js/ 폴더. 그런 다음 다음과 같이 연결할 수 있습니다: js/jquery.min.js.
jQuery: 기본 개념
자세한 내용을 알아보기 전에 jQuery의 몇 가지 기본 개념을 살펴보겠습니다. jQuery의 주요 역할은 DOM을 사용하여 브라우저의 HTML 요소를 연결하는 것입니다. DOM은 다음을 의미합니다: 문서 객체 모델(Document Object Model). 이는 JavaScript가 브라우저에서 HTML과 상호 작용할 수 있도록 하는 방법입니다. 웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택하여 DOM을 시각화할 수 있습니다. 개발자 도구에 나타나는 HTML이 바로 DOM입니다.
노드는 DOM의 개별 HTML 요소입니다. JavaScript는 이러한 모든 객체나 요소를 수정할 수 있습니다. 이러한 객체들의 배열을 트리와 같은 구조로 상상할 수 있습니다. <html> 이(가) 루트에 위치하며, 다른 요소들은 여기에서 더 뻗어나갑니다.
마우스 오른쪽 버튼을 클릭하고 '페이지 소스 보기'를 선택하면 웹사이트의 원시 HTML이 표시됩니다. 이것은 DOM과 같지 않다는 점을 기억하세요. DOM은 변경될 수 있는 반면, HTML 소스는 완전히 정적입니다. JavaScript에서 변경한 내용은 이 HTML 파일에 영향을 미치지 않습니다. 전체 <html> 노드는 document 객체라고 불리는 외부 레이어로 감싸여 있습니다.
다음으로, jQuery를 사용하여 웹페이지와 그 기능을 조작하는 방법을 살펴보겠습니다. 하지만 그 전에 페이지가 준비되었는지 확인해야 합니다.
다음 파일을 만든 후 아래 내용을 입력하세요: script.js 파일 (위치: js/ 디렉토리):
|
1 2 3 4 5 |
$(document).ready(function() { // 여기에 모든 사용자 정의 jQuery가 들어갑니다 }); |
이제 여러분이 작성하는 모든 코드는 이 코드 내에 래핑됩니다. jQuery는 코드의 준비 상태를 감지합니다. 이 함수 내의 코드는 DOM이 준비되었을 때만 실행됩니다.
튜토리얼 시작 부분에서 이야기했던 “Hello, World!” 스크립트를 다시 살펴보겠습니다. 이 스크립트를 시작하고 싶다고 가정해 봅시다. jQuery를 사용하여 이 텍스트를 브라우저에 출력하려면, 다음과 같이 빈 블록 수준 단락에 ID demo 을(를) 적용해야 합니다:
|
1 2 3 4 5 6 |
... <body> <p id="demo"></p> ... |
jQuery를 호출하려면 다음을 사용해야 합니다: $ 기호. CSS 구문과 메서드를 적용하여 jQuery로 DOM에 액세스할 수 있습니다. 간단한 예는 다음과 같습니다:
|
1 |
$("selector").method(); |
이것이 jQuery에서 사용할 형식입니다. 우리는 이미 다음 기호가 CSS에서 ID를 나타낸다는 것을 알고 있습니다: # 기호. 따라서 다음 선택기를 사용하여 demo ID에 액세스할 수 있습니다: #demo.html() 선택기. 이 메서드를 사용하면 요소에 있는 HTML을 변경할 수 있습니다.
다음 코드는 “Hello, World” 프로그램을 script.js 파일의 jQuery ready() 래퍼에 넣는 것을 보여줍니다:
|
1 2 3 |
$(document).ready(function() { $("#demo").html("Hello, World!"); }); |
이 코드 줄을 script.js 파일에 추가해야 합니다. 이 파일을 저장하세요. 그 후에 브라우저에서 index.html 파일을 열 수 있습니다. 출력 결과로 Hello, World!를 볼 수 있어야 합니다. 이해를 돕기 위해 이 시점에서 DOM을 확인해 보는 것도 좋습니다. “Hello, World!” 텍스트를 마우스 오른쪽 버튼으로 클릭합니다. '검사'(Inspect Element)를 선택합니다. DOM에 다음과 같이 표시됩니다: <p id="demo">Hello, World!</p>. 반면에 '페이지 소스 보기'를 클릭하면 원시 HTML만 표시됩니다. 이 경우에는 다음과 같습니다: <p id="demo"></p>.
선택자(Selectors)란 무엇인가요?
이제 jQuery의 몇 가지 중요한 기능으로 넘어가겠습니다. 그 중 하나가 선택자입니다. jQuery 선택자는 프로그램에 작업하거나 '선택'하려는 요소를 알려줍니다. CSS에서 사용하는 선택자와 매우 유사합니다. 다음은 jQuery에서 선택자에 접근하는 기본 형식입니다:
|
1 |
$("selector") |
홑따옴표나 쌍따옴표 문자열을 모두 사용할 수 있지만, jQuery 스타일 가이드는 후자를 선호합니다. 원하신다면 다음에서 전체 jQuery 선택자 목록을 볼 수 있습니다: 이 공식 페이지. 참고로 가장 자주 사용되는 선택자 몇 가지를 소개합니다:
-
$("*")
와일드카드(Wildcard) 선택자입니다. 페이지의 모든 요소를 선택합니다.
-
$(this)
현재(Current) 선택자입니다. 현재 함수로 작업 중인 요소를 선택합니다.
-
$("p")
태그(Tag) 선택자입니다. 다음 태그의 모든 인스턴스를 선택합니다: <p> 태그.
-
$(".example")
클래스(Class) 선택자입니다. 다음 클래스가 적용된 모든 단일 요소를 선택합니다: example 클래스.
-
$("#example")
아이디(Id) 선택자입니다. 다음 아이디의 단일 인스턴스만 선택합니다: example 아이디.
-
$("[type='text']")
속성(Attribute) 선택자입니다. 다음 값이 적용된 모든 요소를 선택합니다: text (속성: type).
-
$("p:first-of-type")
의사 요소(Pseudo Element) 선택자입니다. 첫 번째 <p>.
이벤트(Events)란 무엇인가요?
웹페이지가 로드되자마자 로드되는 일부 기능이 있습니다. “Hello, World” 예제를 생각해 보세요. 이 경우 소스 HTML에 코드를 직접 추가할 수 있습니다. 하지만 기능을 로드하는 데 사용자의 상호작용이 필요하다면 어떻게 될까요? 바로 이 부분에서 jQuery가 유용해집니다.
사용자가 버튼을 클릭한 후 일부 텍스트가 나타나도록 하고 싶다고 가정해 보겠습니다. 이 기능을 추가하려면 <button> 요소를 index.html 파일에 추가해야 합니다. 이 버튼은 클릭 '이벤트'를 감지하게 됩니다:
|
1 2 3 4 5 6 |
... <body> <button id="trigger">Click me</button> <p id="demo"></p> |
사용자가 브라우저와 상호작용하는 모든 순간이 이벤트로 간주됩니다. 상호작용은 마우스 포인터나 키보드를 통해 이루어질 수 있습니다. 위의 예에서 버튼 클릭이 바로 우리의 이벤트입니다. 그래서 이를 클릭 이벤트라고 부릅니다.
다음으로, “Hello, World” 코드가 포함된 함수를 호출해야 합니다. 이를 위해 click() 메서드를 사용합니다:
|
1 2 3 |
$(document).ready(function() { $("#trigger").click(); }); |
보시다시피, <button> 요소의 ID 이름은 trigger입니다. $(“#trigger")를 사용하여 선택할 수 있습니다. click() 메서드를 추가하는 목적은 프로그램이 클릭 이벤트를 감지하도록 하는 것입니다. 다음으로, 메서드 내부에 텍스트 코드가 있는 함수를 배치합니다:
|
1 2 3 |
function() { $("#demo").html("Hello, World!"); } |
최종 코드는 다음과 같을 것입니다:
|
1 2 3 4 5 |
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); }); |
이제 script.js 파일을 저장할 수 있습니다. index.html 파일을 새로고침하세요. 브라우저에서 변경 사항을 적용합니다. 버튼을 클릭하면 테스트 출력인 “Hello, World!”가 나타납니다.
click 외에도 다른 유형의 jQuery 이벤트가 있습니다. 다음에서 이러한 이벤트 메서드의 전체 목록을 볼 수 있습니다: 이 공식 문서. 다음은 가끔 접할 수 있는 가장 자주 사용되는 몇 가지 이벤트입니다:
-
click()
click 이벤트는 마우스를 한 번 클릭할 때 코드를 실행합니다.
-
hover()
hover 이벤트는 마우스 포인터가 요소 위에 올라갔을 때 코드를 실행합니다. 또한 마우스가 진입하거나 벗어날 때 코드가 실행되도록 mouseenter() 및 mouseleave()로 각각 지정할 수 있습니다.
-
submit()
폼을 제출하면 코드가 실행됩니다.
-
scroll()
화면을 아래로 스크롤하는 이벤트가 발생할 때 코드가 실행됩니다.
-
keydown()
키보드의 키를 누르면 코드가 실행됩니다.
이펙트(Effects)란 무엇인가요?
jQuery 이펙트는 jQuery 이벤트와 함께 작동합니다. 이펙트의 주된 목적은 용어 그대로 페이지에 애니메이션을 추가하는 것입니다. 요소를 조작하여 다양한 종류의 효과를 적용할 수 있습니다. 이러한 이펙트는 특정 이벤트에 의해 트리거될 수 있습니다.
더 잘 이해하기 위해 예를 들어 보겠습니다. 팝업 오버레이를 열고 닫고 싶다고 가정해 봅시다. 한 가지 방법은 두 개의 서로 다른 ID를 사용하는 것입니다. 하나는 오버레이를 열고 다른 하나는 닫는 것입니다. 또 다른 방법은 클래스를 사용하는 것입니다. 클래스를 사용하는 것의 장점은 동일한 함수로 오버레이를 열고 닫을 수 있다는 것입니다.
여러분의 index.html 파일을 엽니다. 그런 다음, <button> 및 <p> 태그를 body에서 삭제합니다. 이제 HTML에 다음 코드 줄을 추가합니다:
|
1 2 3 4 5 6 7 8 9 10 |
... <body> <button class="trigger">Open</button> <section class="overlay"> <button class="trigger">Close</button> </section> ... |
다음으로 style.css 파일을 살펴보겠습니다. 여기서 우리의 목표는 최소한의 CSS를 사용하여 오버레이를 숨기는 것입니다. 이를 위해 display: none을 사용하고 다음과 같이 중앙에 배치합니다:
|
1 2 3 4 5 6 7 8 9 10 |
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray; } |
다음으로, toggle() 메서드를 사용하겠습니다. 이 메서드를 사용하면 display 속성을 none 및 block 사이에서 전환할 수 있습니다. 따라서 클릭할 때마다 오버레이가 숨겨지거나 표시됩니다. 이 코드를 script.js 파일에 추가합니다:
|
1 2 3 4 5 |
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); }); }); |
마지막으로, index.html을 새로고침하여 변경 사항을 적용합니다. 이제 모달의 표시 여부를 전환할 수 있습니다. 버튼을 클릭하기만 하면 됩니다. 이와 결합하여 사용할 수 있는 다른 jQuery 이펙트도 있습니다. 예를 들어, 단순한 toggle() 을 slideToggle() 또는 fadeToggle로 변경할 수 있습니다.().
다음은 jQuery에서 흔히 사용되는 몇 가지 이펙트 메서드입니다:
-
toggle()
이 메서드는 요소의 표시 여부를 변경할 수 있게 해줍니다. 이와 관련된 단방향 이펙트는 show() 및 hide().
-
fadeToggle()
이 메서드는 애니메이션을 통해 요소의 표시 여부와 불투명도를 전환합니다. 이 경우 단방향 이펙트는 fadeIn() 및 fadeOut().
-
slideToggle()
이 메서드는 슬라이딩 효과를 사용하여 요소의 표시 여부를 전환합니다. 이 경우 단방향 이펙트는 slideUp() 및 slideDown().
-
animate()
이 이펙트 메서드는 사용자 정의 애니메이션 효과를 수행할 수 있게 해줍니다. 지정된 요소의 CSS 속성을 사용합니다.
결론
이 튜토리얼이 jQuery를 철저하게 소개하는 데 도움이 되었기를 바랍니다. 이는 웹 개발과 코드 작성을 용이하게 하는 데 큰 도움이 되는 매우 유용한 도구입니다. 프로그래밍 세계를 처음 접하는 분들에게는 특히 더 그렇습니다.
우리는 jQuery의 기초를 구성하는 다양한 요소를 살펴보았습니다. 또한 이러한 요소를 선택하고 수정하는 방법과 이벤트 및 효과를 잘 활용하는 방법도 배웠습니다. jQuery와 같은 도구를 마스터하면 매력적인 사용자 경험을 제공하는 대화형 기능으로 가득 찬 웹사이트를 만드는 데 도움이 될 수 있습니다.
JavaScript 작업 시 도움이 될 만한 몇 가지 리소스를 저희 블로그에서 확인해 보세요:
즐거운 컴퓨팅 되세요!
댓글
아직 댓글이 없습니다. 첫 번째로 작성해 보세요.