[CSS] 문서 구조 선택자

웹 UI 개발 코칭스터디 1기/미니 프로젝트

개념강의 |  4. CSS 이해하기 - 6) 문서 구조 관련 선택자

 

DOM의 요소들은 다양한 방법으로 셀렉트할 수 있습니다.

자바스크립트의 document.querySelector() 메서드도 이러한 방법 중 하나입니다.

가령 아래와 같은 구조를 갖는 HTML에서 document.querySelector("#box") 코드를 작성한다면 id가 box인 태그를 셀렉트할 수 있습니다.

<div id="box">
    <span>boostcourse</span>
</div>

위의 구조를 갖는 HTML에서 <span>boostcourse</span>을 셀렉트하기 위해, 어떻게 코드를 작성할 수 있을까요?

빈 칸에 들어갈 수 있는 알맞은 코드를 작성해주세요.

 

document.querySelector("#box span ")

---

5번) 정답

선택자 강의를 통해 문제를 해결할 수 있습니다.

정답 유추엔 '자식 선택자'와 '자손 선택자'를 생각해볼 수 있습니다.

자식 선택자의 경우,  선택자 사이에 닫는 꺽쇠 기호(>)를 넣습니다. 꺽쇠 기호와 선택자 기호 사이에는 공백은 있거나 없어도 상관이 없습니다. 그렇기에 document.querySelector("#box > span")가 답으로 제시될 수 있습니다.

 

자손 선택자의 경우, 선택자 사이에 아무 기호없이 그냥 공백으로 구분을 합니다. 그렇기에 document.querySelector("#box span")이 답으로 제시될 수 있습니다.

 

'자식 선택자'와 '자손 선택자'는 상황에 맞게 '유지보수'와 '확장성'을 고려해 사용하는 것을 권장합니다.