# CSS 셀렉터

## CSS 셀렉터란?

자동클릭, 자동로그인, 페이지네이션 탬플릿 등의 기능을 사용하기 위해서는 클릭할 요소를 특정해주는 Selector 값이 필요합니다. 이 도움말에서는 해당 Selector 값을 가져오는 방법을 안내합니다.

{% hint style="success" %}
**CSS Selector(선택자)란 스타일 속성을 적용하는 요소**들을 말합니다. 간단히 말해 웹사이트는 기본적으로 수 많은 태그로 이루어져있는데, 코드 위에 디자인을 입히기 위해 웹 페이지에 존재하는 요소 요소에 매겨준 특정한 값이라고 할 수 있습니다. 리스틀리의 도움말에서 CSS Selector에 대한 언급이 보일 때에는 **특정한 선택요소(예: 버튼, 입력란 등)가 갖는 코드값** 정도로 이해하셔도 됩니다.
{% endhint %}

***

## 사용방법 

### **A1. 셀렉터 값 가져오기**

{% stepper %}
{% step %}

### PARTS로 CSS 셀렉터 값 가져오기

리스틀리 PARTS를 활용하면 CSS Selector 값을 빠르고 간편하게 얻을 수 있습니다.

{% hint style="success" %}
**리스틀리 아이콘** 클릭 → **\[부분+]** 선택 → 원하는 요소 클릭
{% endhint %}

위 과정을 통해 사이드 패널에서 원하는 요소의 Selector 값을 바로 확인할 수 있습니다. CSS Selector (셀렉터) 칸의 **\[Copy 아이콘]**을 클릭하시면 손쉽게 해당 값을 복사할 수 있습니다.

<figure><img src="https://content.gitbook.com/content/iKxoYELFf9WS8XCvYe6S/blobs/DB1rljyPCIK5yHONTWog/image.png" alt=""><figcaption></figcaption></figure>

값을 복사한 후 Selector값이 필요한 설정란에 키보드 Ctrl+V로 붙여넣어 활용하시면 됩니다.

<figure><img src="https://content.gitbook.com/content/iKxoYELFf9WS8XCvYe6S/blobs/QljblOWlBYFYM3KzkZdD/image.png" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### 개발자 도구로 CSS 셀렉터 값 가져오기 (Legacy)

(1) 버튼 혹은 입력창 등의 요소 위에서 마우스 오른쪽 버튼을 클릭하고 **\[검사]**&#xB97C; 선택합니다.

<figure><img src="https://content.gitbook.com/content/iKxoYELFf9WS8XCvYe6S/blobs/Bkk733qfOEt6g1tcjwaV/image.png" alt=""><figcaption></figcaption></figure>

(2) 화면 우측 혹은 하단에 코드 창이 나타납니다. 방금 선택한 요소에 해당하는 코드는 회색으로 표시되며, 코드 위에 마우스를 올리면 화면에서 해당 영역이 색으로 강조되어 표시됩니다.

<figure><img src="https://content.gitbook.com/content/iKxoYELFf9WS8XCvYe6S/blobs/I6VlMVkSXHljwplwqHc9/image.png" alt=""><figcaption></figcaption></figure>

(3) 회색으로 강조 표시된 코드 위에서 마우스 오른쪽버튼을 클릭하여 Copy -> Copy selector를 선택하시면 해당 selector의 값이 복사됩니다.

<figure><img src="https://content.gitbook.com/content/iKxoYELFf9WS8XCvYe6S/blobs/TQy7KEHKFO3KeUqLmBPu/image.png" alt=""><figcaption></figcaption></figure>

(4) 설정창으로 이동하여 셀렉터 값을 입력해야 하는 위치에서 키보드 Ctrl+V 혹은 마우스 우클릭 후 ‘붙여넣기’를 선택하여 방금 복사된 값을 붙여넣기 한 후 저장합니다.&#x20;

<figure><img src="https://content.gitbook.com/content/iKxoYELFf9WS8XCvYe6S/blobs/cAEcGNze5JBgtdg94CNJ/image.png" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

### **A2. Selector를 입력했는데 정상적으로 작동하지 않는 경우**

대부분의 웹사이트에서는 1번 단계에서 가져온 Selector 값을 입력한 경우 정상 작동합니다.
&#x20;그러나 Selector 값을 입력했는 데도 원하는 결과가 나오지 않는다면, 아래의 방법을 확인해 보세요.

{% stepper %}
{% step %}

### 디자인 변경 프로그램의 간섭

* <mark style="background-color:$success;">**문제**</mark> : 마우스 커서 디자인, 브라우저 테마 변경, 디자인 보정용 확장 프로그램 등으로 인해 **불필요한 CSS 코드가 함께 복사되었을 수 있습니다**. CSS는 웹 페이지의 디자인에 관여하는 코드이기 때문에 만약 관련된 프로그램이 실행중이라면 설정을 끄고 다시 Selector 값을 복사해 보세요.
  {% endstep %}

{% step %}

### 상위/인접 태그에 필요한 정보가 포함된 경우

* <mark style="background-color:$success;">**문제**</mark> : 처음 선택한 요소가 아닌 상위 태그(부모 요소)에 주요 정보가 포함되어 있을 수 있습니다.
* <mark style="background-color:$success;">**해결 방법-1 (Parts 사용 시)**</mark> : 처음 선택한 요소에서 **위쪽 화살표(↑)**&#xB97C; 클릭하여, 선택 영역을 조정하세요. **버튼 영역을 벗어나지 않는 가장 큰 박스**까지 확장하여 해당 값을 활용해주세요.

<figure><img src="https://content.gitbook.com/content/iKxoYELFf9WS8XCvYe6S/blobs/kFDUuL4RZzaZ2CS4S9KE/Parts-%E1%84%89%E1%85%A6%E1%86%AF%E1%84%85%E1%85%A6%E1%86%A8%E1%84%90%E1%85%A5%E1%84%80%E1%85%A1%E1%86%B9.gif" alt=""><figcaption></figcaption></figure>

* <mark style="background-color:$success;">**해결 방법-2(개발자 도구 사용 시)**</mark> : 개발자 도구에서 코드 위에 마우스를 올리면 해당 요소 영역이 강조 표시됩니다. 이때 역시 **버튼 영역을 넘지 않는 가장 큰 박스**를 선택해 CSS Selector 값을 복사하세요.

<figure><img src="https://content.gitbook.com/content/iKxoYELFf9WS8XCvYe6S/blobs/1Tq8mpQmWHUpu61hy0gc/%E1%84%80%E1%85%A2%E1%84%87%E1%85%A1%E1%86%AF%E1%84%8C%E1%85%A1%E1%84%83%E1%85%A9%E1%84%80%E1%85%AE-%E1%84%89%E1%85%A6%E1%86%AF%E1%84%85%E1%85%A6%E1%86%A8%E1%84%90%E1%85%A5%E1%84%80%E1%85%A1%E1%86%B9.gif" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}