인프런 커뮤니티 질문&답변
작성한 질문수
자식 선택자, 하위 선택자 질문
작성
·
88
1
<header>
<div class="header-logo"></div>
<div class="navi"></div>
</header>
header 밑에 있는 div에 공통적으로 들어가는 속성이 있는 경우, 자식 선택자 혹은 하위 선택자를 통해 접근할 수 있는데
① header div {}
② header > div{}
강사님은 ①번을 사용하시는 이유가 있으신가요?
②번이 header 태그의 직계 자식 요소 중 div 태그를 선택한다고 직관적으로 알 수 있다고 보는데... 혹시 제가 모르는 이유가 있는지 궁금합니다. 참고로 유투브에서 다른 강의들도 강사님처럼 ①번을 사용합니다
답변 1
0
header div 밑에 div가 또 없으면 header div 이렇게 사용하시고, 만약에 header div 밑에 div가 또 있으면 header > div 이렇게 사용하셔야 합니다.
"header div 밑에 div가 또 없으면 header div 이렇게 사용하시고, 만약에 header div 밑에 div가 또 있으면 header > div 이렇게 사용하셔야 합니다." 이게 실무에서 표준처럼 사용되는 방식인가요?... 제가 진짜 몰라서 묻는 겁니다ㅠ
<header>
<div class="header-logo">
<div class="xx">
</div>
<div class="navi"></div>
</header>
자식 선택자(>)를 선택하면 위와 같이 xx div가 추가되더라도 CSS 코드 수정할 필요가 없는데
자손 선택자(공백)를 선택했다면 CSS 선택자를 자손에서 자식(>)으로 다시 변경해야 되지 않나요? 이런 이유 때문에 header div 밑에 div가 또 없으면 header > div를 선택하는 게 맞는 거 같은데 선생님 생각은 어떻신가요?
header div 밑에 div가 또 없으면 header > div를 선택하는 게 맞는 거 같은데 선생님 생각은 어떻신가요? 라고 쓰셨는데 아닙니다. 그냥 header div 이렇게 하시면 됩니다.
header > div는 header 밑에 div 밑에 div가 있을 경우 선택자를 명시하기 위한 방법입니다.
그리고 지금 내용은 실무에서나 시험에서나 크게 중요한 부분은 아닙니다.
제가 맞게 이해했는지 확인 부탁드립니다.
<div class="box"> <!-- 0단계 -->
<div> <!-- 1단계 -->
<div> <!-- 2단계 -->
<div> <!-- 3단계 -->
<div></div> <!-- 4단계 -->
</div>
</div>
</div>
</div>
만약 4단계 div를 선택한다면 .box > div > div > div div 이런 식으로 작성하는 게 맞죠?
header div 밑에 div가 또 없는 경우에 header div가 아닌 header > div로 하면 감점인가요? 자식 선택자 > 를 사용하는 게 좀 더 직관적인 것 같은데 왜 자손 선택자(공백)를 사용하는지 이해가 되지 않습니다..