[부스트코스]CSS 이해하기 퀴즈

Q>

1. 다음 중 CSS 규칙으로 바른 것을 고르세요.

 

• h1 ( font-size: 15px / color: red )
• h1 ( font-size: 15px, color: red )
• h1 { font-size: 15px; color: red }
• h1 { font-size = 15px; color = red }

2. 선택자에서 문서 내에 모든 요소를 선택할 수 있는 기호로 알맞은 것을 고르시오.

 

• $
• #
• @
• *

3. 다음 보기에서 class 선택자와 id 선택자의 설명으로 틀린 것을 고르시오.

 

• class 선택자의 기호는 . 이다
• id 속성의 값은 문서 내에 유일하게 사용된다.
• id 선택자의 기호는 # 이다
• id 속성의 값은 문서 내에 여러 번 사용될 수 있다.

4. class명에 "button"으로 끝나는 요소가 선택되도록 알맞게 조합된 코드를 고르시오.

 

• [class$="button"]
• [class~="button"]
• [class^="button"]
• [class*="button"]

5. 아래 선택자 조합에서 item2가 선택되지 않는 것을 고르시오.

<div class="wrap">
  <strong> title </strong>
  <p> description </p>
  <ul class="list">
    <li class="item i1"> item 1 </li>  
    <li class="item i2"> item 2 </li>  
    <li class="item i3"> item 3 </li>
  </ul>
</div>

• strong + .list .i2
• div > .list .i2
• .wrap .item.i2
• .wrap .list .i2

6. 마우스 커서가 올라가 있는 요소를 선택할 때 사용하는 가상 선택자로 올바른 것을 고르시오.

 

• :focus
• :active
• :hover
• :visit

7. 가상 요소에 내용을 넣기 위해 사용되는 속성 명으로 올바른 것을 고르시오.

 

• innertext
• content
• text
• context

8. 구체성이 가장 높은 셀렉터를 고르시오.

 

• .name > .first:hover
• .name > .first
• #name
• *

9. "box"의 폰트 색상으로 알맞은 것을 고르시오.

<style>
.wrap { color: orange !important; }
.wrap div { color: red; }
.box { color: green !important; }
.wrap .box { color: blue; }
</style>

<div class="wrap">
<div class="box">box</div>
</div>

 

• red
• orange
• blue
• green

10. "index 1"의 폰트 색상으로 알맞은 것을 고르시오.

<style>
.box { color: red !important; }
.index > .in_item { color: pink; }
div ul .in_item { color: orange; }
.in_item.in1 { color: black; }
p + ul.index { color: yellow; }
</style>

<div class="box" style="color: yellow">
  <h1 class="title">title</h1>
  <p class="desc">description</p>
  <ul class="index" style="color: blue;">  
    <li class="in_item in1">index 1</li>
    <li class="in_item ">index 2</li>
  </ul>
</div>

 

• orange
• pink
• black
• yellow
• blue

A>

1. h1 { font-size: 15px; color: red }

 

2. *

 

3. id 속성의 값은 문서 내에 여러 번 사용될 수 있다.

 

4. [class$="button"]

 

5. strong + .list .i2

 

6. :hover

 

7. content

 

8. #name

 

9. green

 

10. black

 

https://www.boostcourse.org/cs120

비전공자를 위한 HTML/CSS