Auto click, Login(beta)설정, 탬플릿 등의 기능을 사용하기 위해서는 클릭할 요소를 특정해주는 Selector 값을 입력해야하는 단계가 포함되어 있습니다.

이 도움말은 Selector란 무엇인지, 어떻게 선택하고 어떻게 값을 복사해오는지에 대한 내용을 담고 있습니다.

<aside> 💡 ※ CSS Selector란? CSS Seletor(선택자)란 스타일 속성을 적용하는 요소들을 말합니다. 쉽게 말하자면 우리가 보고있는 웹사이트는 수많은 태그로 이루어져있는데, 코드 위에 디자인을 입히기 위하여 웹페이지에 존재하는 요소 요소에 매겨준 특정한 값이라고 할 수 있습니다.

리스틀리의 도움말에서 CSS Selector에 대한 언급이 보일 때에는 특정한 선택요소(e.g. 버튼, 입력란 등)가 갖는 코드값 정도로 이해하셔도 문제 없습니다.

이 정보를 입력하는 방법은 아래 설명에서 계속됩니다.

</aside>

1. CSS selector 복사, 붙여넣는 법(Basic)

• 마우스로 클릭해야 하는(혹은 특정 정보를 입력해야 하는) 요소 위에서 마우스 오른쪽 버튼을 클릭하고 검사(Inspect)를 선택합니다.

• 그러면 화면 우측 혹은 하단에 코드가 가득 적혀있는 창이 나타납니다. 방금 선택했던 칸에 해당 하는 코드는 회색으로 표시가 되어있고 그 위에 마우스를 올려보시면 해당하는 위치가 색으로 강조되는 것을 확인 할 수 있습니다.

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

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