Question 1

CSS transition과 animation의 차이점은?

Accepted Answer

**transition** — 상태 변화를 부드럽게 전환:
```css
.box {
  background: blue;
  transition: background 0.3s ease, transform 0.3s ease;
}
.box:hover {
  background: red;
  transform: scale(1.1);
}
```
- 시작 상태 → 끝 상태의 단순 전환
- 트리거(hover, class 변경 등)가 필요

**animation** — 독립적이고 복잡한 동작:
```css
@keyframes slide {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(100px); }
  100% { transform: translateX(0); }
}
.box {
  animation: slide 2s ease infinite;
}
```
- `@keyframes`로 다단계 정의 가능
- 트리거 없이 자

Question 2

CSS-in-JS vs Utility-first CSS(Tailwind)의 장단점을 비교해주세요.

Accepted Answer

**CSS-in-JS (styled-components, Emotion):**
```jsx
const Button = styled.button`
  background: ${props => props.primary ? '#3b82f6' : '#fff'};
  padding: 8px 16px;
`;
```
- 장점: 동적 스타일링, 스코프 격리, 컴포넌트와 스타일 공존
- 단점: 런타임 오버헤드, 번들 크기 증가, SSR 설정 복잡

**Utility-first CSS (Tailwind):**
```jsx
<button className="bg-blue-500 px-4 py-2 rounded hover:bg-blue-600">
```
- 장점: 런타임 비용 0, 작은 번들, 빠른 개발 속도
- 단점: 긴 className, HTML 가독성 저하

| 기준 | CSS-in-JS | Tailwind |
|------|-----------|----------|
| 런타임 비용 | 있음 |

Question 3

CSS Subgrid란 무엇이고 어떤 문제를 해결하나요?

Accepted Answer

Subgrid는 중첩된 그리드 아이템이 **부모 그리드의 트랙을 그대로 상속**받을 수 있게 합니다.

**문제: Subgrid 없이**
```css
.grid { display: grid; grid-template-columns: 200px 1fr 100px; }
.card { display: grid; /* 별도 그리드 → 부모와 무관 */ }
```

**해결: Subgrid**
```css
.card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid; /* 부모 열 트랙 상속 */
}
```

**실무 활용:**
- 카드 리스트: 여러 카드의 제목/설명/가격이 수직으로 완벽 정렬
- 폼 레이아웃: 레이블과 입력 필드가 부모 그리드와 정렬
- 대시보드: 중첩 위젯이 전체 그리드 시스템과 일관된 정렬

- 행(`grid-template-rows: subgrid`)에도 적용 가능
- 모든 모던 브라

Question 4

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 5

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 6

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

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 7

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

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 9

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

Accepted Answer

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

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

## 각각의 함정

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

Question 10

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

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

11CSS transition과 animation의 차이점은?보통애니메이션

12CSS-in-JS vs Utility-first CSS(Tailwind)의 장단점을 비교해주세요.보통방법론

13CSS Subgrid란 무엇이고 어떤 문제를 해결하나요?어려움레이아웃

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

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

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

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

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

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

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