[부스트코스]레이아웃 퀴즈

Q>

1. 다음 중 inline level 요소처럼 배치되지만 block level 요소의 성격을 띄고 있는 display 유형을 고르세요.

 

• none
• inline-block
• block
• block-inline

2. 다음 중 요소가 화면에서 영역을 차지하지만 보이지 않게 처리하는 스타일 규칙으로 올바른 것을 고르시오.

 

• visibility: none;
• display: none;
• display: hidden;
• visibility: hidden;

3. 다음 중 float에 대한 설명으로 틀린 것을 고르시오.

 

• 요소를 보통의 흐름에서 벗어나게 한다.
• float을 선언하려면 display 속성의 값을 block으로 변경해줘야 한다.
• 주변 요소들이 floating 된 요소에 영향을 받는다.
• 속성 값으로 left, right, none이 있다.

4. floating 요소의 영향에서 벗어나게 하는 선언으로 틀린 것을 고르시오.

 

• clear: both
• clear: none
• clear: right
• clear: left

5. 다음 position 속성의 값 중 뷰포트를 기준으로 offset 이동하는 것을 고르시오.

 

• absolute
• fixed
• static
• relative

6. 아래 코드를 보고 쌓임 순서에서 가장 위에 올라오는 요소가 어떤 것일지 고르시오.

<style>
div { width: 100px; height: 100px; color: white; }
.red, .blue { position: absolute; }
.green { position: relative; }
.red { z-index:5; }
.blue { z-index:6; }
.green { z-index:7; }
.orange { z-index:8; }
</style>

<div class="red" style="background: red;">RED</div>
<div class="blue" style="background: blue; margin-top: 30px; margin-left: 30px;">BLUE</div>
<div class="green" style="background: green; margin-top: 60px; margin-left: 60px;">GREEN</div>
<div class="orange" style="background: orange; margin-left: 90px;">ORANGE</div>                  

• RED
• GREEN
• ORANGE
• BLUE

A>

1. inline-block

 

2. visibility: hidden;

 

3. float을 선언하려면 display 속성의 값을 block으로 변경해줘야 한다.

 

4. clear: none

 

5. fixed

 

6. GREEN

 

https://www.boostcourse.org/cs120/

비전공자를 위한 HTML/CSS