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 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 3

CSS 논리적 속성(Logical Properties)이란 무엇인가요?

Accepted Answer

논리적 속성은 물리적 방향(left/right) 대신 **콘텐츠 흐름 방향**에 따라 스타일을 적용합니다.

```css
/* 물리적 속성 */
.box { margin-left: 16px; padding-top: 8px; width: 200px; }

/* 논리적 속성 */
.box {
  margin-inline-start: 16px;  /* LTR→left, RTL→right */
  padding-block-start: 8px;
  inline-size: 200px;
}
```

| 물리적 | 논리적 |
|--------|--------|
| left/right | inline-start/end |
| top/bottom | block-start/end |
| width | inline-size |
| height | block-size |

**사용 이유:**
- 다국어 지원(i18n): RTL(아랍어, 히브리어) 자동 대응
- 세로 쓰기 모드 지원
- 미래 지향적 CSS

Question 4

CSS란 무엇인가요?

Accepted Answer

CSS(Cascading Style Sheets)는 HTML로 표현된 문서의 **표현(presentation)**을 기술하는 스타일 시트 언어입니다. 구조(HTML)와 표현(CSS)을 분리해 같은 마크업에 다른 디자인을 입힐 수 있게 합니다. **이름의 "Cascading"이 핵심** 여러 출처에서 온 스타일 선언이 충돌할 때 **어떤 것을 적용할지 결정하는 폭포수 알고리즘**을 뜻합니다. 우선순위는 순서대로: 1. **출처와 중요도(Origin & Importance)** — 사용자 에이전트 < 사용자 < 작성자 스타일. `!important`가 붙으면 이 순서가 역전 2. **캐스케이드 레이어(`@layer`)** — 나중에 선언된 레이어가 우선 3. **명시도(Specificity)** — ID(1,0,0) > 클래스·속성·의사클래스(0,1,0) > 요소·의사요소(0,0,1) 4. **소스 순서** — 위 모두 같으면 **나중에 선언된 것**이 이김 **세 가지 기둥**

Question 5

요소를 중앙 정렬하는 대표적인 방법은 무엇인가요? (인라인/블록 요소 포함)

Accepted Answer

대상이 **인라인인지 블록인지**, **수평만인지 수직까지인지**에 따라 방법이 갈립니다. ## 1. 인라인 요소 (텍스트, ``, ``) 부모에 `text-align: center`를 겁니다. 자식이 아니라 **부모에 거는 것**이 포인트입니다. ```css .parent { text-align: center; } /* 자식 인라인 콘텐츠가 가운데로 */ ``` 수직은 한 줄이면 `line-height`를 컨테이너 높이와 같게 주는 방법이 있습니다(단일 행 전용). ## 2. 블록 요소 — 수평만 **너비가 정해진** 블록에 좌우 마진 `auto`. ```css .child { width: 600px; margin-inline: auto; } ``` 너비가 없으면 블록은 부모 폭을 다 채우므로 `margin: auto`가 아무 효과가 없습니다. **가장 흔한 실수**입니다. ## 3. Flexbox — 실무 1순위 ```css .parent

CSS

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

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

03CSS 논리적 속성(Logical Properties)이란 무엇인가요?쉬움모던 CSS

04CSS란 무엇인가요?쉬움CSS 기초

05요소를 중앙 정렬하는 대표적인 방법은 무엇인가요? (인라인/블록 요소 포함)쉬움레이아웃