[스나이퍼팩토리] 한컴AI아카데미(26.04.17)

학습일지

[스나이퍼팩토리] 한컴AI아카데미(26.04.17)

cd-record 2026. 4. 17. 18:57

jQuery

웹사이트를 만들 때 자바스크립트(JavaScript) 코드를 훨씬 더 쉽고 짧게 쓸 수 있도록 도와주는 도구(라이브러리)

주요 명령어

기능	명령어 예시	설명
선택	$('#id')	특정 ID를 가진 요소를 선택
보이기/숨기기	.show(), .hide()	요소를 화면에서 보여주거나 숨김
클래스 제어	.addClass(), .removeClass()	CSS 클래스를 넣었다 뺐다 함
내용 변경	.text('내용'), .val('값')	글자나 입력창의 값을 바꿈
이벤트	.click(), .hover()	클릭이나 마우스를 올렸을 때 작동

예시

<!doctype html>
<html lang="ko">
  <head>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
      $(function(){
          $("p").on(click(function() {
              $(this).css("color", "red");//여러개는 중괄호 ex.$(this).css({"css":"red", ..})
          }));
      });
    </script>
  </head>
  <body>
    <p>
      이제부터 <span>제이쿼리</span>를 다 같이 공부해보죠!!<br />
      마우스로 글씨를 클릭해보세요!!
    </p>
    </body>
</html>

동작

1. <script src="...jquery-1.12.4.min.js"></script>

제이쿼리 공장에 있는 도구들을 빌려오는 문장입니다. 이 줄이 있어야 $ 같은 제이쿼리 문법을 컴퓨터가 알아듣습니다.

2. $(function(){ ... });

**"HTML 문서가 다 읽혀지면(Ready) 이 안의 코드를 실행해라"**라는 뜻입니다.
웹페이지가 아직 다 안 그려졌는데 글씨 색을 바꾸라고 하면 에러가 날 수 있기 때문에, 안전하게 감싸주는 보호막 같은 코드입니다.

3. .on("click", function() { ... })

이벤트 리스너입니다. "클릭(click)이라는 사건이 발생하면, 뒤에 나오는 함수(function)를 실행해라!"라는 뜻입니다.

* 자바스크립트의 window.onload와 제이쿼리의 $(document).ready() (혹은 $(function(){}))의 차이점

window.onload (순수 JS): HTML뿐만 아니라 이미지, CSS, 외부 리소스가 모두 다운로드될 때까지 기다렸다가 실행
$(function(){ ... }) (jQuery): 이미지는 로딩 중이라도 HTML 구조(DOM)만 다 그려지면 바로 실행

.hover(), .click()

.hover(function1, function2): 마우스를 올렸을 때와 뗐을 때를 한번에 제어
.click():클릭 이벤트를 연결하는 표준방식

속성과 텍스트 제어(.attr(), .text(), .css(), .val())

메서드	역할	코드 예시
.attr()	HTML 속성(src, href 등)을 가져오거나 변경	attr("src", "new.jpg")
.text()	요소 내부의 글자(Text) 내용을 변경	text("바뀔 내용")
.css()	스타일(CSS)을 변경 (객체 {} 사용 시 여러 개 변경 가능)	css({ fontSize: "28px" })
.val()	<input>, <select>, <textarea>와 같은 양식(Form) 요소의 값을 가져오거나 설정할 때 사용	val('Gemini')

001.html

0.00MB

필터선택자

필터 선택자: 특정 조건(순서, 내용, 상태 등)에 맞는 것만 골라내는 체

* 공백과 꺽쇠(>) 차이

#list1 li: #list1 안에 있는 모든 후손 li (손자 포함)
#list1 > li: #list1 바로 한 단계 아래에 있는 자식 li만

인덱스(순서) 기준 필터

가장 많이 쓰이는 방식으로, 인덱스는 0부터 시작한다는 점이 핵심

선택자	의미	예시 설명
:eq(n)	Equal: n번째 인덱스 선택	:eq(2) → 3번째 요소 선택
:gt(n)	Greater Than: n 초과 인덱스 선택	:gt(2) → 4번째부터 끝까지 선택
:lt(n)	Less Than: n 미만 인덱스 선택	:lt(2) → 1, 2번째 요소 선택

홀수/짝수 필터

테이블이나 리스트에 '줄무늬' 효과를 줄 때 필수적입니다.

선택자	의미	주의사항
:even	짝수 인덱스 (0, 2, 4...)	시각적으로는 1, 3, 5번째 행
:odd	홀수 인덱스 (1, 3, 5...)	시각적으로는 2, 4, 6번째 행

처음과 끝, 제외 필터

범위 내에서 극단적인 위치를 찾거나 예외를 둘 때 사용합니다.

선택자	의미	설명
:first	그룹 중 가장 첫 번째 요소	li:first → 리스트의 첫 항목
:last	그룹 중 가장 마지막 요소	li:last → 리스트의 마지막 항목
:not(선택자)	조건에 해당하지 않는 요소	:not(.active) → active 클래스가 없는 것들

내용 및 자식 유무 필터

텍스트 내용이나 특정 자식 태그의 포함 여부를 확인합니다.

선택자	의미	특징
:contains('글자')	특정 글자가 포함된 요소	td:contains('품절') → '품절'이 써진 칸
:has(태그)	특정 자식 태그를 가진 요소	li:has(span) → 안에 span이 들어있는 li

빈 공간 확인 필터

태그 내부에 내용(텍스트나 자식)이 있는지 없는지 판단합니다.(.parent()메서드와 다른 의미로 주의)

선택자	의미	설명
:empty	자식 요소와 텍스트가 모두 없는 요소	내용이 텅 빈 박스나 칸
:parent	자식 요소나 텍스트가 하나라도 있는 요소	:empty와 정반대 개념 (부모 역할을 하는 것)

002.html

0.00MB

내용 가져오기/설정하기와 새로운 요소 추가하기

.html() vs .text() (매우 중요!)

메소드	가져올 때 (Getter)	설정할 때 (Setter)
.html()	선택한 요소 내부의 HTML 태그까지 통째로 가져옴	문자열에 포함된 HTML 태그를 해석해서 화면에 그림
.text()	태그는 제외하고 순수 텍스트(글자)만 쏙 빼서 가져옴	태그가 포함되어 있어도 그냥 글자 그대로 화면에 출력함

ex) 현재 코드에서 <h1><u>.html()</u> 메소드</h1>를 대상으로 한다면:

$("h1").text() 결과: .html() 메소드 (밑줄 태그 무시)
$("h1").html() 결과: <u>.html()</u> 메소드 (태그 포함)

