Question 1

가상 클래스와 가상 요소의 차이점은 무엇인가요?

Accepted Answer

**한 줄 요약: 가상 클래스는 "존재하는 요소의 특정 상태"를 고르고, 가상 요소는 "존재하지 않는 가상의 요소"를 만들어냅니다.**

| | 가상 클래스 (Pseudo-class) | 가상 요소 (Pseudo-element) |
| --- | --- | --- |
| 표기 | 콜론 1개 `:hover` | 콜론 2개 `::before` |
| 대상 | **실제 DOM 요소**의 상태·위치 | DOM에 없는 **가상 박스** |
| 개수 | 선택자당 여러 개 가능 | 선택자당 원칙적으로 1개 |
| 접근성 | DOM 요소이므로 정상 인식 | 스크린리더 지원이 불균일 |

**가상 클래스 — 상태/위치 선택**

```css
a:hover, a:focus-visible { }        /* 상호작용 상태 */
input:checked, input:disabled { }   /* 폼 상태 */
li:first-child, li:nth-child(2n) { }/* 구조적 위치 */

Question 2

<img> 태그와 CSS background-image 속성은 각각 언제 사용해야 하나요?

Accepted Answer

**판단 기준은 하나입니다 — 그 이미지가 콘텐츠인가, 장식인가.**

## `<img>` — 콘텐츠 이미지

이미지가 사라지면 **정보가 손실되는** 경우.

- 상품 사진, 프로필 사진, 차트, 로고, 본문 삽화
- `alt`로 대체 텍스트 제공 → **접근성·SEO**
- 검색 엔진 이미지 색인 대상
- `srcset`/`sizes`로 반응형, `loading="lazy"`로 지연 로딩, `fetchpriority="high"`로 우선순위 조절
- `width`/`height` 명시로 **CLS 방지**
- 우클릭 저장, 이미지 전용 탭 열기 가능

## `background-image` — 장식 이미지

이미지가 사라져도 **정보가 온전한** 경우.

- 히어로 배경, 패턴, 그라디언트, 텍스처, 아이콘 스프라이트
- `background-size: cover/contain`, `background-position`으로 **크롭·정렬 제어가 자유로움**
- `backgroun

Question 3

CSS 전처리기란 무엇인가요?

Accepted Answer

전처리기(Preprocessor)는 **CSS에 없던 문법으로 작성한 뒤 표준 CSS로 컴파일**하는 도구입니다. Sass/SCSS, Less, Stylus가 대표적이며 실무에서는 SCSS가 사실상 표준입니다.

**제공하는 기능**

