코딩하는 김딸기

HTML/CSS 객관식 문제 15문항 본문

카테고리 없음

HTML/CSS 객관식 문제 15문항

김딸기* 2024. 8. 27. 09:21

1. 초기값(initial value)의 설명으로 맞는것은?

1.초기값은 웹브라우저가 기본으로 제공하는 사용자 에이전트 스타일시트를 의미한다.
2.모든 속성의 초기값은 auto이며 맥락에 따라 다르게 계산 되어진다.
3.초기값은 사용자 에이전트 스타일시트를 초기화한 결과값을 의미한다.
4.초기값은 속성마다 고유하며 CSS 명세가 변경되지 않는 한 일정하게 유지된다.
5.(보기없음)
 
 

4. flex-basis 속성의 초기값(initial value)이다.

flex-basis: auto의 설명으로 가장 올바른 것은 다음과 같습니다:

  • 4. flex-basis 속성의 초기값(initial value)이다.

설명:

  • flex-basis: auto는 flex-basis 속성의 초기값입니다. 이 경우, flex 아이템의 기본 크기는 컨텐츠의 크기와 부모 컨테이너의 flex 컨텍스트에 따라 결정됩니다. auto는 flex 아이템의 크기를 컨텐츠에 맞추되, flex 컨테이너의 레이아웃 규칙을 따릅니다.
  • flex-basis: auto는 내부 콘텐츠의 크기를 무시하지 않으며, 특정 고정값(예: px, %)만 사용할 수 있는 것이 아니라, 유연하게 콘텐츠 크기를 기반으로 계산됩니다.
  • flex-basis 속성의 기본값은 auto입니다.

나머지 설명:

  • 1. flex-basis: auto는 콘텐츠의 크기를 무시하지 않습니다. 콘텐츠 크기를 고려하여 기본 크기를 결정합니다.
  • 2. flex-basis: auto는 항상 0으로 계산되지 않습니다. auto는 콘텐츠 기반의 크기를 설정합니다.
  • 3. flex-basis 속성은 고정 px값이나 %값뿐만 아니라 auto 값도 사용할 수 있습니다.
 
 
 
 

2. line-height 속성의 초기값(initial value)은?

1.normal
2.1.6
3.140%
4.auto
5.(보기없음)
 
 

1. normal

line-height 속성의 초기값은 normal입니다.

설명:

  • **line-height: normal**은 기본 줄 높이 값을 설정하며, 이는 브라우저의 기본 스타일에 따라 결정됩니다. 일반적으로 이 값은 텍스트의 폰트 크기와 관련된 적절한 줄 높이를 설정합니다.
  • line-height 속성에 대한 다른 값들(예: 1.6, 140%, auto)은 특정 줄 높이를 설정할 때 사용될 수 있지만, 초기값은 normal입니다.

3. 다음중 상속이 지원되지 않는 속성은?

1.color
2.line-height
3.vertical-align
4.font-weight
5.(보기없음)
 
 

3. vertical-align

vertical-align 속성은 상속되지 않는 속성입니다.

상세 설명:

  • color: 상속되는 속성입니다. 부모 요소의 color 값이 자식 요소에도 적용됩니다.
  • line-height: 상속되는 속성입니다. 부모 요소의 line-height 값이 자식 요소에도 적용됩니다.
  • vertical-align: 상속되지 않는 속성입니다. 이 속성은 인라인 요소나 테이블 셀에서 요소의 수직 정렬을 제어하며, 기본적으로 상속되지 않습니다.
  • font-weight: 상속되는 속성입니다. 부모 요소의 font-weight 값이 자식 요소에도 적용됩니다.
 

4. background-image 속성의 값으로 설정 되이있는 unset에 대한 설명으로 옳은 것은?

 

css
background-image: unset;
1.background-image 속성에는 unset 키워드를 사용 할 수 없다.
2.해당 속성의 값을 상속값(inherit)으로 만들어 준다.
3.해당 속성의 값을 초기값(initial)으로 만들어 준다.
4.unset 키워드는 항상 0으로 계산 되어진다.
5.(보기없음)
 
 
 
 