요소 추가 메소드 (내부 삽입): 기준이 되는 부모 요소(ul#list)의 안쪽 공간에 새로운 자식을 넣는 방법
- .append()(뒤에 추가)
  - 의미: 선택한 요소의 내부 마지막 자식으로 추가합니다.
- .prepend() (앞에 추가)
  - 의미: 선택한 요소의 내부 가장 첫 번째 자식으로 추가합니다.
요소 이동 메소드
- .appendTo(), .prependTo()(새로운 요소를 만들기도 하지만, 기존에 있는 요소를 선택하면 위치 이동.like: 잘라내기)
  - $(A).appendTo(B): A를 B의 내부 마지막 자식으로 보냅니다.
  - $(A).prependTo(B): A를 B의 내부 첫번째 자식으로 보냅니다.
- 형제간 이동 메서드(Before/After)
  - $(A).insertAfter(B): A를 B의 **바로 뒤(다음 형제)**에 놓습니다.
  - $(A).insertBefore(B): A를 B의 **바로 앞(이전 형제)**에 놓습니다.
- 복제(.clone())
  - 특징: HTML 구조와 CSS 스타일은 똑같이 가져오지만, 원래 요소에 걸려있던 클릭 이벤트 같은 기능은 복제되지 않습니다.
  - 이벤트까지 복제하기(true옵션)
    - 만약 버튼을 복제했는데, 복제된 버튼도 원래 버튼처럼 클릭했을 때 동작하게 하고 싶다면 true를 넣어줍니다.
    - // true를 넣으면 클릭 이벤트, 데이터 등 모든 기능까지 통째로 복제합니다. $("#btn").clone(true).appendTo("#list");
- 대체(.replaceAll())
  - 의미: 선택한 요소를 가지고 다른 요소들을 아예 갈아치웁니다.
  - 코드 분석: $("#thirdItem").replaceAll(".item");
    - 화면에 있는 .item 클래스를 가진 모든 요소를 찾아냅니다. (1, 2, 3번째 아이템 모두)
    - 그것들을 전부 없애버리고 그 자리를 **#thirdItem**으로 채워버립니다.
    - 결과적으로 리스트에는 "세 번째 아이템이에요!"만 남게 될 수 있습니다.

상위 요소 탐색

상위 탐색 메소드 3총사 비교

메소드	탐색 범위	특징
.parent()	바로 위 부모 딱 하나	한 단계만 올라갑니다. 조건에 안 맞으면 아무것도 선택 안 됨.
.parents()	나를 제외한 모든 조상	<body>, <html>까지 끝까지 올라가며 조건에 맞는 걸 다 찾습니다.
.closest()	나를 포함한 가장 가까운 조상	위로 올라가다 조건에 맞는 첫 번째 요소를 만나면 즉시 중단합니다.

005.html

0.00MB

하위 요소 탐색

하위 탐색 메소드 핵심 비교

메소드	탐색 범위	특징
.children()	직계 자식만 (1단계 밑)	바로 아래에 있는 요소들만 선택합니다. (손자는 무시)
.find()	모든 후손 (자식, 손자, 증손자...)	선택한 요소의 안쪽에 있는 모든 요소를 끝까지 다 뒤져서 찾습니다. (모든 후손 검색가능, 특정 후손 검색도 가능)

006.html

0.00MB

형제 요소 중 원하는 것을 골라내는 필터링 메소드

형재 탐색 메소드 (Siblings)

메소드	탐색 대상	특징
.siblings()	모든 형제	나를 제외한 위, 아래 모든 형제를 다 선택합니다.
.next()	바로 다음 형제	내 바로 아래에 붙어있는 요소 딱 하나만 선택합니다.
.prev()	바로 이전 형제	내 바로 위에 붙어있는 요소 딱 하나만 선택합니다.
.nextAll()	내 아래 모든 형제	내 뒤로 오는 모든 요소를 전부 선택합니다.
.prevAll()	내 위 모든 형제	내 앞으로 오는 모든 요소를 전부 선택합니다.

007.html

0.00MB

양식(Form) 요소의 상태를 제어할 때 사용하는 메소드

체크박스, 라디오 버튼, 셀렉트 박스 같은 양식(Form) 요소의 상태를 제어할 때 핵심적으로 사용

.prop()메소드: Property(속성)의 줄임말로, HTML 태그가 가진 속성이 아니라 자바스크립트 입장에서의 실제 상태값을 의미
- .prop("checked", true): 체크박스를 체크된 상태로 만듭니다.
- .prop("disabled", true): 입력창을 비활성화(회색) 상태로 만듭니다.
- .prop("selectedIndex", 1): 드롭다운 메뉴에서 두 번째 항목을 선택합니다.

* .attr() vs .prop() 차이

.attr() (Attribute): HTML 문서 내 코드상의 텍스트를 다룹니다. (예: checked="checked"라는 글자가 써 있니?)
.prop() (Property): 브라우저 메모리상의 실제 상태를 다룹니다. (예: 지금 진짜로 체크가 되어 있니? true or false)

** 그래서 주로 checked, selected, disabled, readonly 등 체크여부, 활성화여부 체크 시 .prop() 사용

.removeProp()

$("input[value='jquery']").removeProp("checked");

checked라는 상태값 자체를 아예 지워버립니다.
주의: 보통 체크를 해제할 때는 .prop("checked", false)를 더 많이 씁니다. removeProp은 아예 속성 자체를 정의되지 않은 상태로 만들 수 있기 때문에 조심해서 사용해야 합니다.

클래스 제어 메소드

클래스 제어 메소

메소드	의미	설명
.addClass()	클래스 추가	선택한 요소에 특정 클래스를 붙입니다. (이미 있으면 중복 추가 안 됨)
.removeClass()	클래스 제거	선택한 요소에서 특정 클래스를 삭제합니다.
.toggleClass()	클래스 스위치	클래스가 없으면 추가하고, 있으면 제거합니다. (전등 스위치 역할)
.hasClass()	클래스 확인	특정 클래스가 있는지 확인하여 true 또는 false를 반환합니다.

009.html

0.00MB

이펙트(Effects) 메소드

*속도 조절 파라미터

모든 이펙트 메소드 괄호 안에는 속도 지정 가능

- 문자열: "slow", "fast"

- 숫자: 밀리초($1/1000$초) 단위. 예: $2000$은 2초.

기본 표시와숨김(show, hide)
- show(): 요소를 화면에 나타나게 합니다.
- hide(): 요소를 화면에서 사라지게 합니다.
- 특징: 애니메이션 없이 즉시 사라지고 나타납니다. (공간 자체를 차지하지 않게 됨)
투명도를 이용한 효과 (fade)
요소의 투명도(opactiy)를 조절하여 스르륵 나타나거나 사라지게 합니다.

메소드	동작 방식	특징
.fadeIn()	점점 진해지며 나타남	완전히 투명(0)에서 불투명(1)으로 변함
.fadeOut()	점점 흐려지며 사라짐	실행 후 display: none 처리가 됨
.fadeTo()	원하는 투명도까지 변함	fadeTo(시간, 투명도) 형식으로 사용 (예: 0.5는 반투명)
.fadeToggle()	나타나 있으면 숨기고, 숨겨져 있으면 나타냄	페이드 효과판 스위치

높이를 이용한 효과(slide)
블라인드를 올리고 내리는 것처럼 요소의 높이를 조절합니다.

메소드	동작 방식	특징
.slideDown()	아래로 펼쳐지며 나타남	메뉴 바 등에 자주 쓰임
.slideUp()	위로 접히며 사라짐	공간이 위쪽으로 말려 올라감
.slideToggle()	펼쳐져 있으면 접고, 접혀 있으면 펼침	아코디언 메뉴의 핵심

010.html

0.00MB

이벤트 위임

$("body").on("click",".btn", function(){
                $("#text").html("버튼을 클릭했습니다.");
            })

동작 원리: 클릭 사건은 발생한 지점부터 부모로 타고 올라갑니다(버블링). 이때 body가 가만히 지켜보고 있다가 "어? 방금 내 자식 중에 #btn이 클릭됐네?"라고 판단하여 대신 처리해 주는 방식
왜 쓰나요?:
1. 동적 요소 처리: 코드가 실행된 이후에 자바스크립트로 새로 만든 버튼(예: append로 추가한 리스트)에도 이벤트가 자동으로 적용됩니다.
2. 메모리 절약: 버튼이 100개일 때 각각 이벤트를 거는 게 아니라, 부모(body) 딱 한 명에게만 감시를 시키면 되므로 효율적입니다.

011.html

0.00MB

느낀점

오늘 jQuery를 배웠다. 처음 배우는 거라 언제 이 jQuery 메소드를 언제사용해야할 지 모르겠어서 너무 어렵게 느껴졌다. 그리고 메소드들을 너무 한꺼번에 배워서 뭘 써야하는 지도 모르겠다...또 멘붕 왔다..

——————————————————————————

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.

'학습일지' 카테고리의 다른 글

[스나이퍼팩토리] 한컴AI아카데미(26.04.22) (0)	2026.04.22
[스나이퍼팩토리] 한컴AI아카데미(26.04.21) (0)	2026.04.21
[스나이퍼팩토리] 한컴AI아카데미(26.04.16) (0)	2026.04.16
[스나이퍼팩토리] 한컴AI아카데미(26.04.15) (0)	2026.04.15
[스나이퍼팩토리] 한컴AI아카데미(26.04.14) (1)	2026.04.14

현재글[스나이퍼팩토리] 한컴AI아카데미(26.04.17)

cd-record 님의 블로그

cd-record 님의 블로그 입니다.

#한컴AI아카데미 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업, 한컴AI아카데미 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업,

Today :
Yesterday :

cd-record 님의 블로그