```scss
// 1. 변수
$primary: #3b82f6;

// 2. 중첩 (Nesting)
.card {
  padding: 16px;
  &__title { font-weight: 700; }   // BEM과 궁합
  &:hover { background: #f5f5f5; }
}

// 3. 믹스인 — 인자를 받는 스타일 묶음
@mixin flex-center($dir: row) {
  display: flex; align-items: center; justify-content: center; flex-direction: $dir;
}
.box { @include flex-center(column); }

// 4. 함수·연산
.col {

Question 4

display: none, visibility: hidden, opacity: 0의 차이점은 무엇인가요?

Accepted Answer

셋 다 "안 보이게" 만들지만 **레이아웃·이벤트·접근성에서 전혀 다르게 동작**합니다.

| | `display: none` | `visibility: hidden` | `opacity: 0` |
| --- | --- | --- | --- |
| 공간 차지 | ❌ 레이아웃에서 제거 | ⭕ 공간 유지 | ⭕ 공간 유지 |
| 마우스 이벤트 | ❌ | ❌ | **⭕ 받음** |
| 키보드 포커스 | ❌ | ❌ | **⭕ 잡힘** |
| 스크린리더 | ❌ 읽지 않음 | ❌ 읽지 않음 | **⭕ 읽음** |
| 자식이 되살리기 | ❌ 불가 | ⭕ 자식에 `visibility: visible` 가능 | ❌ (누적됨) |
| transition | ❌ 불가(이산값) | ⭕ 가능 | ⭕ 가능 |
| 리렌더 비용 | **Reflow**(레이아웃 재계산) | **Reflow** | **Composite만**(가장 저렴) |

## 각각의 함정

**`display: none`**
- 완전히 제거되

Question 5

vertical-align은 왜 수직 정렬이 잘 안 될까요?

Accepted Answer

**대부분의 사람이 기대하는 것과 실제 동작이 다르기 때문입니다.** `vertical-align`은 "블록 안에서 요소를 수직 중앙에 놓는" 속성이 **아닙니다**.

## 실제 적용 대상은 딱 두 가지

1. **인라인 레벨 요소** (`inline`, `inline-block`, `inline-flex`, 텍스트, 이미지) — **같은 줄 상자(line box) 안에서 형제들끼리의 상대적 정렬**
2. **테이블 셀** (`display: table-cell`, `<td>`) — 셀 박스 안에서 콘텐츠의 수직 정렬

블록 레벨 요소(`display: block`)에 걸면 **아무 일도 일어나지 않습니다.**

```css
.box { height: 200px; }
.box > div { vertical-align: middle; }  /* ❌ 무시됨 — 자식이 블록 */
```

## `middle`의 의미도 다릅니다

`vertical-align: middle`은 "줄의 정중

Question 6

BEM은 무엇이며, 사용하는 이유를 설명할 수 있나요?

Accepted Answer

BEM(**B**lock **E**lement **M**odifier)은 CSS 클래스 네이밍 방법론입니다. 전역 네임스페이스인 CSS에서 **이름 충돌과 명시도 전쟁을 규칙으로 해결**하려는 시도입니다. ## 구조 ``` .block {} /* 독립적으로 의미를 갖는 컴포넌트 */ .block__element {} /* 블록에 종속된 구성 요소 (언더스코어 2개) */ .block--modifier {} /* 블록/요소의 변형 상태 (하이픈 2개) */ ``` ```html

제목

``` ```css .car

Question 7

@supports 규칙은 언제 사용하나요?

Accepted Answer

`@supports`(Feature Query)는 **브라우저가 특정 CSS 속성·값을 지원하는지 CSS 안에서 직접 검사**하는 조건부 규칙입니다. JS 없이 점진적 향상(progressive enhancement)을 구현합니다.

```css
/* 폴백을 먼저, 향상을 나중에 */
.layout { display: flex; flex-wrap: wrap; }

@supports (display: grid) {
  .layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
```

## 문법

```css
@supports (property: value) { }                       /* 지원하면 */
@supports not (property: value) { }                   /* 미지원이면 */
@supports (a: b) and (c:

Question 8

:is()와 :where() 가상 클래스 선택자의 차이점은 무엇인가요?

Accepted Answer

둘 다 **선택자 목록을 받아 반복을 줄이는** 가상 클래스이고, 동작하는 매칭 결과는 완전히 같습니다. **차이는 명시도(specificity) 단 하나**입니다.

| | `:is()` | `:where()` |
| --- | --- | --- |
| 명시도 | **인자 중 가장 높은 것**을 채택 | **항상 0** |
| 용도 | 일반적인 선택자 그룹화 | 재정의되어야 할 기본 스타일 |

## 예시로 보는 차이

```css
/* 인자에 #id가 섞이면 :is()는 그 명시도를 물려받음 */
:is(#main, .content) p { color: red; }    /* 명시도 (1,0,1) — ID 수준 */
:where(#main, .content) p { color: blue; }/* 명시도 (0,0,1) — 요소 하나 수준 */

.content p { color: green; }              /* 명시도 (0,1,1) */
```

`#main` 안의 `

CSS

11가상 클래스와 가상 요소의 차이점은 무엇인가요?보통CSS 기초

12<img> 태그와 CSS background-image 속성은 각각 언제 사용해야 하나요?보통CSS 기초

13CSS 전처리기란 무엇인가요?보통방법론

14display: none, visibility: hidden, opacity: 0의 차이점은 무엇인가요?보통CSS 기초

15vertical-align은 왜 수직 정렬이 잘 안 될까요?보통CSS 기초

16BEM은 무엇이며, 사용하는 이유를 설명할 수 있나요?보통방법론

17@supports 규칙은 언제 사용하나요?보통모던 CSS

18:is()와 :where() 가상 클래스 선택자의 차이점은 무엇인가요?보통모던 CSS