본문 바로가기

Python_WEB/HTML

[부스트코스]폰트, 텍스트 퀴즈

728x90

Q>

1. 다음 font-family에 대한 설명으로 올바르지 못한 것을 고르시오.

 

  • family-name은 하나만 선언하여 사용할 수 있다.
  • generic-family를 마지막에 선언해야 한다.
  • 자식 요소에서 font-family 재선언 시 generic-family도 다시 선언해주어야 한다.
  • family-name 에 공백이 있으면 따옴표로 묶어서 선언한다.

2. 아래 코드를 보고 .child의 line-height 값으로 알맞은 것을 고르시오

<style>
.wrap { font-size: 20px; line-height: 2; }
.parent { font-size: 1.5em; line-height: 200%; }
.child { font-size: 15px; }
</style>

<div class="wrap">
  <div class="parent">
      <div class="child">line-height 값 계산</div>
  </div>
</div>

 

  • 30px
  • 40px
  • 50px
  • 60px

3. .section 요소의 font-size로 알맞은 것을 고르시오.

<style>
html { font-size: 16px; } 
.wrap { font-size: 1.5rem; } 
.section { font-size: 1.5em; }
</style>

<html>
... 중략 ...

<div class="wrap">       
  <div class="content">
  <div class="section"></div>
  <div class="article"></div>              
  <div class="footer"></div>       
</div>

</div>

... 중략 ...

</html>

 

  • 15px
  • 16px
  • 24px
  • 36px

4. normal, bold와 같은 굵기로 표현되는 숫자값의 순서로 알맞은 것을 고르시오

 

  • 400, 700
  • 100, 400
  • 300, 600
  • 400, 900

5. font 속성 사용지 반드시 선언해야 하는 필수 속성으로는 font-family, font-style이다.

 

  • O
  • X

6. font-face 안에서 사용되는 속성 명으로 알맞지 않은 것을 고르시오.

 

  • font-style
  • font-size
  • font-family
  • src

7. vertical-align 의 키워드와 설명이 알맞게 연결되지 않은 것을 고르시오.

 

  • middle - 부모의 중앙에 위치
  • sub - 부모의 아래 첨자 기준으로 정렬
  • text-top - 부모의 위 첨자 기준으로 정렬
  • bottom - 부모의 맨 아래 위치

8. 아래 코드를 보고 .box의 text-indent 값으로 알맞은 것을 고르시오.

<style>
.wrap { width: 200px; height: 100px; border: 5px solid red; } 
.box { width: 300px; text-indent: 10%; border: 10px solid black; }
</style>

<div class="wrap">
	<div class="box">Text-Indent ~ !</div>
</div> 
  • 20px
  • 21px
  • 30px
  • 32px

9. text-decoration의 기본 값으로 알맞은 것을 고르시오.

 

  • underline currentColor solid
  • none currentColor solid
  • none black solid
  • none black dashed

10. 단어 관련 속성 중 속성 명과 설명이 바르게 연결된 것을 고르시오.

 

  • white-space : 요소 안에 공백을 어떻게 처리할지 지정
  • word-spacing : 행간을 지정
  • word-break : 요소를 벗어난 단어의 줄 바꿈 지정
  • word-wrap : 단어가 라인 끝에 나올 경우 어떻게 처리할지 지정

A>

1. family-name은 하나만 선언하여 사용할 수 있다.

 

2. 60px

 

3. 36px

 

4. 400, 700

 

5. X

 

6. font-size

 

7. text-top - 부모의 위 첨자 기준으로 정렬

 

8. 20px

 

9. none currentColor solid

 

10. white-space : 요소 안에 공백을 어떻게 처리할지 지정

 

https://www.boostcourse.org/

 

다 함께 배우고 성장하는 부스트코스

부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다.

www.boostcourse.org

 

 

 

 

 

 

 

 

 

 

반응형