Question 1

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 2

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

Accepted Answer

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

제목

``` ```css .car

Question 3

@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 4

: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

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

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

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

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