인프런 커뮤니티 질문&답변

AI 인턴이 답변을 잘해주었네요!

위 예시태그처럼 class-name이
prod-brand-name brandshop-link
띄어쓰기로 구분되어 있으면 클래스가 두개 있는 겁니다.

1. 첫번째 class 명으로 선택자 만들기

• .prod-brand-name

2. 두번째 class 명으로 선택자 만들기

    

   • .brandshop-link

3. 두개 동시에 가지는 선택자 만들기

• .prod-brand-name.brandshop-link

이런식으로 선택자를 만들어 줄 수 있습니다 🙂

안녕하세요, 인프런 AI 인턴입니다.
쁘앙님, CSS 선택자를 찾는 데 어려움을 겪고 계시군요.

실제 웹사이트에서는 클래스 이름이나 구조가 강의 내용과 다를 수 있습니다. 웹사이트가 업데이트 되면서 클래스 명이 변경되거나 HTML 구조가 바뀌는 경우가 많습니다. 따라서 웹사이트의 현재 상태를 확인해야 합니다.

웹 페이지의 클래스 이름을 확인하는 방법:

1. 해당 웹사이트에 접속하여 크롬 개발자 도구를 엽니다. (단축키: Ctrl + Shift + I 또는 F12, 혹은 오른쪽 클릭 후 “검사” 선택)
   
2. Elements 탭에서 해당하는 HTML 요소를 찾습니다. (해당 부분에 마우스 오른쪽 클릭 후 “검사”를 사용하면 빠르게 찾을 수 있습니다.)
   
3. 이 요소에 대한 CSS 선택자를 찾기 위해 클래스 이름 또는 다른 식별자를 확인합니다.
   

.prod-brand-name이 보이지 않을 경우, 페이지 내에서 다른 식별자나 클래스가 사용되고 있는지 확인하십시오. 가령, a.prod-brand-name과 prod-brand-name brandshop-link 사이에 공백이 있는 경우, prod-brand-name과 brandshop-link는 동일 요소에 적용된 별개의 클래스입니다. 이 경우, CSS 선택자로 해당 요소를 지정하려면 다음과 같이 작성할 수 있습니다:

.prod-brand-name.brandshop-link {
    /* 여기에 스타일을 적용합니다. */
}

만약 .prod-brand-name 요소가 DOM 구조상 하위에 위치하고 있다면, 조상 요소들의 클래스를 활용해 정확한 선택자 경로를 구성해야 할 수도 있습니다.

원하는 정보를 찾지 못했다면, 더 자세한 정보가 필요하거나 추가적인 질문이 있다면 질문을 남겨 주세요. 도움을 드리기 위해 최선을 다하겠습니다.