의사 클래스 및 사용자 정의 선택자
:has(), :not(), :nth-child()와 같은 기본 제공 의사 클래스를 이해한 뒤, 재사용 가능한 요소 필터링을 위한 사용자 정의 선택자를 만드는 방법을 배웁니다.
의사 클래스 및 사용자 정의 선택자은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 3개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
의사 클래스의 강력한 기능 활용하기
고급 선택자에 오신 것을 환영합니다! 오늘은 선택된 요소의 특별한 상태를 정의하기 위해 선택자에 추가하는 특수 키워드인 의사 클래스를 살펴보겠습니다.
- 표준 HTML 속성이나 이름만으로는 쉽게 선택하기 어려운 요소를 대상으로 지정할 수 있습니다.
- 선택 대상에 적용하는 동적 필터라고 생각하면 됩니다.
의사 클래스는 콜론(:)으로 시작하며, :hover나 :first-child와 같이 작성합니다.
위치로 대상 지정: :nth-child()
:nth-child() 의사 클래스는 형제 요소 그룹에서의 위치를 기준으로 요소를 선택합니다. 목록이나 표의 행을 스타일링할 때 매우 유용합니다.
:nth-child(n): n번째 자식 요소를 선택합니다.:nth-child(odd): 홀수 번째 자식 요소를 선택합니다.:nth-child(even): 짝수 번째 자식 요소를 선택합니다.
첫 번째 자식 요소를 1로 하여 계산을 시작합니다.
:nth-child(odd/even)으로 스타일링하기
:nth-child(odd)와 :nth-child(even)을 사용하면 목록에 얼룩말 줄무늬처럼 번갈아 적용되는 스타일을 빠르게 지정할 수 있습니다.
이 예제를 실행하여 결과를 확인해 보세요.
$(document).ready(function() {
// Selects odd list items and makes their text blue
$('li:nth-child(odd)').css('color', 'blue');
// Selects even list items and makes their text green
$('li:nth-child(even)').css('color', 'green');
});
// HTML Structure (imagine this is in your page):
// <ul>
// <li>Item 1</li>
// <li>Item 2</li>
// <li>Item 3</li>
// <li>Item 4</li>
// </ul>고급 :nth-child() 수식
:nth-child() 안에서 An+B와 같은 더 복잡한 수식을 사용할 수 있습니다. 여기서 A는 주기의 크기를 나타내고 B는 오프셋을 나타냅니다.
:nth-child(3n): 3번째마다 자식 요소를 선택합니다(3번째, 6번째, 9번째...).:nth-child(3n+1): 1번째, 4번째, 7번째 자식 요소를 선택합니다.
이를 통해 일정한 간격을 기준으로 매우 정밀하게 선택할 수 있습니다.
:not()으로 요소 제외하기
:not() 의사 클래스를 사용하면 선택 대상에서 특정 요소를 제외할 수 있습니다. "모든 문단을 선택하되, class가 'intro'인 문단은 제외해"라고 말하는 것과 같습니다.
- 인수로 다른 선택자를 받습니다:
:not(selector). - 복잡한 새 선택자를 작성하지 않고 기존 선택을 세밀하게 조정할 수 있어 강력합니다.
실전에서 :not() 사용하기
목록 항목 전체에 테두리를 추가하되 맨 처음 항목만 제외한다고 가정해 보겠습니다. 이때 :not(:first-child)가 적합합니다.
:not()이 첫 번째 항목을 제외하는 방식을 확인해 보세요.
$(document).ready(function() {
// Selects all list items that are NOT the first child
$('li:not(:first-child)').css('border-top', '1px solid gray');
});
// HTML Structure:
// <ul>
// <li>First Item</li>
// <li>Second Item</li>
// <li>Third Item</li>
// </ul>:has()로 부모 요소 선택하기
:has() 의사 클래스는 특별한 기능을 합니다. 인수로 전달된 선택자와 일치하는 요소를 하나 이상 포함한 요소를 선택합니다.
- "내부에
<p>태그가 있는 모든<div>를 알려 주세요"라고 요청하는 것과 같습니다. - 자식 요소의 특성을 기준으로 부모 요소를 선택할 수 있습니다.
:has()로 강조 표시하기
이미지를 포함하는 <div> 컨테이너만 강조 표시한다고 가정해 보겠습니다. :has('img')를 사용하면 효율적으로 처리할 수 있습니다.
이 코드를 실행하여 어느 div에 테두리가 표시되는지 확인해 보세요.
$(document).ready(function() {
// Selects divs that contain an image and adds a border
$('div:has(img)').css('border', '2px solid red');
});
// HTML Structure:
// <div id="container1">
// <p>Text only</p>
// </div>
// <div id="container2">
// <img src="example.png" alt="An image">
// <p>Text and image</p>
// </div>사용자 지정 선택자: jQuery 확장하기
jQuery에 내장된 선택자만으로 충분하지 않다면 어떻게 해야 할까요? 직접 사용자 지정 의사 선택자를 만들 수 있습니다! 이를 통해 매우 구체적인 사용자 지정 논리를 기준으로 요소를 필터링할 수 있습니다.
jQuery.expr[':']를 사용하여 등록합니다.- 선택 코드를 더 깔끔하고 재사용하기 쉽게 만들 수 있습니다.
정말 고유한 필터링이 필요할 때 사용하는 고급 기능입니다.
사용자 지정 :contains-word() 만들기
부분 문자열이 아니라 특정한 완전한 단어를 포함하는 요소를 찾는 :contains-word()라는 사용자 지정 선택자를 만들어 보겠습니다.
이 예제에서는 :contains-word()를 정의한 다음 사용합니다.
$(document).ready(function() {
// Define a custom pseudo-selector ':contains-word'
$.expr[':']['contains-word'] = $.expr.createPseudo(function(word) {
var pattern = new RegExp('\b' + word + '\b', 'i');
return function(elem) {
return pattern.test($(elem).text());
};
});
// Use the custom selector to find paragraphs containing 'hello'
$('p:contains-word("hello")').css('background-color', 'yellow');
});
// HTML Structure:
// <p>Say hello world!</p>
// <p>Another paragraph.</p>
// <p>Hello there!</p>의사 클래스 도전 과제
다음 HTML을 살펴보세요.
<ul>
<li class="special">One</li>
<li>Two</li>
<li class="special">Three</li>
<li>Four</li>
<li class="special">Five</li>
</ul>'Two'와 'Four'만 선택하는 jQuery 선택자는 무엇일까요?
복습: 의사 클래스와 사용자 지정 선택자
강력한 jQuery 선택 기법을 익히셨습니다!
- 의사 클래스(예:
:nth-child(),:not(),:has())를 사용하면 요소의 상태나 다른 요소와의 관계를 기준으로 요소를 선택할 수 있습니다. :nth-child()는 수식을 사용하더라도 위치를 기준으로 요소를 선택합니다.:not()은 선택 대상에서 요소를 제외합니다.:has()는 자식 요소를 기준으로 부모 요소를 선택합니다.jQuery.expr[':']를 사용하여 매우 구체적인 필터링을 위한 사용자 지정 의사 선택자를 직접 만들 수도 있습니다.
이 기법을 계속 연습하여 DOM 대상 지정을 더욱 세밀하게 다듬어 보세요.
자주 묻는 질문
“의사 클래스 및 사용자 정의 선택자” 강의는 무료인가요?
네 — “의사 클래스 및 사용자 정의 선택자” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
“의사 클래스 및 사용자 정의 선택자”에서 뭘 배우나요?
:has(), :not(), :nth-child()와 같은 기본 제공 의사 클래스를 이해한 뒤, 재사용 가능한 요소 필터링을 위한 사용자 정의 선택자를 만드는 방법을 배웁니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
jQuery Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 jQuery Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 2번째 강의입니다.
“의사 클래스 및 사용자 정의 선택자” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 jQuery Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 jQuery Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 고급 속성 선택자
- 의사 클래스 및 사용자 정의 선택자
- 효율적인 DOM 순회 기법