크롬 개발자 도구 사용 방법
크롬 브라우저의 개발자 도구를 이용해 CSS 선택자를 테스트 해볼 수 있습니다.
크롬 개발자 도구 실행
크롬 우측의 아이콘을 클릭하여 "도구 더보기" - "개발자 도구" 를 클릭하여 실행할 수 있습니다.
단축키는 Ctrl + Shift + I 입니다.
웹사이트의 CSS 선택자를 확인하는 방법
게시글 목록에서 "제목" a 태그(링크) 를 확인하기
CSS 선택자를 확인하기 위한 요소를 마우스 우클릭 하여 "검사"를 클릭 합니다.
게시글 제목에 해당하는 CSS 선택자를 확인 할 수 있습니다.
만약 .bsubject 선택자 이름을 사용하는 것이 제목 링크만이 아니라 다른 요소에도 사용되는 경우는 해당 선택자로 제목만이 아니라 다른 요소까지 함께 선택되어 버립니다.
때문에 필요한 경우에는 상위 요소 CSS 선택자를 포함하여 좀 더 세밀하게 요소를 특정 해볼 수 있습니다.
CSS 선택자를 테스트 하는 방법
개발자 도구의 "콘솔" 탭으로 이동합니다.
$$('선택자') 형태로 입력해 테스트로 선택해볼 수 있습니다.
아래의 예시에서는 총 37개의 객체가 선택 되었습니다.
Last updated
