CSS

📖 상세 설명

CSS(Cascading Style Sheets)는 1996년 W3C에서 표준화한 웹 페이지 스타일링 언어입니다. HTML이 콘텐츠의 구조를 정의한다면, CSS는 그 구조에 시각적 표현(색상, 레이아웃, 폰트, 애니메이션 등)을 입히는 역할을 합니다. 'Cascading'은 여러 스타일 규칙이 충돌할 때 우선순위에 따라 적용되는 방식을 의미합니다.

현대 CSS의 핵심은 Flexbox와 Grid 레이아웃 시스템입니다. Flexbox는 1차원 레이아웃(행 또는 열)에, Grid는 2차원 레이아웃(행과 열 동시에)에 최적화되어 있습니다. 2024년 기준 글로벌 브라우저의 98% 이상이 두 시스템을 완벽 지원합니다.

CSS는 3단계 선택자 우선순위(Specificity)를 따릅니다: 인라인 스타일(1000점) > ID 선택자(100점) > 클래스 선택자(10점) > 요소 선택자(1점). !important는 이 규칙을 무시하고 최우선 적용되지만, 유지보수를 어렵게 만들어 사용을 지양합니다.

최근 CSS는 CSS Variables(Custom Properties), Container Queries, :has() 선택자 등 강력한 기능들이 추가되고 있습니다. 특히 CSS-in-JS 논쟁과 함께 Tailwind CSS, CSS Modules, styled-components 등 다양한 스타일링 방법론이 공존하며 발전하고 있습니다.

💻 코드 예제

/* CSS Variables와 Flexbox/Grid 레이아웃 */
:root {
  --primary-color: #a855f7;
  --spacing-md: 1rem;
  --radius: 12px;
}

/* Flexbox: 네비게이션 바 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  gap: 1rem;
}

/* Grid: 카드 레이아웃 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
  }
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* 모던 CSS: Container Query */
@container (min-width: 400px) {
  .card {
    padding: 2rem;
  }
}

/* 애니메이션 */
.button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(168, 85, 247, 0.3);
}

🗣️ 실무 대화 예시

⚠️ 주의사항

• 🚫
  !important 남용: specificity 문제를 !important로 해결하면 나중에 더 큰 specificity 전쟁을 초래합니다. 근본 원인을 찾아 선택자 구조를 개선하세요.
• 🚫
  레이아웃 시프트(CLS): 이미지나 폰트에 width/height를 지정하지 않으면 로딩 중 레이아웃이 밀려나며 UX가 저하됩니다. aspect-ratio나 명시적 크기를 지정하세요.
• 🚫
  과도한 중첩 선택자: .parent .child .grandchild .target 같은 깊은 중첩은 specificity를 높이고 재사용성을 떨어뜨립니다. BEM이나 Tailwind처럼 flat한 구조를 권장합니다.

🔗 관련 용어

📚 더 배우기