시각적 경험 작성기에 사용된 요소 선택기

Last update: Wed Aug 27 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

주제:

요소 선택기는 하나 이상의 요소를 식별할 수 있는 CSS 표현식입니다.

MDN()의Selectors Mozilla Developer Network 문서에서 CSS 선택기에 대한 기본 정보를 찾을 수 있습니다.

계정 환경 설정에서 요소 클래스나 요소 ID를 사용하지 여부를 설정할 수 있습니다. Administration > Visual Experience Composer 을(를) 클릭한 다음 선호하는 CSS 선택기를 선택하십시오.

요소 ID 사용: 같은 ID를 여러 요소에 사용하는 경우 비활성화하거나 요소 ID가 페이지 로드 시 변경될 수 있습니다.
요소 클래스 사용: 페이지의 요소 클래스가 변경될 수 있는 경우 비활성화합니다.
기본 설정 선택기 사용: VEC에서 고유한 선택기를 사용하여 웹 사이트의 주요 영역을 식별하려면 활성화하십시오.

NOTE

요소 클래스는 A/B Test, Automated Personalization 및 Multivariate Test 활동에서 선택기로 사용할 수 있습니다.

CSS 선택기를 사용할 시점과 고유한 ID를 사용할 시점에 대해서는 시각적 경험 작성기 우수 사례 및 제한 사항을 참조하십시오.

Target에서 요소에 대한 선택기를 생성하는 방법 section_D89D954BCBFB486CA081BE183776A475

Target은(는) 간단한 알고리즘을 사용하여 선택기를 만듭니다. 다음은 생성 논리에 대한 간략한 설명입니다.

요소에 ID가 있는 경우(예: id="container") 요소에 대한 선택기는 #container입니다.

예:

code language-html

code language-html
`<div class="wrapper"> <div id="container"> <!-- Selector is computed for this element --> <ul class="navigation"> <li class="item active"> Home </li> <li class="item"> Men </li> <li class="item"> Women </li> <li class="item"> Kids </li> </ul> </div> </div>`

<div class="wrapper">
  <div id="container"> <!-- Selector is computed for this element -->
    <ul class="navigation">
      <li class="item active"> Home </li>
      <li class="item"> Men </li>
      <li class="item"> Women </li>
      <li class="item"> Kids </li>
    </ul>
  </div>
</div>

요소에 클래스 특성이 포함되어 있으면 Target은(는) 요소에 있는 모든 클래스의 첫 번째 클래스를 활용하려고 합니다.

Target이(가) <HTML> 요소 또는 ID가 있는 요소를 찾을 때까지 상위 요소를 구문 분석하려고 합니다. 요소에 ID가 포함되어 있고 선택기가 하위 항목에서 계산될 때마다 이 요소의 ID는 선택기에 기여합니다.

예:

code language-html

code language-html
`<div class="wrapper"> <div id="container"> <!-- id is present here. It contributes to selector --> <ul class="navigation"> <li class="item active"> Home </li> <!-- Selector is computed for this element --> <li class="item"> Men </li> <li class="item"> Women </li> <li class="item"> Kids </li> </ul> </div> </div>`

<div class="wrapper">
  <div id="container"> <!-- id is present here. It contributes to selector -->
    <ul class="navigation">
      <li class="item active"> Home </li> <!-- Selector is computed for this element -->
      <li class="item"> Men </li>
      <li class="item"> Women </li>
      <li class="item"> Kids </li>
    </ul>
  </div>
</div>

이 예에서,

선택기: #container > ul.navigation:eq(0) > li.item:eq(0) (" > "는 바로 아래 하위를 가리킵니다.)

eq는 "tagName=UL"이 있는 요소가 있고 첫 번째 클래스가 navigation임을 인덱스에 알려줍니다. 따라서 index는 0입니다. 자세한 내용은 MDN의 선택기 문서를 참조하십시오.

요소에 클래스가 없는 경우 Target은(는) 요소에 tagName을(를) 사용하고 <HTML> 요소나 ID가 있는 요소가 발견될 때까지 상위 요소를 트래버스합니다.

예:

code language-html

code language-html
`<div class="wrapper"> <div id="container"> <!-- id is present here. It contributes to selector --> <ul class="navigation"> <li> Home </li> <li> Men </li> <li class="active"> Women </li> <li> Kids </li><!-- Selector is computed for this element --> </ul> </div> </div>`

<div class="wrapper">
  <div id="container"> <!-- id is present here. It contributes to selector -->
    <ul class="navigation">
      <li> Home </li>
      <li> Men </li>
      <li class="active"> Women </li>
      <li> Kids </li><!-- Selector is computed for this element -->
    </ul>
  </div>
</div>

선택기: #container > ul.navigation(0) > li:nth-of-type(4)

위 프로세스에서는

CSS 선택기가 DOM에서 요소를 고유하게 식별하는 한 이 CSS 선택기를 사용할 수 있습니다.
위의 접근 방식은 Target에서 사용하는 방식입니다. Target은(는) 이 접근 방식을 사용하도록 강제하지 않습니다. 포인트 #1이 true인 경우 선택기를 추가할 수 있습니다.
선택기에서 속성을 사용할 수 있습니다. 이 문서에서는 클래스 이름만 예로 사용합니다.

recommendation-more-help

3d9ad939-5908-4b30-aac1-a4ad253cd654