Question 1

Flexbox의 주요 속성과 동작 원리를 설명해주세요.

Accepted Answer

Flexbox는 1차원 레이아웃 모델로, 주축(main axis)과 교차축(cross axis)을 기준으로 요소를 배치합니다.

```css
.container {
  display: flex;
  flex-direction: row;       /* 주축 방향: row | column */
  justify-content: center;   /* 주축 정렬 */
  align-items: center;       /* 교차축 정렬 */
  gap: 16px;                 /* 아이템 간격 */
  flex-wrap: wrap;           /* 줄바꿈 허용 */
}

.item {
  flex: 1;                   /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  flex-shrink: 0;            /* 축소 방지 */
}
```

- **justify-content**: 주축 방향 정렬

Question 2

CSS Grid와 Flexbox의 차이점은 무엇인가요?

Accepted Answer

CSS Grid는 2차원 레이아웃, Flexbox는 1차원 레이아웃을 위한 모델입니다.

```css
/* Grid - 2차원: 행과 열을 동시에 제어 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

/* Flexbox - 1차원: 행 또는 열 한 방향 */
.flex-container {
  display: flex;
  justify-content: space-between;
}
```

| 특성 | Grid | Flexbox |
|------|------|---------|
| 차원 | 2차원 (행+열) | 1차원 (행 또는 열) |
| 용도 | 전체 페이지 레이아웃 | 컴포넌트 내부 정렬 |
| 콘텐츠 vs 레이아웃 | 레이아웃 우선 | 콘텐츠 우선 |
| 아이템 배치 | 명시적 위치 지정

Question 3

CSS position 속성의 각 값을 설명해주세요.

Accepted Answer

position 속성은 요소의 배치 방법을 결정합니다.

```css
/* static: 기본값, 문서 흐름에 따라 배치 */
.static { position: static; }

/* relative: 원래 위치 기준으로 이동 */
.relative { position: relative; top: 10px; left: 20px; }

/* absolute: 가장 가까운 positioned 조상 기준 */
.absolute { position: absolute; top: 0; right: 0; }

/* fixed: 뷰포트 기준으로 고정 */
.fixed { position: fixed; bottom: 20px; right: 20px; }

/* sticky: 스크롤 시 지정 위치에 고정 */
.sticky { position: sticky; top: 0; }
```

- **static**: 기본값. top/left 등의 오프셋이 적용되지 않습니다.
- **relative**:

Question 4

CSS Box Model을 설명해주세요.

Accepted Answer

모든 HTML 요소는 Box Model로 구성됩니다. 안쪽부터 content → padding → border → margin 순서입니다.

```css
.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}

/* 기본(content-box): 실제 너비 = 200 + 20*2 + 2*2 = 244px */
/* border-box: 실제 너비 = 200px (padding, border 포함) */

/* 전역으로 border-box 적용 (권장) */
*, *::before, *::after {
  box-sizing: border-box;
}
```

- **content-box** (기본값): width/height가 콘텐츠 영역만 지정합니다.
- **border-box**: width/height가 padding과 border를 포함합니다.
- 대부분의 프로젝트에서 `box-s

Question 5

반응형 디자인(Responsive Design)을 구현하는 방법은?

Accepted Answer

반응형 디자인은 다양한 화면 크기에 맞춰 레이아웃을 조정하는 웹 디자인 방식입니다.

```css
/* 1. Media Query */
@media (max-width: 768px) {
  .container { flex-direction: column; }
}

/* 2. 상대 단위 사용 */
.container {
  width: 90%;
  max-width: 1200px;
  font-size: clamp(14px, 2vw, 18px);
}

/* 3. 유동적 Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* 4. 반응형 이미지 */
img {
  max-width: 100%;
  height: auto;
}
```

- **모바일 퍼스트**: 작은 화면부터 스타일링하고 `min-width` 미디어 쿼리로 확장하는 것이 권장됩니다.
- **상대

Question 6

CSS 선택자 우선순위(Specificity)를 설명해주세요.

Accepted Answer

CSS 선택자 우선순위는 여러 규칙이 같은 요소에 적용될 때 어떤 스타일이 우선하는지 결정합니다.

**우선순위 계산 (높은 순):**

1. `!important` — 최우선 (사용 자제)
2. 인라인 스타일 — `style="..."` (1,0,0,0)
3. ID 선택자 — `#id` (0,1,0,0)
4. 클래스/속성/가상클래스 — `.class`, `[attr]`, `:hover` (0,0,1,0)
5. 태그/가상요소 — `div`, `::before` (0,0,0,1)
6. 전체 선택자 — `*` (0,0,0,0)

