웹 UI 개발 코칭스터디 1기/미니 프로젝트
개념강의 | 4. CSS 이해하기 - 6) 문서 구조 관련 선택자
DOM의 요소들은 다양한 방법으로 셀렉트할 수 있습니다.
자바스크립트의 document.querySelector() 메서드도 이러한 방법 중 하나입니다.
가령 아래와 같은 구조를 갖는 HTML에서 document.querySelector("#box") 코드를 작성한다면 id가 box인 태그를 셀렉트할 수 있습니다.
<div id="box">
<span>boostcourse</span>
</div>
|
cs |
위의 구조를 갖는 HTML에서 <span>boostcourse</span>을 셀렉트하기 위해, 어떻게 코드를 작성할 수 있을까요?
빈 칸에 들어갈 수 있는 알맞은 코드를 작성해주세요.
document.querySelector("#box span ")
5번) 정답
선택자 강의를 통해 문제를 해결할 수 있습니다.
정답 유추엔 '자식 선택자'와 '자손 선택자'를 생각해볼 수 있습니다.
자식 선택자의 경우, 선택자 사이에 닫는 꺽쇠 기호(>)를 넣습니다. 꺽쇠 기호와 선택자 기호 사이에는 공백은 있거나 없어도 상관이 없습니다. 그렇기에 document.querySelector("#box > span")가 답으로 제시될 수 있습니다.
자손 선택자의 경우, 선택자 사이에 아무 기호없이 그냥 공백으로 구분을 합니다. 그렇기에 document.querySelector("#box span")이 답으로 제시될 수 있습니다.
'자식 선택자'와 '자손 선택자'는 상황에 맞게 '유지보수'와 '확장성'을 고려해 사용하는 것을 권장합니다.
'⌨️ > HTML, CSS' 카테고리의 다른 글
[CSS] 속성 - 텍스트 처리 (0) | 2021.01.13 |
---|---|
[CSS] 속성 - border (0) | 2021.01.13 |
[HTML] 시멘틱 요소 (0) | 2021.01.13 |
[HTML] 폼 form 요소 (0) | 2021.01.13 |
[HTML] 테이블 table 요소 (0) | 2021.01.13 |