Skip to Content
독학사독학사 2단계웹프로그래밍13. CSS 개념 확인 문제

재구성 출제 고지: 이 문제집은 국가평생교육진흥원 독학학위제 2단계 웹 프로그래밍 출제기준(CSS 선택자·박스 모델·레이아웃·우선순위 영역)의 평가 범위와 문항 유형을 분석해 새로 구성한 재구성 문항입니다. 실제 기출 문항을 그대로 옮긴 것이 아닙니다. 회차별 정확한 문항 수·시험 시간은 시행처 공고를 확인해야 하며, 여기서는 20문항을 표준 분량으로 구성했습니다.

출제 범위와 문항 배분

영역문항 수문항 번호관련 편
선택자 적용 결과61–606
우선순위 비교57–1106
박스 모델 계산512–1607
display·position 판별417–2007

계산형 문항은 값을 대입하기 전에 먼저 어떤 공식이 적용되는지 말로 정리한 뒤 숫자를 넣어보세요. 우선순위 문항은 반드시 각 선택자의 점수(개수)를 자리별로 세어 비교해야 실수를 줄일 수 있습니다.

선택자 적용 결과 (1–6)

문제 1

<p class="notice">안내</p>
<p>일반 문단</p>
.notice {
  color: red;
}
문제 14지선다
위 코드를 적용했을 때 빨간색으로 표시되는 문단은 몇 개인가?

문제 2

<div id="header">머리말</div>
<div id="footer">꼬리말</div>
#header {
  font-weight: bold;
}
문제 24지선다
위 코드에서 굵게 표시되는 요소는 무엇인가?

문제 3

<ul>
  <li>사과</li>
  <li>바나나</li>
</ul>
ul li {
  list-style: none;
}
문제 34지선다
위 코드에서 사용한 선택자의 의미로 옳은 것은?

문제 4

<div>
  <p>첫 문단</p>
  <p>둘째 문단</p>
</div>
div > p {
  margin: 0;
}
문제 44지선다
위 코드에서 사용한 자식 결합자(부등호 기호)의 의미로 옳은 것은?

문제 5

<input type="text" />
<input type="checkbox" />
input[type='checkbox'] {
  width: 20px;
}
문제 54지선다
위 코드에서 속성 선택자가 너비를 적용하는 대상으로 옳은 것은?

문제 6

<h2>제목</h2>
<h2>다른 제목</h2>
h2::first-line {
  font-weight: bold;
}
문제 64지선다
위 코드에서 콜론 두 개로 시작하는 부분의 역할로 옳은 것은?

우선순위 비교 (7–11)

문제 7

<p class="text" style="color: blue;">문단</p>
.text {
  color: red;
}
문제 74지선다
위 코드에서 실제로 적용되는 글자 색은 무엇인가?

문제 8

p {
  color: green;
}
.text {
  color: red;
}
#main {
  color: blue;
}
문제 84지선다
id가 main이고 클래스가 text인 p 요소에 위 세 규칙이 모두 걸릴 때 최종 색상은?

문제 9

div p {
  color: purple;
}
p.highlight {
  color: orange;
}
문제 94지선다
div 안에 있고 highlight 클래스를 가진 p 요소에 위 두 규칙이 모두 걸릴 때 최종 색상은?

문제 10

p {
  color: black;
}
p {
  color: gray;
}
문제 104지선다
완전히 동일한 선택자를 가진 두 규칙이 이 순서로 작성되어 있을 때 최종 색상은?

문제 11

p {
  color: navy !important;
}
#title {
  color: red;
}
문제 114지선다
id가 title인 p 요소에 위 두 규칙이 모두 걸릴 때 최종 색상은?

박스 모델 계산 (12–16)

문제 12

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box;
}
문제 124지선다
위 코드가 적용된 요소가 화면에서 차지하는 실제 가로 폭은?

문제 13

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}
문제 134지선다
문제 12와 같은 padding·border 값에서 box-sizing만 border-box로 바꾸면 실제 가로 폭은?

문제 14

.box {
  width: 100px;
  margin: 20px;
}
문제 144지선다
위 요소와 그 옆에 나란히 있는 다른 요소 사이의 관계에서, margin이 하는 역할로 가장 적절한 것은?

문제 15

.box {
  width: 100px;
  height: 50px;
  margin: 10px auto;
}
문제 154지선다
블록 요소에 위와 같이 좌우 margin을 auto로 지정하면 일반적으로 나타나는 효과는?

문제 16

.a {
  margin-bottom: 30px;
}
.b {
  margin-top: 20px;
}
문제 164지선다
클래스 a를 가진 블록 요소 바로 아래에 클래스 b를 가진 블록 요소가 이어질 때, 두 요소 사이의 실제 간격으로 가장 적절한 것은?

display·position 판별 (17–20)

문제 17

span {
  display: block;
}
문제 174지선다
원래 인라인 요소인 span에 display를 block으로 바꾸면 나타나는 변화로 가장 적절한 것은?

문제 18

.hidden {
  display: none;
}
문제 184지선다
display를 none으로 지정한 요소에 대한 설명으로 옳은 것은?

문제 19

.box {
  position: relative;
  top: 10px;
  left: 20px;
}
문제 194지선다
position을 relative로 지정하고 top·left 값을 준 요소의 이동 기준으로 옳은 것은?

문제 20

.box {
  position: absolute;
  top: 0;
  right: 0;
}
문제 204지선다
이 요소를 감싸는 조상 요소들 중 어느 것도 position 값을 static이 아닌 값으로 지정하지 않았을 때, 이 요소의 위치 기준이 되는 것은?

참고 자료

Last updated on
12. HTML 개념 확인 문제14. JavaScript 출력 예측 문제