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 : 요소 안에 공백을 어떻게 처리할지 지정
다 함께 배우고 성장하는 부스트코스
부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다.
www.boostcourse.org
'Python_WEB > HTML' 카테고리의 다른 글
| [부스트코스]미디어쿼리 퀴즈 (0) | 2021.01.15 |
|---|---|
| [부스트코스]레이아웃 퀴즈 (0) | 2021.01.14 |
| [부스트코스]단위, 배경, 박스모델 퀴즈 (0) | 2021.01.12 |
| [부스트코스]CSS 이해하기 퀴즈 (0) | 2021.01.12 |
| [부스트코스]콘텐츠모델, 시멘틱마크업, 블록 퀴즈 (0) | 2021.01.12 |
