웹 스타일링 CSS의 선택자·레이아웃·속성 10문항
10문항 · 4지선다 · 해설 포함
전체 10문항의 정답과 해설입니다. 아직 풀지 않았다면 위에서 먼저 풀어보세요.
CSS 박스 모델은 content → padding → border → margin 순서로 구성됩니다. shadow(box-shadow)는 박스 모델의 구성 요소가 아닌 별도 스타일 속성입니다.
flex-direction: row(기본, 가로), column(세로)으로 주축 방향을 설정합니다. justify-content는 주축 정렬, align-items는 교차축 정렬을 담당합니다.
우선순위: !important > 인라인 스타일 > #id > .class > 요소 선택자 > 전체(*). !important는 가장 강력하지만 남용 시 유지보수가 어려워집니다.
grid-template-columns: repeat(3, 1fr)은 동일한 너비의 3개 열을 만듭니다. fr 단위는 사용 가능한 공간 비율을 나타냅니다.
CSS 변수는 --이름: 값 형식으로 선언하며 :root 선택자 안에 전역 선언합니다. 사용 시 var(--primary-color)로 참조합니다.
Media Query는 화면 크기·해상도 등 조건에 따라 다른 CSS를 적용합니다. @media (max-width: 768px) { ... }처럼 사용해 모바일/태블릿/데스크톱을 구분합니다.
visibility: hidden은 요소를 보이지 않게 하지만 자리(레이아웃 공간)는 유지합니다. display: none은 요소를 완전히 제거해 자리도 사라집니다.
absolute는 position이 static이 아닌(relative, absolute, fixed, sticky) 가장 가까운 조상 요소를 기준으로 위치가 결정됩니다. 해당 조상이 없으면 body가 기준입니다.
Transition은 hover 등 상태 변화에 반응해 부드럽게 변환하고, Animation(@keyframes)은 키프레임을 정의해 자동으로 반복 실행할 수 있습니다.
em은 현재 요소의 부모 폰트 크기에 상대적, rem은 루트(:root/html)의 폰트 크기에 상대적입니다. rem이 중첩 계산 문제 없어 더 예측하기 쉽습니다.
10문제이며 문제마다 보기 4개 중 하나를 고릅니다. 전체 1분 정도 걸립니다.
맞힌 개수를 10문제 기준으로 환산해 점수와 정답률을 함께 보여줍니다. 문제를 풀 때마다 정답 여부가 바로 표시됩니다.
기술·IT 분야의 상식 문제로 구성했습니다 — 웹 스타일링 CSS의 선택자·레이아웃·속성 10문항.
네, 10문제 모두 해설이 붙어 있습니다. 보기를 고르면 정답과 함께 왜 그런지 바로 확인할 수 있습니다.