@b481 안녕하세요!
찾고 계신 것은 “CSS 셀렉터”(또는 줄여서 “셀렉터”)입니다. CSS 셀렉터는 스타일을 적용하려는 DOM 요소를 “찾기”(또는 당연히 선택하기) 위해 사용됩니다.
예를 들어, 지금 제가 타이핑하고 있는 곳에서 컴포저(composer) 내의 사용자 이름 셀렉터를 찾아보겠습니다(단순한 예시입니다).
우리는 마우스를 해당 요소(컴포저 내의 b481 사용자 이름) 위에 올리고 우클릭하면 "검사(Inspect)"라는 메뉴 항목이 포함된 메뉴가 팝업으로 나타납니다.
"검사"를 클릭하면 개발자 콘솔이 열립니다(현재 저는 macOS에서 Chrome을 사용 중입니다). 그리고 운이 좋으면 우리가 원하는 요소가 하이라이트됩니다.
콘솔에서 하이라이트된 요소 위에 우클릭하면 Copy–>Copy selector(셀렉터 복사) 메뉴 항목을 볼 수 있습니다.
이를 선택하고 셀렉터를 복사하면, 이 예시에서는 다음과 같은 결과를 얻습니다:
#ember433 > span > a
이것은 #ember433이 Ember에 의해 할당되기 때문에 아주 좋은 셀렉터는 아닙니다. 하지만 콘솔에서 마우스를 요소 위에 올리면 관심 있는 페이지와 콘솔 양쪽에서 요소가 하이라이트됩니다. 좋은 소식은 우리가 빠르게 그리고 쉽게 대략적인 범위에 도달했다는 것입니다.
그 다음 숨기고 싶은 요소를 찾을 수 있으며, 이 예시에서는 마우스 메뉴에서 "add attribute(속성 추가)"를 선택하여 셀렉터를 테스트할 수 있습니다.
저는 이 캡처에서 예시로 이것을 방금 수행했습니다:
그리고 이제 'b481’이라는 ID를 가진 그 요소는 DOM의 그 부분에서 숨겨진 상태입니다…
즉, 이 경우 다음 CSS를 사용하면:
span.action-title{
display:none;
}
이를 테마에 추가하면 그 요소를 숨길 수 있습니다.
이 경우, 페이지에 동일한 셀렉터를 가진 요소가 하나 이상 있는지 확인해야 하며, 선택한 셀렉터가 탐욕스럽게 되어 숨기고 싶지 않은 다른 페이지의 요소까지 선택하지 않도록 확인해야 합니다.
셀렉터가 더 구체적일수록 좋습니다.
예를 들어, 이 경우 셀렉터가 부모 요소의 자식임을 지정하여 더 구체적으로 만들 수 있습니다(이 경우, 테스트되지 않음):
div.compose-action-title > span.action-title{
display:none;
}
더 구체적으로 되고 있음을 볼 수 있습니다. 그리고 이 시점에서 수정하려는 요소를 찾는 방법에 대해 꽤 좋은 아이디어를 가지고 있어야 합니다.
즐거운 사냥 되세요!
마지막으로 한 가지 참고할 점:
JavaScript와 jQuery를 사용하여 요소를 선택할 수 있지만, Discourse/Ember와 같은 SPA 앱에서는 CSS 셀렉터가 잘 작동한다는 것을 발견했습니다(적어도 제 경우엔요). 저는 DOM을 어떤 “난감한” 방식으로 순회해야 할 때에만 JavaScript 셀렉터를 사용하는 경향이 있습니다(이것 또한 매우 재미있을 수 있습니다).
도움이 되기를 바랍니다.
참고:
