AI 프롬프트로 CSS 200% 활용하기

1. 역할: 나는 [CSS를 배우는 학생 / 주니어 개발자]이야
2. 맥락: [어떤 프로젝트 / 어떤 상황인지]
3. 지시: [구체적으로 무엇을 해달라는지]
4. 형식: [코드 + 주석 / 비교표 / before-after]

CSS 박스 모델 알려줘

나는 CSS를 처음 배우는 학생이야.
CSS Box Model(content, padding, border, margin)을
택배 상자에 비유해서 설명해줘.

- content = 상자 안의 물건
- padding = 완충재
- border = 상자 겉면
- margin = 상자와 상자 사이 간격

이 비유에 맞는 실제 CSS 코드를 보여주고
box-sizing: border-box가 왜 필요한지도 알려줘.

CSS 선택자 종류 알려줘

CSS 선택자를 사용 빈도 순서로 정리해줘.

자주 쓰는 것 TOP 10을 표로 만들어줘:
| 순위 | 선택자 | 예시 | 설명 |

그리고 선택자 우선순위(Specificity)를
점수 시스템으로 설명해줘.
인라인(1000점) > ID(100점) > class(10점) > 태그(1점)

실무에서 !important를 쓰면 안 되는 이유도 알려줘.

px랑 rem 차이 알려줘

CSS 단위 px, rem, em, %, vw/vh를
비교표로 정리해줘.

| 단위 | 기준 | 반응형 | 접근성 | 추천 용도 |

실무에서:
- font-size는 뭘 쓰는지
- margin/padding은 뭘 쓰는지
- width는 뭘 쓰는지

각각 이유와 함께 알려줘.
16px = 1rem 기준도 설명해줘.

display 속성 알려줘

display: block, inline, inline-block, flex, grid, none의
차이를 시각적으로 설명해줘.

각각에 대해:
1) 한 줄 설명
2) 대표 HTML 태그 (어떤 태그가 기본으로 이 값인지)
3) 코드 예시
4) 언제 쓰는지 (실무 시나리오)

before/after 비교 코드를 보여줘.
특히 inline-block과 flex의 차이를 명확히 해줘.

Flexbox 사용법 알려줘

Flexbox로 아래 5가지 레이아웃을 각각 만들어줘.
모든 코드에 주석으로 왜 그 속성을 썼는지 설명해줘.

1) 수평 중앙 정렬 (가로 가운데)
2) 수직 중앙 정렬 (세로 가운데)
3) 완벽 중앙 정렬 (가로+세로 동시)
4) 양 끝 정렬 (로고 왼쪽, 메뉴 오른쪽)
5) 균등 분배 (카드 3개 동일 간격)

justify-content와 align-items의
모든 값(start/center/end/between/around/evenly)을
시각적 다이어그램으로 설명해줘.

CSS Grid 알려줘

CSS Grid로 네이버 메인 페이지 레이아웃을 만들어줘.

구조:
- 헤더 (전체 너비)
- 사이드바 (250px 고정) + 메인 콘텐츠 (나머지)
- 메인 안에 뉴스 카드 그리드 (auto-fill + minmax)
- 푸터 (전체 너비)

grid-template-areas를 사용해서
영역 이름으로 직관적으로 배치해줘:

'header header'
'sidebar main'
'footer footer'

반응형: 768px 이하에서 사이드바가 메인 위로 이동.

반응형 만들어줘

모바일 퍼스트 반응형 디자인을 설계해줘.

3단계 브레이크포인트:
- 기본 (375px~): 모바일 — 1열 레이아웃
- @media (min-width: 768px): 태블릿 — 2열
- @media (min-width: 1024px): 데스크톱 — 3열 + 사이드바

포함 요소:
- 네비게이션: 모바일=햄버거, 데스크톱=수평 메뉴
- 이미지: 모바일=100%, 데스크톱=고정 너비
- 폰트: clamp(14px, 2vw, 18px) 자동 크기

min-width를 사용하는 이유(모바일 퍼스트)와
max-width와의 차이를 설명해줘.

position 속성 알려줘

CSS position의 5가지 값을
실전 사용 사례와 함께 설명해줘.