3. 해당 속성의 값을 초기값(initial)으로 만들어 준다.

background-image 속성은 상속되지 않는 속성이므로 unset 키워드를 사용하면 이 속성은 초기값인 none으로 설정됩니다. 따라서 background-image: unset;은 해당 속성을 초기값으로 만들어 줍니다.

 

5. 다음 유효하지 않는 속성과 값 형식인 것은?

1.width: calc( 100%-20px )
2.color: rgb( 0 0 0 / .2 )
3.background-color: rgba( 0, 0, 255, 0.2 )
4.margin: 0px 0px 20px 0px
5.(보기없음)
 
 

1. width: calc( 100%-20px )

이 형식은 유효하지 않습니다.

이유:

calc() 함수 안에서 연산자를 사용할 때는 연산자와 피연산자 사이에 공백이 필요합니다. 따라서 올바른 형식은 calc(100% - 20px)이어야 합니다.

나머지 옵션들은 모두 유효한 CSS 형식입니다:

  • 2. color: rgb(0 0 0 / .2): 유효한 rgb 색상 표기법입니다.
  • 3. background-color: rgba(0, 0, 255, 0.2): 유효한 rgba 색상 표기법입니다.
  • 4. margin: 0px 0px 20px 0px: 유효한 margin 속성 형식입니다.

6. 다음 가상 클래스의 이름과 그에 따른 설명으로 틀린 것은?

1.:nth-child(1) => 형제 요소중, 2번째 요소를 선택
2.:focus-within => 하위 요소중, 포커스 상태인 요소가 있을 때
3.:first-child => 형제 요소중, 맨 첫번째 요소를 선택
4.:last-child => 형제 요소중, 맨 마지막 요소를 선택
5.(보기없음)
 
 
 

1. :nth-child(1) => 형제 요소중, 2번째 요소를 선택

이 설명은 틀린 것입니다.

이유:

:nth-child(1)은 형제 요소 중 첫 번째 요소를 선택합니다. 따라서 이 가상 클래스는 2번째 요소가 아닌 1번째 요소를 선택하게 됩니다.

나머지 설명들은 모두 맞습니다:

  • 2. :focus-within => 하위 요소중, 포커스 상태인 요소가 있을 때: 부모 요소가 하위 요소 중 포커스된 요소를 포함할 때 적용됩니다.
  • 3. :first-child => 형제 요소중, 맨 첫번째 요소를 선택: 형제 요소 중 첫 번째 요소를 선택합니다.
  • 4. :last-child => 형제 요소중, 맨 마지막 요소를 선택: 형제 요소 중 마지막 요소를 선택합니다.

7. 셀렉터 특정성 점수가 가장 높은 셀렉터를 고르시오.

1.div p.wow a:hover *
2..wow > * + p
3..wrapper:nth-child(3) > a.is_active
4.#wow
5.(보기없음)

 

 

CSS 셀렉터의 특정성 점수를 계산할 때는 각 셀렉터의 부분에 대해 점수를 부여하고 총합을 계산합니다. 특정성 점수는 다음과 같이 계산됩니다:

  • 인라인 스타일: 1,000
  • ID 선택자: 100
  • 클래스, 속성, 가상 클래스 선택자: 10
  • 요소 및 가상 요소 선택자: 1

