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

CSS

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

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

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

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