15 CSS 퀴즈 질문 및 답변

1. 질문: CSS는 무엇의 약자인가?
A. Creative Style Sheets
B. Cascading Style Sheets
C. Computer Style Sheets
D. Colorful Style Sheets
정답: B
설명: CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 레이아웃과 스타일을 정의하는 언어입니다.

2. 질문: CSS에서 요소를 ID로 선택하는 선택자 syntax는 무엇인가?
A. .class
B. #id
C. element
D. *
정답: B
설명: #id 선택자는 ID 속성 값을 사용하여 특정 요소를 선택하며, 유일한 요소를 대상으로 합니다.

3. 질문: CSS에서 class와 ID의 주요 차이점은 무엇인가?
A. class는 여러 요소에 적용 가능, ID는 한 번만 사용
B. class는 숫자로 시작, ID는 문자로 시작
C. class는 전역, ID는 로컬
D. class는 스타일이 우선, ID는 무시
정답: A
설명: class는 여러 요소에 재사용할 수 있지만, ID는 문서 내에서 유일하게 사용되어야 합니다.

4. 질문: CSS 박스 모델의 구성 요소는 무엇인가?
A. 내용, 패딩, 마진, 테두리
B. 내용, 배경, 텍스트, 이미지
C. 너비, 높이, 색상, 폰트
D. 링크, 버튼, 테이블, 폼
정답: A
설명: CSS 박스 모델은 내용(content), 패딩(padding), 테두리(border), 마진(margin)으로 구성되어 요소의 레이아웃을 정의합니다.

5. 질문: 요소를 수평으로 중앙 정렬하는 CSS 속성은 무엇인가?
A. text-align: center;
B. margin: auto;
C. align-items: center;
D. float: center;
정답: A
설명: text-align: center; 속성은 인라인 요소나 텍스트를 수평 중앙으로 정렬합니다.

6. 질문: CSS Flexbox의 주요 목적은 무엇인가?
A. 이미지 처리
B. 반응형 레이아웃 생성
C. 애니메이션 효과
D. 폰트 스타일링
정답: B
설명: Flexbox는 유연한 레이아웃을 만들기 위해 사용되며, 특히 반응형 웹 디자인에서 요소의 정렬과 분배를 쉽게 합니다.

7. 질문: CSS에서 미디어 쿼리를 사용하는 이유는 무엇인가?
A. 색상 변경
B. 장치 크기에 따라 스타일 적용
C. 폰트 크기 증가
D. 배경 이미지 추가
정답: B
설명: 미디어 쿼리는 화면 크기, 해상도 등 장치 특성에 따라 스타일을 다르게 적용하여 반응형 디자인을 구현합니다.

8. 질문: CSS에서 :hover pseudo-class는 무엇을 나타내는가?
A. 클릭된 요소
B. 마우스 오버된 요소
C. 숨겨진 요소
D. 선택된 텍스트
정답: B
설명: :hover는 마우스 커서가 요소 위에 있을 때 스타일을 적용하여 상호작용을 제공합니다.

9. 질문: CSS transition 속성을 사용하여 효과를 주는 예는 무엇인가?
A. 배경색 변경 시 부드럽게 전환
B. 요소 삭제
C. 이미지 로드
D. 텍스트 크기 고정
정답: A
설명: transition은 속성 값의 변화를 부드럽게 애니메이션으로 전환하여 사용자 경험을 향상시킵니다.

10. 질문: CSS에서 position: absolute; 속성은 요소를 어떻게 배치하나?
A. 문서 흐름에 따라
B. 부모 요소의 상대 위치에 따라
C. 고정된 화면 위치에
D. 중앙 정렬로
정답: B
설명: position: absolute;는 가장 가까운 위치된 부모 요소를 기준으로 요소를 배치합니다.

11. 질문: CSS z-index 속성은 무엇을 제어하나?
A. 요소의 너비
B. 요소의 높이
C. 요소의 스택 순서
D. 요소의 색상
정답: C
설명: z-index는 요소의 층위를 결정하여, 겹치는 요소의 앞뒤 순서를 지정합니다.

12. 질문: CSS에서 px와 em 단위의 차이점은 무엇인가?
A. px는 절대 단위, em은 상대 단위
B. em은 고정, px는 가변
C. px는 폰트 크기, em은 화면 크기
D. 둘 다 동일
정답: A
설명: px는 고정 픽셀 단위지만, em은 부모 요소의 폰트 크기에 상대적인 단위입니다.

13. 질문: CSS 변수(예: –main-color)를 정의하는 방법은 무엇인가?
A. var(–main-color)
B. :root { –main-color: red; }
C. variable: –main-color red;
D. define var –main-color red;
정답: B
설명: CSS 변수는 :root나 선택자 내에서 –변수명: 값;으로 정의하여 재사용할 수 있습니다.

14. 질문: CSS Vendor Prefixes(예: -webkit-)의 목적은 무엇인가?
A. 브라우저 호환성 제공
B. 색상 변환
C. 이미지 최적화
D. 텍스트 스타일링
정답: A
설명: Vendor Prefixes는 특정 브라우저(예: Chrome의 -webkit-)에서 새로운 CSS 기능을 지원하기 위해 사용됩니다.

15. 질문: CSS Grid와 Flexbox의 주요 차이점은 무엇인가?
A. Grid는 1D 레이아웃, Flexbox는 2D
B. Grid는 2D 그리드 레이아웃, Flexbox는 1D 레이아웃
C. 둘 다 동일
D. Grid는 모바일 전용
정답: B
설명: Flexbox는 주로 1차원(행 또는 열) 레이아웃에 적합하며, Grid는 2차원(행과 열) 그리드 기반 레이아웃을 제공합니다.