주어진 셀렉터들의 특정성 점수를 계산해 보겠습니다:

  1. div p.wow a:hover *
    • 요소 선택자: div (1), p (1), a (1), * (1)
    • 클래스 선택자: .wow (1), :hover (1)
    • 총합: 1 (div) + 1 (p) + 1 (a) + 1 (wildcard) + 1 (wow) + 1 (hover) = 6
  2. .wow > * + p
    • 요소 선택자: * (1), p (1)
    • 클래스 선택자: .wow (1)
    • 총합: 1 (wow) + 1 (wildcard) + 1 (p) = 3
  3. .wrapper:nth-child(3) > a.is_active
    • 요소 선택자: a (1)
    • 클래스 선택자: .wrapper (1), .is_active (1)
    • 가상 클래스 선택자: :nth-child(3) (1)
    • 총합: 1 (wrapper) + 1 (nth-child) + 1 (a) + 1 (is_active) = 4
  4. #wow
    • ID 선택자: #wow (1)
    • 총합: 100 (ID)

따라서, ID 선택자가 포함된 셀렉터가 가장 높은 특정성 점수를 가집니다.

정답: 4. #wow

 
 
 

8. 다음 셀렉터의 해석으로 올바른 것은?

css
.wow.wow2 + .comp {
	
}
1..wow 요소의 하위에 존재하는 .wow2인 요소 바로 다음에 나오는 형제 .comp 요소 선택
2..wow 요소이면서 동시에 .wow2인 요소 바로 다음에 나오는 형제 .comp 요소 선택
3..wow 요소이면서 동시에 .wow2인 요소와 .comp 요소 모두 선택
4.유효한 셀렉터 조합이 아니므로 오류 취급
5.(보기없음)
 

5. (보기없음)

셀렉터 .wow.wow2 + .comp의 올바른 해석은:

  • .wow와 .wow2 두 클래스를 모두 가진 요소가 바로 다음 형제 요소 중 comp 클래스를 가진 요소를 선택합니다.

따라서, 제공된 보기들 중에서는 올바른 설명이 없습니다.

 
 
 

 

9. 다음 셀렉터의 해석으로 올바른 것은?

css
div + * > p {
	
}
1.div 타입 요소 다음에 작성된 형제 요소의 직계 자식인 p 타입 요소 선택
2.div 타입 요소 또는, div 타입 요소의 직계 자식 요소인 p 타입 요소 선택
3.div 타입 요소 하위에 있는 모든 p 타입 요소 선택
4.유효한 셀렉터 조합이 아니므로 오류 취급
5.(보기없음)

 

 

 

1. div + * > p

이 CSS 셀렉터는 다음과 같은 의미를 가집니다:

  • div + *: div 요소 바로 다음에 오는 형제 요소를 선택합니다. 이 형제 요소는 어떤 요소 타입이든 될 수 있습니다.
  • > p: 이 형제 요소의 직계 자식 요소 중 p 요소를 선택합니다.

따라서, 이 셀렉터는 div 타입 요소 바로 다음에 작성된 형제 요소의 직계 자식인 p 타입 요소를 선택합니다.

 

 

10. 다음 셀렉터의 해석으로 올바른 것은?

css
.wow:has(p):has(a) {
	
}
1.p 타입 요소이면서 클래스명이 wow인 요소와 a타입 요소이면서 클래스명이 wow인 요소를 모두 선택
2.클래스명이 wow 이면서, 하위 요소에 p 타입 요소나 a 타입 요소를 가지고 있는 요소를 선택
3.클래스명이 wow 이면서, 하위 요소에 p 타입 요소와 a 타입 요소를 모두 가지고 있는 요소를 선택
4.유효한 셀렉터 조합이 아니므로 오류 취급
5.(보기없음)
 
 

3. 클래스명이 wow이면서, 하위 요소에 p 타입 요소와 a 타입 요소를 모두 가지고 있는 요소를 선택

이 셀렉터는 **wow:has(p):has(a)**로 다음과 같은 의미를 가집니다:

  • :has(p): 하위 요소에 p 타입 요소가 있는 요소를 선택합니다.
  • :has(a): 하위 요소에 a 타입 요소가 있는 요소를 선택합니다.

따라서 **.wow:has(p):has(a)**는 클래스명이 wow이면서 하위에 p 타입 요소와 a 타입 요소를 모두 가지고 있는 요소를 선택합니다.

