CSS3 전체 챕터 안내

/* CSS3 학습 로드맵 시각화 */

/* CH.5~14: 기초 — 이 속성들을 먼저 정복하세요 */
.level-beginner {
  /* 색상과 텍스트 */
  color: #e2e8f0;
  font-size: 16px;
  font-weight: 600;
  
  /* 박스 모델 */
  margin: 16px;
  padding: 24px;
  border: 1px solid #334155;
  border-radius: 8px;
  
  /* 배경 */
  background-color: #1e293b;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* CH.15~24: 중급 — 레이아웃의 핵심 */
.level-intermediate {
  /* Flexbox */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  
  /* Grid */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  
  /* 반응형 */
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

/* CH.25~34: 심화 — 프로덕션 수준 */
.level-advanced {
  /* 애니메이션 */
  transition: transform 0.3s ease;
  animation: fadeIn 0.5s ease-out;
  
  /* CSS Variables */
  --primary: #10b981;
  color: var(--primary);
  
  /* 다크 모드 */
  @media (prefers-color-scheme: dark) {
    --primary: #34d399;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 이 코드의 각 섹션이 트랙의 각 레벨에 대응합니다.
   CH.5~14에서 .level-beginner의 속성들을 배우고
   CH.15~24에서 .level-intermediate로 레이아웃을 잡고
   CH.25~34에서 .level-advanced로 애니메이션과 시스템을 완성합니다 */