자식 선택자, 하위 선택자 질문
100
작성한 질문수 28
<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 이렇게 사용하셔야 합니다.
0
header div 밑에 div가 또 없는 경우에 header div가 아닌 header > div로 하면 감점인가요? 자식 선택자 > 를 사용하는 게 좀 더 직관적인 것 같은데 왜 자손 선택자(공백)를 사용하는지 이해가 되지 않습니다..
0
"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를 선택하는 게 맞는 거 같은데 선생님 생각은 어떻신가요?
0
header div 밑에 div가 또 없으면 header > div를 선택하는 게 맞는 거 같은데 선생님 생각은 어떻신가요? 라고 쓰셨는데 아닙니다. 그냥 header div 이렇게 하시면 됩니다.
header > div는 header 밑에 div 밑에 div가 있을 경우 선택자를 명시하기 위한 방법입니다.
그리고 지금 내용은 실무에서나 시험에서나 크게 중요한 부분은 아닙니다.
0
제가 맞게 이해했는지 확인 부탁드립니다.
<div class="box"> <!-- 0단계 -->
<div> <!-- 1단계 -->
<div> <!-- 2단계 -->
<div> <!-- 3단계 -->
<div></div> <!-- 4단계 -->
</div>
</div>
</div>
</div>
만약 4단계 div를 선택한다면 .box > div > div > div div 이런 식으로 작성하는 게 맞죠?
해당 강의 PDF는 어디에 있나요?
1
56
2
2026 웹디자인개발기능사 실기 보는데 필요한 텍스트에디터는 무엇인가요?
1
92
2
예제파일
1
55
1
섹션10-77번강의 내 와이어프레임 pdf 자료 다운로드 어디서 하나요?
1
81
2
보더를 사용해 와이어프레임만드는 강의 html+css소스 다운로드 받을 수 있나요?
1
58
1
시험 시 슬라이드 작성 관련 문의
0
64
1
강의 질문 있습니다
1
69
1
시험 관련 문의
1
61
1
파워포인트 자료 다운로드 버튼 어디에 있나요?
1
55
1
브라우저 화면 줄일 시 빈 공간 발생
0
65
1
서브메뉴가 유지되지 못하고 사라지는데 무엇이 문제 일까요?
1
78
1
슬라이드 및 완성본 관련 사항
1
69
2
D유형 레이아웃 연습중인데 슬라이드 이미지 크기가 변하지 않습니다
1
90
3
B-4연습중인데 네비게이션의 a태그 두께가 이상하고 슬라이드 다운시 문제가 있습니다.
1
50
2
A2 연습중인데 메뉴 배경색과 서브메뉴 크기, 갤러리 그림 정리에 문제가 있습니다
1
68
2
A1 레이아웃 연습중인데 overflow: hidden이나 box-sizing: border-box;가 적용되지 않는 것 같습니다
1
55
2
레이어 팝업 '닫기' 가 안됩니다
1
62
1
공지사항과 갤러리 탭(안)구성 중 마우스 클릭시 색상변경이 안됩니다.
1
84
2
뷰티파이 설치 관련 문의
1
71
3
웹디자인 기능사 웹디자인개발기능사로 개편 되었는데 이 수업만 들어도 가능?
1
86
2
A유형~C유형 수험자 제공파일 어디서
1
73
1
A1 작업하는데 와이어프레임이 무너지고, hover일부가 적용 안되고 메뉴바가 슬라이드를 밀어냅니다. 탭메뉴도 작동하지 않습니다..
0
122
4
footer 높이 값
1
47
2
div 상하분배?가 안돼요
0
72
2