```css
/* 우선순위: 0,1,1,1 */
#header .nav a { color: blue; }

/* 우선순위: 0,0,2,1 */
.nav .link a { color: red; }

/* #header가 포함되어 있으므로 첫 번째 규칙이 적용됨 */
```

- 우선순위가 같으면 나중에 선언된 스타일이 적용됩니다.
- `!important`는 디버

Question 7

CSS Custom Properties(변수)란 무엇이고 어떻게 사용하나요?

Accepted Answer

CSS Custom Properties(CSS 변수)는 재사용 가능한 값을 정의하는 기능입니다.

**선언과 사용:**
```css
:root {
  --primary-color: #3b82f6;
  --spacing-md: 16px;
  --font-body: 'Pretendard', sans-serif;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing-md);
  font-family: var(--font-body);
}
```

**폴백(fallback) 값:**
```css
color: var(--undefined-var, #333); /* 변수가 없으면 #333 사용 */
```

**Sass 변수와의 차이점:**
| | CSS 변수 | Sass 변수 |
|---|---|---|
| 런타임 | 브라우저에서 동적 변경 가능 | 빌드 시 정적 치환 |
| 스코프 | CSS 캐스케이드(상속) 기반

Question 8

CSS Container Queries란 무엇이고 Media Query와 어떻게 다른가요?

Accepted Answer

Container Queries는 뷰포트가 아닌 **부모 컨테이너의 크기**를 기준으로 스타일을 적용합니다.

```css
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card { display: grid; grid-template-columns: 200px 1fr; }
}
@container card (max-width: 399px) {
  .card { display: flex; flex-direction: column; }
}
```

| 기준 | Media Query | Container Query |
|------|-------------|------------------|
| 기준점 | 뷰포트 크기 | 부모 컨테이너 크기 |
| 재사용성 | 낮음 | 높음 |
| 컴포넌트 설계 | 어려움 | 자연스러움 |

**핵심*

Question 9

:has() 선택자의 활용법과 의미를 설명해주세요.

Accepted Answer

`:has()`는 CSS의 **부모 선택자**로, 특정 자식/후속 요소를 포함하는 부모를 선택합니다.

```css
/* 이미지를 포함한 카드만 스타일 변경 */
.card:has(img) { grid-template-rows: auto 1fr; }

/* 체크된 체크박스의 부모 label */
label:has(input:checked) { background-color: #e0f0ff; }

/* 에러 필드가 있으면 제출 버튼 비활성화 스타일 */
form:has(.field-error) .submit-btn { opacity: 0.5; pointer-events: none; }

/* 비어있지 않은 입력 필드의 floating label */
.field:has(input:not(:placeholder-shown)) .label {
  transform: translateY(-20px);
  font-size: 12px;
}
```

**이전에는 불가능했던 것:**
- CSS만

Question 10

z-index와 쌓임 맥락(Stacking Context)을 설명해주세요.

Accepted Answer

**z-index**는 요소의 쌓임 순서(z축 위치)를 지정하며, `position`이 `static`이 아닌 요소에서 동작합니다.

**쌓임 맥락(Stacking Context):**
독립적인 z축 레이어 그룹입니다. 새로운 쌓임 맥락이 생성되는 조건:
- `position: absolute|relative|fixed` + `z-index` 값이 `auto`가 아닐 때
- `opacity` < 1
- `transform`, `filter`, `perspective` 등이 `none`이 아닐 때
- `isolation: isolate`
- `will-change`에 위 속성 지정 시

**핵심 규칙:**
```
같은 쌓임 맥락 내에서만 z-index 비교가 의미 있다.
```

**흔한 실수:**
```css
/* 부모 A: z-index: 1 → 새 쌓임 맥락 생성 */
/* 자식 A-1: z-index: 9999 */
/* 부모 B: z-index: 2 → 새 쌓임 맥락 생성 *

CSS

01Flexbox의 주요 속성과 동작 원리를 설명해주세요.쉬움레이아웃

02CSS Grid와 Flexbox의 차이점은 무엇인가요?보통레이아웃

03CSS position 속성의 각 값을 설명해주세요.보통CSS 기초

04CSS Box Model을 설명해주세요.쉬움CSS 기초

05반응형 디자인(Responsive Design)을 구현하는 방법은?보통반응형

06CSS 선택자 우선순위(Specificity)를 설명해주세요.보통CSS 기초

07CSS Custom Properties(변수)란 무엇이고 어떻게 사용하나요?보통CSS 변수

08CSS Container Queries란 무엇이고 Media Query와 어떻게 다른가요?보통모던 CSS

09:has() 선택자의 활용법과 의미를 설명해주세요.보통모던 CSS

10z-index와 쌓임 맥락(Stacking Context)을 설명해주세요.보통레이아웃