====== CSS (Cascading Style Sheets) ======

**CSS**는 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 시트 언어입니다.
Dream of E&C 프로젝트의 프론트엔드에서 아름다운 사용자 인터페이스를 구현하는 데 사용됩니다.

----

=== 🎯 주요 역할 ===

HTML이 웹 페이지의 구조(뼈대)를 만드는 역할을 한다면, CSS는 색상, 글꼴, 간격, 배치 등 시각적인 표현(디자인)을 담당합니다.

**핵심 기능**:
  * **색상 및 배경**: 글자색, 배경색, 그라디언트 효과
  * **글꼴 및 텍스트**: 폰트 종류, 크기, 굵기, 정렬
  * **레이아웃**: 요소의 위치, 크기, 간격 조정
  * **애니메이션**: 호버 효과, 전환 효과, 키프레임 애니메이션

----

=== 💼 실무 활용 사례 ===

==== Dream of E&C 프로젝트에서의 활용 ====
  * **반응형 디자인**: 다양한 화면 크기에 맞는 레이아웃
  * **사용자 경험**: 버튼 호버 효과, 부드러운 전환
  * **브랜딩**: 일관된 색상 체계와 폰트 사용
  * **접근성**: 명확한 대비와 읽기 쉬운 디자인

==== 기본 문법 예시 ====
<code>
/* 선택자 { 속성: 값; } */
.header {
    background-color: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .header {
        padding: 10px;
        font-size: 14px;
    }
}
</code>

----

=== 🔧 관련 기술 ===

  * **HTML**: CSS가 스타일을 적용하는 마크업 언어
  * **[[wiki:glossary:web_technologies:javascript|JavaScript]]**: 동적 스타일 변경 및 인터랙션
  * **Sass/SCSS**: CSS 전처리기로 더 효율적인 스타일 작성
  * **Bootstrap**: CSS 프레임워크
  * **[[wiki:glossary:game_development:phaser|Phaser.js]]**: 게임 엔진에서 UI 스타일링
  * **[[wiki:glossary:server_operations:nodejs|Node.js]]**: 서버 사이드 렌더링에서 CSS 처리

----

=== 📚 학습 자료 ===

==== 주요 개념 ====
  * **선택자**: 스타일을 적용할 HTML 요소 지정
  * **박스 모델**: margin, border, padding, content
  * **Flexbox**: 유연한 레이아웃 시스템
  * **Grid**: 2차원 레이아웃 시스템

==== 실무 팁 ====
  * **클래스 네이밍**: BEM 방법론 활용
  * **성능 최적화**: CSS 파일 압축, 불필요한 스타일 제거
  * **브라우저 호환성**: vendor prefix 사용
  * **유지보수**: 모듈화된 CSS 구조

//''웹의 시각적 아름다움을 만들어내는 핵심 기술입니다.''//