CSS 셀렉터
CSS 셀렉터란?
자동클릭, 자동로그인, 페이지네이션 탬플릿 등의 기능을 사용하기 위해서는 클릭할 요소를 특정해주는 Selector 값이 필요합니다. 이 도움말에서는 해당 Selector 값을 가져오는 방법을 안내합니다.
CSS Selector(선택자)란 스타일 속성을 적용하는 요소들을 말합니다. 간단히 말해 웹사이트는 기본적으로 수 많은 태그로 이루어져있는데, 코드 위에 디자인을 입히기 위해 웹 페이지에 존재하는 요소 요소에 매겨준 특정한 값이라고 할 수 있습니다. 리스틀리의 도움말에서 CSS Selector에 대한 언급이 보일 때에는 특정한 선택요소(예: 버튼, 입력란 등)가 갖는 코드값 정도로 이해하셔도 됩니다.
사용방법
A1. 셀렉터 값 가져오기
개발자 도구로 CSS 셀렉터 값 가져오기 (Legacy)
(1) 버튼 혹은 입력창 등의 요소 위에서 마우스 오른쪽 버튼을 클릭하고 [검사]를 선택합니다.
(2) 화면 우측 혹은 하단에 코드 창이 나타납니다. 방금 선택한 요소에 해당하는 코드는 회색으로 표시되며, 코드 위에 마우스를 올리면 화면에서 해당 영역이 색으로 강조되어 표시됩니다.
(3) 회색으로 강조 표시된 코드 위에서 마우스 오른쪽버튼을 클릭하여 Copy -> Copy selector를 선택하시면 해당 selector의 값이 복사됩니다.
(4) 설정창으로 이동하여 셀렉터 값을 입력해야 하는 위치에서 키보드 Ctrl+V 혹은 마우스 우클릭 후 ‘붙여넣기’를 선택하여 방금 복사된 값을 붙여넣기 한 후 저장합니다.
A2. Selector를 입력했는데 정상적으로 작동하지 않는 경우
대부분의 웹사이트에서는 1번 단계에서 가져온 Selector 값을 입력한 경우 정상 작동합니다. 그러나 Selector 값을 입력했는 데도 원하는 결과가 나오지 않는다면, 아래의 방법을 확인해 보세요.
상위/인접 태그에 필요한 정보가 포함된 경우
문제 : 처음 선택한 요소가 아닌 상위 태그(부모 요소)에 주요 정보가 포함되어 있을 수 있습니다.
해결 방법-1 (Parts 사용 시) : 처음 선택한 요소에서 위쪽 화살표(↑)를 클릭하여, 선택 영역을 조정하세요. 버튼 영역을 벗어나지 않는 가장 큰 박스까지 확장하여 해당 값을 활용해주세요.
해결 방법-2(개발자 도구 사용 시) : 개발자 도구에서 코드 위에 마우스를 올리면 해당 요소 영역이 강조 표시됩니다. 이때 역시 버튼 영역을 넘지 않는 가장 큰 박스를 선택해 CSS Selector 값을 복사하세요.
Last updated