이 셀렉터는 CSS4에서 도입된 :has() 가상 클래스가 사용된 예입니다. 이 가상 클래스는 하위 요소의 존재를 기준으로 요소를 선택할 수 있습니다.

11. flex-basis: auto의 설명으로 옳은 것은?

1.flex-basis: auto는 내부 콘텐츠의 크기를 무시 하는 속성 값이다.
2.flex-basis: auto는 항상 0으로 계산 되어진다.
3.flex-basis 속성은 고정 px값이나 %값만을 사용 할 수 있기 때문에 auto값을 사용 할 수 없다.
4.flex-basis 속성의 초기값(initial value)이다.
5.(보기없음)

 

 

 

4. flex-basis 속성의 초기값(initial value)이다.

설명:

  • **flex-basis: auto**는 flex-basis 속성의 초기값입니다. 이 값은 아이템의 기본 크기를 계산할 때 콘텐츠의 크기 또는 width (또는 height depending on the flex-direction) 속성을 고려하여 설정합니다.
  • flex-basis: auto는 내부 콘텐츠의 크기를 무시하지 않으며, 기본적으로 콘텐츠의 크기를 기준으로 아이템의 크기를 결정합니다.
  • flex-basis 속성은 auto 외에도 고정값(px, em, %, 등)과 같은 다른 값들을 사용할 수 있습니다.

따라서, flex-basis: auto는 flex-basis 속성의 초기값입니다.

 

12. display: block이 적용된 button요소의 특성으로 올바른 것은?

 

html
<!DOCTYPE html>
<html>
	<head>
		<style>
		button {
			display: block;
		}	
		</style>
	</head>
	<body>
		<button>버튼 요소</button>
	</body>
</html>
1.button요소의 너비가 body의 콘텐츠 영역 만큼 확장된다.
2.button요소는 블록 레벨 요소가 될 수 없다. 즉, button요소에는 아무런 변화가 일어나지 않는다.
3.button요소는 블록 레벨 요소가 되었다. margin-left: auto를 이용한 오른쪽 배치가 가능해진다.
4.사용자 에이전트 스타일시트에 의해, display속성 변경은 불가능하다. 즉, button요소에는 아무런 변화가 일어나지 않는다.
5.(보기없음)
 
 
 

1. button 요소의 너비가 body의 콘텐츠 영역 만큼 확장된다.

설명:

  • **display: block**이 적용된 button 요소는 블록 레벨 요소가 되며, 이는 해당 요소가 가능한 전체 너비를 차지하도록 확장된다는 것을 의미합니다. 따라서 button 요소는 기본적으로 부모 요소의 콘텐츠 영역 너비만큼 확장됩니다. 이 경우, button 요소는 body의 콘텐츠 영역에 맞게 너비가 확장됩니다.

나머지 설명:

  • 2. button 요소는 기본적으로 인라인 요소지만, display: block으로 설정하면 블록 레벨 요소로 변경됩니다. 따라서 버튼에 변화가 있습니다.
  • 3. button 요소가 블록 레벨 요소가 되어도 margin-left: auto를 이용한 오른쪽 정렬은 적용되지 않습니다. 이 경우, margin: auto를 사용하여 수평 중앙 정렬이 가능할 수 있습니다.
  • 4. display 속성의 변경은 사용자 에이전트 스타일시트에 의해 제한되지 않습니다. display: block은 버튼 요소에 적용됩니다.

13. .flex-items에게 위과 같이 작성 하였다면 해당 .flex-items 요소의 너비는 어떻게 책정 됩니까?

html
<div class="flex-container">
	<div class="flex-items">Flex Items</div>
</div>

css
.flex-container {
	display: flex;
	flex-direction: row;
	width: 800px;
}
.flex-items {
	width: 300px;
	flex-basis: auto;
	min-width: 0;
}
1.0
2.300px
3.800px
4.내부 콘텐츠 너비 만큼
5.(보기없음)

 

 

2. 300px