| 값 | 사례 | 코드 |
| static | 기본값 — 언제 명시적으로 쓰는지 |
| relative | 배지/라벨 위치 미세 조정 |
| absolute | 드롭다운 메뉴, 툴팁 |
| fixed | 상단 고정 헤더, 챗봇 버튼 |
| sticky | 스크롤 따라오는 사이드바 |

relative + absolute 조합이
가장 많이 쓰이는 이유를 예제로 보여줘.
z-index 관리 전략도 알려줘.

CSS 애니메이션 만들어줘

프로덕션에서 사용할 수 있는
CSS 애니메이션 라이브러리를 설계해줘.

포함할 애니메이션:
1) fadeIn / fadeOut
2) slideUp / slideDown
3) scaleIn (0→1)
4) shake (에러 표시용)
5) pulse (알림 표시용)
6) skeleton loading (콘텐츠 로딩)

각 애니메이션:
- @keyframes 정의
- .animate-fadeIn 같은 유틸리티 클래스
- duration/timing 변형 (fast/normal/slow)
- prefers-reduced-motion 대응

transition vs animation 선택 기준도 설명해줘.
transform + opacity만 사용하는 이유(성능)도.

접근성 CSS 알려줘

WCAG 2.1 AA 기준을 충족하는
CSS 접근성 체크리스트를 만들어줘.

각 항목에 코드 예시 포함:
1) 포커스 스타일: :focus-visible 커스텀
2) 색상 대비: 4.5:1 이상 확인 방법
3) 텍스트 크기: rem 사용 + 200% 확대 대응
4) 모션: prefers-reduced-motion 대응
5) 고대비: prefers-contrast: more 대응
6) 강제 색상: forced-colors 모드 대응
7) 숨김 텍스트: .sr-only 클래스 (스크린 리더 전용)
8) 터치 영역: 최소 44px × 44px

outline: none이 왜 위험한지,
대신 어떻게 해야 하는지 설명해줘.

CSS 잘 짜는 법 알려줘

대규모 프로젝트(50+ 페이지)의
CSS 아키텍처를 설계해줘.

비교해줄 방법론:
1) BEM (Block__Element--Modifier)
2) CSS Modules (컴포넌트 스코프)
3) Tailwind CSS (유틸리티 퍼스트)
4) CSS-in-JS (styled-components)

각각의:
- 장점/단점
- 적합한 프로젝트 규모
- 코드 예시 (같은 카드 컴포넌트를 4가지 방법으로)
- 팀 규모별 추천

2026년 현재 트렌드와
CSS Modules vs Tailwind 선택 기준도 알려줘.

/* 나쁜 프롬프트 vs 좋은 프롬프트 결과 비교 */

/* ❌ 나쁜 프롬프트: 'CSS로 카드 만들어줘' */
.bad-card {
  width: 300px;
  border: 1px solid gray;
  padding: 10px;
}
/* 문제: 반응형 없음, 호버 없음, 다크모드 없음, 접근성 없음 */


/* ✅ 좋은 프롬프트: '반응형 + 호버 + 다크모드 + 접근성 카드' */
.good-card {
  /* 반응형 너비 */
  width: 100%;
  max-width: 400px;
  
  /* 박스 모델 */
  padding: 24px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  
  /* 호버 인터랙션 */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.good-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* 다크 모드 대응 */
@media (prefers-color-scheme: dark) {
  .good-card {
    border-color: #334155;
    background: #1e293b;
  }
}

/* 접근성: 키보드 포커스 */
.good-card:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

/* 접근성: 모션 민감 사용자 */
@media (prefers-reduced-motion: reduce) {
  .good-card {
    transition: none;
  }
  .good-card:hover {
    transform: none;
  }
}

/*
  📊 나쁜 프롬프트 vs 좋은 프롬프트 결과:
  
  | 항목           | ❌ 나쁜 | ✅ 좋은 |
  |---------------|--------|--------|
  | 반응형         | 없음   | 100% + max-width |
  | 호버 효과      | 없음   | transform + shadow |
  | 다크 모드      | 없음   | prefers-color-scheme |
  | 접근성         | 없음   | focus-visible + reduced-motion |
  | CSS Variables  | 없음   | var(--border-color) |
  | 성능           | 모름   | transform만 애니메이션 (GPU) |
  
  → 프롬프트의 구체성이 코드 품질을 결정합니다!
*/