inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

2. 가로 고정형 레이아웃(A1~A4) - 보더를 사용해서 HTML+CSS 구조만들기

자식 선택자, 하위 선택자 질문

100

chobo

작성한 질문수 28

1

<header>

<div class="header-logo"></div>

<div class="navi"></div>

</header>

header 밑에 있는 div에 공통적으로 들어가는 속성이 있는 경우, 자식 선택자 혹은 하위 선택자를 통해 접근할 수 있는데

① header div {}

② header > div{}

강사님은 ①번을 사용하시는 이유가 있으신가요?

②번이 header 태그의 직계 자식 요소div 태그를 선택한다고 직관적으로 알 수 있다고 보는데... 혹시 제가 모르는 이유가 있는지 궁금합니다. 참고로 유투브에서 다른 강의들도 강사님처럼 ①번을 사용합니다

HTML/CSS jquery 웹-디자인

답변 1

0

코딩웍스(Coding Works)

header div 밑에 div가 또 없으면 header div 이렇게 사용하시고, 만약에 header div 밑에 div가 또 있으면 header > div 이렇게 사용하셔야 합니다.

0

chobo

header div 밑에 div가 또 없는 경우에 header div가 아닌 header > div로 하면 감점인가요? 자식 선택자 > 를 사용하는 게 좀 더 직관적인 것 같은데 왜 자손 선택자(공백)를 사용하는지 이해가 되지 않습니다..

0

코딩웍스(Coding Works)

선택자 사용방식은 제작자 성향이므로 감점과 관계없습니다.

0

chobo

"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

코딩웍스(Coding Works)

header div 밑에 div가 또 없으면 header > div를 선택하는 게 맞는 거 같은데 선생님 생각은 어떻신가요? 라고 쓰셨는데 아닙니다. 그냥 header div 이렇게 하시면 됩니다.

header > div는 header 밑에 div 밑에 div가 있을 경우 선택자를 명시하기 위한 방법입니다.

그리고 지금 내용은 실무에서나 시험에서나 크게 중요한 부분은 아닙니다.

0

chobo

이제 무슨 말씀인지 이해해습니다. 답변 감사드립니다!

0

chobo

제가 맞게 이해했는지 확인 부탁드립니다.

<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