CSS (Cascading Style Sheets)

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

🎯 주요 역할

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

핵심 기능:

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

💼 실무 활용 사례

Dream of E&C 프로젝트에서의 활용

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

기본 문법 예시

/* 선택자 { 속성: 값; } */
.header {
    background-color: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
}

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

🔧 관련 기술

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

📚 학습 자료

주요 개념

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

실무 팁

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

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

목차