퀴즈: 간단한 CSS 선택자

CSS에서 페이지 상의 모든 <p> 태그는 어떻게 선택할까요?

정답을 한 개 고르세요:

정답을 한 개 고르세요:

• p { }
• #p { }
• <p> { }
• .p { }
• 


CSS에서 이 이미지를 어떻게 id에 의해 선택할 수 있을까요?

<img id="mainpic" src="cat.png">

정답을 한 개 고르세요:

정답을 한 개 고르세요:

• .mainpic { }
• #mainpic { }
• img { }
• mainpic { }

힌트 #11 / 1

페이지 상의 특정한 id를 갖는 모든 요소를 선택하기 위해 CSS 선택자는 "#" 다음 id이어야 합니다. 이 경우 id는 "mainpic"입니다. 그러므로 다음이 맞습니다:

#mainpic { }

페이지 상의 모든 이미지을 선택한다면 다음이 맞지만 이 문제가 묻는 것이 아닙니다:

img { }

CSS에서 어떻게 class 이름이 "warning"인 문단만을 선택할까요?

<p class="warning">Don't do it.</p>
<p>Do it.</p>
<p class="warning">Nooo, don't do it.</p>

정답을 한 개 고르세요:

정답을 한 개 고르세요:

• warning { }
• #warning { }
• p { }
• .warning { }

힌트 #11 / 1

페이지 상의 특정한 클래스를 갖는 모든 요소를 선택하려면 CSS 요소는 "." 다음에 클래스 이름을 써야 합니다. 이 경우 클래스 이름은 "warning"입니다. 그러므로 다음이 맞습니다.

.warning { }

페이지 상의 모든 문단을 선택한다면 다음이 맞겠지만 이 문제가 묻는 것이 아닙니다:

p { }

다음 표는 왼쪽 열에서 선택자들을 보여주고 오른쪽 열에서는 HTML 태그를 보여줍니다. 선택자를 HTML 태그에 대응시켜 보세요.

선택자	HTML
.info { } #info { } #main { } .main { }	<h1 class="info">The Exciting Story</h1> <p id="info">It's a great story.</p> <h2 id="main">The Story</h2> <p class="main">Really, trust me, it's good.</p>

힌트 #11 / 2

선택자가 "#"으로 시작하면 "#" 다음에 있는 id를 가진 요소를 선택합니다. 이것은 다음이 일치한다는 것을 의미합니다:

선택자	HTML
#info { }	<p id="info">It's a great story.</p>
#main { }	<h2 id="main">The Story</h2>

선택자가 "."로 시작하면 "." 다음에 오는 class를 가진 요소를 선택합니다. 이것은 다음이 일치한다는 것을 의미합니다:

선택자	HTML
.info { }	<h1 class="info">The Exciting Story</p>
.main { }	<p class="main">Really, trust me, it's good.</p>