jQuery Academy · 강의

고급 속성 선택자

속성의 존재 여부, 값 또는 부분 일치 여부를 기준으로 요소를 선택하는 복잡한 속성 선택자를 살펴보고 선택의 정확도를 높입니다.

고급 속성 선택자은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 3개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

안녕하세요, 속성 선택자!

jQuery에서 요소를 선택하는 강력한 방법을 배워 보겠습니다! 속성 선택자를 살펴보면서 HTML 속성을 기준으로 요소를 선택하는 방법을 알아봅니다.

속성은 HTML 태그에 연결된 추가 데이터라고 생각할 수 있습니다. 예를 들면 id, class, href, data-* 등이 있습니다.

속성 존재 여부로 선택하기

가장 간단한 속성 선택자는 값과 관계없이 특정 속성을 가진 요소를 찾습니다. 문법은 [attributeName]입니다.

요소에 속성이 존재하는지만 확인하면 될 때 매우 유용합니다. 예를 들어 $('[title]')은 title 속성을 가진 모든 요소를 찾습니다.

직접 해 보기: 속성 존재 여부

존재 여부 선택자를 사용하여 title 속성을 가진 모든 요소를 찾고 태그 이름을 표시해 보겠습니다.

<p title="Hello Tooltip">This paragraph has a title.</p>
<div>Another element</div>
<span title="Span Title">A span with a title.</span>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[title]').each(function(index, element) {
      $('#output').append('<p>Found: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; with title="' + $(element).attr('title') + '"</p>');
    });
  });
</script>

속성 값과 정확히 일치하는 요소 선택하기

속성이 정확히 특정 값을 가진 요소를 선택하려면 [attributeName="value"]를 사용합니다.

이 선택자는 매우 정확합니다! 속성 값이 지정한 값과 완전히 같을 때만 일치하며, 대소문자도 구분합니다(jQuery의 속성 값 일치 여부는 대소문자를 구분합니다).

정확히 일치하는 선택자 사용하기

data-type 속성 값이 정확히 "primary"인 요소를 찾습니다.

<button data-type="primary">Submit</button>
<button data-type="secondary">Cancel</button>
<a href="#" data-type="primary">Link</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[data-type="primary"]').each(function(index, element) {
      $('#output').append('<p>Exact match: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; (Type: ' + $(element).data('type') + ')</p>');
    });
  });
</script>

특정 값으로 시작하는 속성 값

[attributeName^="value"] 선택자는 속성 값이 특정 문자열로 시작하는 요소를 찾습니다.

비슷한 명명 규칙을 가진 요소를 그룹화할 때 유용합니다.
링크를 필터링할 때 유용합니다(예: /products로 시작하는 모든 링크).

특정 값으로 끝나거나 포함하는 선택자

이 선택자들은 부분적으로 일치하는 요소를 더 유연하게 찾을 수 있게 해 줍니다.

[attributeName$="value"]: 속성 값이 지정한 문자열로 끝나면 일치합니다.
[attributeName*="value"]: 속성 값 어디에든 지정한 문자열이 포함되어 있으면 일치합니다.

실시간 예제: 부분 일치

href 속성의 부분적인 값에 따라 ^=, $=, *=가 서로 다른 요소를 선택하는 모습을 확인해 보세요.

<a href="/products/item-1">Item 1</a>
<a href="/about/contact">Contact</a>
<a href="/products/item-2">Item 2</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('#output').append('<h3>Starts with "/products":</h3>');
    $('[href^="/products"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Ends with "contact":</h3>');
    $('[href$="contact"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Contains "item":</h3>');
    $('[href*="item"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });
  });
</script>

단어 및 하이픈 선택자

특수한 선택자를 두 가지 더 살펴보겠습니다.

[attributeName~="value"]: 속성 값에 공백으로 구분된 특정 단어가 포함되어 있으면 일치합니다. class 속성과 함께 자주 사용됩니다.
[attributeName|="value"]: 속성 값이 정확히 "value"이거나 "value-"로 시작하면 일치합니다. 언어 코드인 lang="en-US"와 함께 자주 사용됩니다.

빠른 확인: 선택자

아래의 <div> 요소를 올바르게 식별하는 jQuery 선택자는 무엇일까요?

<div class="card active-item" data-role="admin-panel" lang="en-US">
  Admin Area
</div>

복습: 속성 선택자

잘하셨습니다! 고급 속성 선택자를 모두 익혔습니다.

[attr]: 속성의 존재 여부를 확인합니다.
[attr="val"]: 정확히 일치하는 값을 찾습니다.
[attr^="val"]: 특정 값으로 시작하는 값을 찾습니다.
[attr$="val"]: 특정 값으로 끝나는 값을 찾습니다.
[attr*="val"]: 특정 값을 포함하는 값을 찾습니다.
[attr~="val"]: 공백으로 구분된 단어를 포함하는 값을 찾습니다.
[attr|="val"]: 값이 정확히 일치하거나 'val-'로 시작하는 값을 찾습니다.

이 선택자들을 사용하여 매우 정확하고 효율적인 jQuery 코드를 작성해 보세요!

자주 묻는 질문

“고급 속성 선택자” 강의는 무료인가요?

네 — “고급 속성 선택자” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“고급 속성 선택자”에서 뭘 배우나요?

속성의 존재 여부, 값 또는 부분 일치 여부를 기준으로 요소를 선택하는 복잡한 속성 선택자를 살펴보고 선택의 정확도를 높입니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

jQuery Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 jQuery Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 1번째 강의입니다.

“고급 속성 선택자” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 jQuery Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 jQuery Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← jQuery Academy(으)로 돌아가기