[부스트코스]단위, 배경, 박스모델 퀴즈

Q>

1. 색상 값 선언으로 올바르지 못한 것을 고르시오.

 

• #a3c
• rgba(0, 10, 45, 2)
• #ff3300
• rgb(10, 255, 2)

2. background-color, background-repeat, background-attachment, background-position 속성의 기본값이 순서대로 나열된 것을 고르시오.

 

• white, no-repeat, auto, center
• white, repeat, scroll, 0% 0%
• transparent, repeat, scroll, 0% 0%
• transparent, no-repeat, auto, center

3. 주변의 다른 요소와의 간격의 변화를 주고 싶을 때 변경해야 하는 영역으로 알맞은 것을 고르시오

 

• padding 영역
• margin 영역
• border 영역
• content 영역

4. border가 노출되지 않는 코드를 고르시오.

 

• border: red solid;
• border: red double;
• border: 10px solid;
• border: 10px red;

5. 다음 중 패딩의 축약이 잘못 된 것을 고르시오.

 

• padding : 20px 20px 30px 20px → 20px 20px 30px
• padding : 30px 30px 30px 30px → 30px;
• padding : 10px 20px 30px 20px → 10px 20px 30px
• padding : 10px 10px 30px → 10px 30px

6. 아래 코드를 보고 <h1>과 <p> 사이의 간격으로 알맞은 것을 고르시오.

<style>
h1 { margin: 0 0 20px 0; }
div { margin-top: 40px; } 
p { margin-top: 30px ;}
</style>

<h1>Margin Collapse</h1>
<div><p>What do you think?</p></div>

 

• 40px
• 50px
• 60px
• 70px

7. margin과 padding의 특징으로 올바르지 못한 것을 고르시오.

 

• 양수 값을 사용할 수 있다.
• -left, -right의 % 값은 width 값에 상대적이다.
• -top, -bottom의 % 값은 height 값에 상대적이다.
• auto 속성은 margin만 적용된다.

8. inner의 전체 가로 길이로 알맞은 것을 고르시오.

<style>
.wrap { width: 500px; margin: 0 5px; padding: 10px; border: 15px solid red; }
.box { width: 60%; padding: 20px; border: 10px solid black; }
.inner { width: 30%; padding: 5px; background: pink; }
</style>

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

• 75px
• 85px
• 90px
• 100px

9. .child 요소의 전체 높이 값으로 알맞은 것을 고르시오.

<style>
 .parent { width: 300px; padding: 10px; border: 10px solid black; }
.child { height: 30%; padding: 15px; border: 5px solid black; }
</style>

<div class="parent">
	<div class="child"></div>
</div>

• 0
• 12px
• 40px
• 52px

A>

1. rgba(0, 10, 45, 2)

 

2. transparent, repeat, scroll, 0% 0%

 

3. margin 영역

 

4. border: 10px red;

 

5. padding : 10px 10px 30px → 10px 30px

 

6. 40px

 

7. -top, -bottom의 % 값은 height 값에 상대적이다.

 

8. 100px

 

9. 40px

 

https://www.boostcourse.org/cs120

비전공자를 위한 HTML/CSS