[[file:css2.png]] == 개요 == CSS(Cascading Style Sheets)는 웹 문서의 시각적 표현을 담당하는 스타일 시트 언어이다. HTML이 문서의 구조와 내용을 정의하는 역할을 한다면, CSS는 색상, 글꼴, 간격, 배치 등 사용자가 실제로 보게 되는 화면의 디자인을 담당한다. “Cascading(계단식)”이라는 이름은 여러 스타일 규칙이 동시에 적용될 때 우선순위에 따라 최종 스타일이 결정되는 구조에서 유래한다. == 기능 == CSS의 핵심 기능은 웹 페이지의 시각적 표현을 제어하고 사용자 경험을 향상시키는 것이다. 텍스트의 색상, 크기, 폰트 스타일을 설정할 수 있으며, 배경 이미지나 색상을 지정해 전체적인 분위기를 조정할 수 있다. 또한 요소들의 위치와 정렬을 조정하여 레이아웃을 구성하는 기능도 제공하며, Flexbox와 Grid를 통해 복잡한 구조도 비교적 직관적으로 설계할 수 있다. 이 외에도 애니메이션, 전환 효과, 반응형 디자인을 지원하여 동적인 인터랙션과 다양한 화면 환경 대응이 가능하다. == 구조 및 적용 방식 == CSS는 HTML 문서에 적용하는 방식에 따라 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트로 나뉜다. 인라인 스타일은 HTML 요소 내부에 직접 스타일을 작성하는 방식으로 즉시 적용되지만 재사용성이 낮다. 내부 스타일 시트는 <style> 태그를 이용해 하나의 문서 내에서 스타일을 정의하는 방식이며, 외부 스타일 시트는 .css 파일로 분리하여 여러 페이지에서 공통적으로 사용하는 가장 일반적인 방식이다. 여기에 더해 CSS는 선언 기반 스타일링(declarative styling) 구조를 가지며, 개발자가 '어떻게 배치할지'가 아니라 '어떤 상태일 때 어떻게 보여야 하는지'를 정의한다는 점에서 기존의 명령형 UI 구성 방식과 구분된다. 또한 클래스 기반 설계를 통해 컴포넌트 단위 스타일 재사용이 가능하며, BEM(Block Element Modifier) 같은 방법론을 활용하면 대규모 프로젝트에서도 스타일 구조를 체계적으로 관리할 수 있다. 최근에는 CSS-in-JS나 Utility-first 방식(Tailwind CSS 등)도 등장하면서 스타일링 방식 자체가 점점 추상화되고 있다. == 특징 == CSS는 계단식(cascading) 우선순위 규칙을 기반으로 여러 스타일이 충돌할 경우 최종 적용 값을 결정한다. 또한 HTML과 디자인을 분리함으로써 구조와 표현을 독립적으로 관리할 수 있어 유지보수성과 확장성이 높다. 반응형 디자인을 통해 다양한 디바이스 환경에 대응할 수 있으며, 애니메이션과 트랜지션을 활용해 사용자 인터페이스에 자연스러운 움직임을 부여할 수 있다. 다만 브라우저별 렌더링 차이로 인한 호환성 문제와, 프로젝트 규모가 커질수록 스타일 규칙이 복잡하게 얽혀 CSS의 난이도가 기하급수적으로 커질 수 있다.