설명:

  • .flex-container는 display: flex로 설정되어 있어, 내부의 .flex-items 요소는 플렉스 컨테이너의 아이템으로 처리됩니다.
  • .flex-items에 width: 300px이 설정되어 있기 때문에, 이 요소의 너비는 기본적으로 300px로 설정됩니다.
  • flex-basis: auto는 요소의 기본 크기를 콘텐츠 크기 또는 width 속성에 따라 결정합니다. 여기서는 width가 300px로 설정되어 있으므로, flex-basis의 값은 무시되고 300px이 적용됩니다.
  • min-width: 0은 요소의 최소 너비를 0으로 설정하지만, width: 300px이 우선하므로, 요소의 너비는 여전히 300px로 설정됩니다.

따라서 .flex-items 요소의 너비는 300px로 책정됩니다.

 
 
 

14. 새로운 스태킹 컨텍스트를 형성하는 속성과 값이 아닌 것은?

1.position: relative; z-index: 0;
2.opacity: 0.5;
3.display: block; transform: rotate(45deg);
4.display: inline-block;
5.(보기없음)
 
 

4. display: inline-block;

스태킹 컨텍스트를 형성하는 CSS 속성과 값은 다음과 같습니다:

  1. position: relative; z-index: 0; - position이 relative, absolute, 또는 fixed로 설정되고 z-index가 0 이상의 값을 가지면 새로운 스태킹 컨텍스트를 형성합니다.
  2. opacity: 0.5; - opacity 값이 1보다 작으면 새로운 스태킹 컨텍스트를 형성합니다.
  3. display: block; transform: rotate(45deg); - transform 속성이 2D 또는 3D 변환을 포함하면 새로운 스태킹 컨텍스트를 형성합니다.

**display: inline-block;**는 새로운 스태킹 컨텍스트를 형성하지 않습니다.

따라서, **4. display: inline-block;**가 새로운 스태킹 컨텍스트를 형성하는 속성과 값이 아닙니다.

 
 
 

15. 컨테이닝 블록에 대한 설명으로 틀린 것은?

1.컨테이닝 블록은 요소의 위치나 크기 지정의 기준이 되는 상위 영역을 의미한다.
2.특정 요소에 position: absolute를 부여하면 원하는 모든 요소를 특정 요소의 컨테이닝 블록으로 만들 수 있다.
3.margin-top 값을 %로 지정하면 해당 요소의 컨테이닝 블록 너비를 기준으로 백분율 계산 되어진다.
4.width: 100%는 해당 요소의 컨테이닝 블록 너비를 기준으로 백분율 계산 되어진다.
5.(보기없음)

 

 

 

3. margin-top 값을 %로 지정하면 해당 요소의 컨테이닝 블록 너비를 기준으로 백분율 계산 되어진다.

이 설명이 틀린 것입니다.

이유:

  • margin-top 값을 백분율로 지정할 때, 그 백분율은 컨테이닝 블록의 높이를 기준으로 계산됩니다. 따라서 margin-top이 컨테이닝 블록의 너비를 기준으로 계산된다는 설명은 잘못된 것입니다.

다른 설명들:

  1. 컨테이닝 블록은 요소의 위치나 크기 지정의 기준이 되는 상위 영역을 의미한다.
    • 맞는 설명입니다. 컨테이닝 블록은 해당 요소가 위치할 때 기준이 되는 상위 요소입니다.
  2. 특정 요소에 position: absolute를 부여하면 원하는 모든 요소를 특정 요소의 컨테이닝 블록으로 만들 수 있다.
    • 맞는 설명입니다. position: absolute가 적용된 요소는 최근의 position이 relative, absolute, fixed, 또는 sticky로 설정된 조상 요소를 컨테이닝 블록으로 삼습니다.
  3. width: 100%는 해당 요소의 컨테이닝 블록 너비를 기준으로 백분율 계산 되어진다.
    • 맞는 설명입니다. width: 100%는 컨테이닝 블록의 너비를 기준으로 합니다.