CSS 선택기 오류 수정 방법

이 페이지에서는 잘못된 CSS 선택기로 인해 발생하는 '요소를 찾을 수 없음' 오류를 수정하는 방법을 알아봅니다.
이미 방법을 알고 있다고 가정합니다:

• CSS 및 HTML 읽기/쓰기
• Chrome 개발자도구를 사용하여 HTML 요소 검사하기

(이를 먼저 배우려면 관련 문서 섹션을 참조하세요.)

일반적인 원인 및 해결 방법

문제 해결을 시작하려면 현재 CSS 선택기를 확인해 보겠습니다.

실패한 단계로 이동하여 클릭하여 CSS 선택기를 확인합니다.

일반적인 원인과 해결 방법을 살펴보겠습니다.

1. 자동 생성된 CSS 선택기

원인

아래 예시와 같이 CSS 선택기가 매우 길어 보이면 DevTools에서 CSS 선택기가 자동 생성되었음을 의미합니다.

#header-navigation > div > nav > div > div.d-none.d-lg-block.flex-grow-1.h-100 > div > div > div:nth-child(3) > a

개발자 도구에서 CSS 선택기를 얻는 것이 빠르고 쉬울 수 있지만 웹사이트 구조가 자주 업데이트되는 경우 취약한 경향이 있습니다.

솔루션

요소에 고유한 ID 또는 클래스 조합을 찾습니다.

예를 들어

a#LINK_TO_로그인_페이지

또는

헤더 a.navigation.login

사용 가능한 ID 또는 클래스가 없는 경우 다음과 같이 속성 선택기를 사용하여 다른 속성을 지정할 수 있습니다:

a[href="./login"]

또는

a img[alt="로그인 버튼"]

이렇게 하면 업데이트에 영향을 받지 않는 선택기를 얻을 수 있습니다.

2. 임의의 ID 또는 클래스명

아래 예시와 같이 CSS 선택기에 임의의 문자열이 있는 경우 해당 ID 또는 클래스명이 일부 빌드 도구에서 생성되었음을 의미합니다.

a.login_ac2187y3

임의의 부분(접두사, 접미사 또는 전체 클래스명/아이디)은 빌드 후에 변경될 수 있습니다.

이 역시 어트리뷰트 선택기를 사용하여 해결할 수 있습니다.

a[href="./login"]

또한 일관된 부분(위의 예에서 login)이 있는 경우 와일드카드 구문을 사용하여 지정할 수 있습니다.

이것은 문자열 "login"이 포함된 클래스 이름과 일치합니다:

a[class*="login"]

이것은 "login"으로 시작하는 클래스 이름과 일치합니다:

a[class^="login"]

속성 선택자에 대해 자세히 알아보려면 MDN 웹 문서 - 속성 선택자를 참조하세요.

팁

CSS 선택기의 '고유성'을 확인하는 방법###

선택기가 페이지에서 하나의 요소와만 일치하는지 확인하려면 아래 단계를 따르세요:

1. 개발자 도구 창을 엽니다.
2. 요소 탭으로 이동합니다.
3. 3. Ctrl + F(Windows) 또는 Cmd + F(Mac)를 눌러 검색 텍스트 상자를 엽니다.
4. 5. 텍스트 상자에 CSS 선택기를 입력합니다.
5. 6. 선택기로 찾은 요소의 수를 확인합니다.

그래도 문제가 계속 발생하면...

언제든지 고객 지원 팀에 문의하세요. 이 문제를 해결하도록 도와드리겠습니다.

관련 문서

• CSS 선택기 기본 사항에 대해 알아보려면 CSS 선택기를 효과적으로 사용하기를 참조하세요.
• HTML 요소를 검사하는 방법을 알아보려면 요소 지정을 위한 로케이터 추가를 참조하세요. Chrome DevTools의 공식 문서도 도움이 될 수 있습니다.
• CSS 선택기에서 사용할 수 있는 고급 구문에 대해 알아보려면 MDN 웹 문서 - 속성 선택기를 참조하세요.