CSS 편집하기 (부분)

== 역사 ==
CSS는 1994년 10월 10일 [[하콘 비움 리]](Håkon Wium Lie)에 의해 처음 제안되었다. 당시 웹은 빠르게 성장하고 있었지만, HTML만으로는 시각적인 표현을 다루는 데 한계가 분명했다. 웹 문서의 구조(HTML)와 표현(CSS)을 분리하자는 아이디어는 간결하고 효율적인 유지보수를 가능케 했으며, 이러한 장점 덕분에 CSS는 빠른 속도로 표준화 과정을 밟게 되었다.

CSS 표준은 [[W3C]](World Wide Web Consortium)에서 관리하며, 역사적으로 여러 버전을 거치면서 기능과 안정성이 개선되었다. 또한, CSS가 제안된 이후 웹 브라우저들은 이를 적극적으로 지원하기 위해 경쟁적으로 기능을 구현하기 시작했고, 표준화에 맞춰 브라우저 간 호환성이 점차 나아져 왔다. 다만, CSS가 발전하는 속도에 비해 브라우저의 지원 상황이 뒤처지는 경우도 종종 발생하여, 웹 개발자들은 각 브라우저별로 벤더 프리픽스(-webkit-, -moz-, -o-, -ms- 등)를 활용해가며 호환성을 맞춰야 했다.

오늘날에는 모바일 브라우저와 데스크톱 브라우저 대부분이 최신 CSS 사양을 점차 빠르게 도입하고 있으며, 수많은 오픈소스 프로젝트와 커뮤니티가 적극적으로 참여하여 CSS의 발전 속도와 다양성을 더해주고 있다.

=== CSS1 ===
1996년 12월에 발표된 CSS 레벨 1은 폰트 속성, 텍스트 색상, 배경, 여백, 패딩 등 기본적인 스타일링 기능을 중심으로 구성되어 있었다. 이 시기에 CSS는 다양한 기능을 제공하기보다는, “HTML 태그에 분산된 스타일 요소를 한곳에 모으자”라는 근본 목표를 실현하는 데 집중했다.

CSS1은 당시 웹 브라우저들 간의 호환성 이슈가 심각했음에도 불구하고, 기존에 마크업에 직접 정의하던 스타일을 분리하여 웹 개발의 생산성을 높였다는 점에서 큰 의미가 있었다. 그러나 일부 브라우저 제조사들은 CSS 표준을 완벽히 지원하지 않아, 웹 디자이너나 개발자들은 특정 브라우저에 맞춘 꼼수(Hack) 기법을 사용해야 하는 어려움이 있었다.

=== CSS2 ===
1998년 5월에 발표된 CSS 레벨 2는 포지셔닝(Positioning), 미디어 타입 지원, 테이블 레이아웃 등의 새로운 기능을 추가하였다. 특히, 웹 페이지 레이아웃을 잡는 데 큰 혁신을 가져온 것이 포지셔닝 속성으로, 요소를 문서 흐름에서 분리하거나, 절대/상대 위치를 지정하여 정교하게 배치할 수 있었다.

CSS2는 인쇄 스타일 시트나 음성 브라우저와 같은 다양한 출력 매체를 지원하기 위해 미디어 타입을 적극적으로 도입함으로써, 화면용, 프린트용, 음성용 등 상황에 따른 다양한 스타일링이 가능하도록 했다. 이는 웹 문서가 더 이상 브라우저 화면만을 대상으로 하지 않는다는 점을 보여주는 중요한 이정표가 되었다.

=== CSS2.1 ===
CSS2의 오류를 수정하고 일부 기능을 개선한 CSS 레벨 2.1은 2011년 6월에 [[W3C]] 권고안으로 최종 발표되었다. CSS2.1은 웹 브라우저의 실제 구현 사례들을 종합하여, 아직 호환성 문제가 있는 기능들은 제외하거나 보완함으로써 실사용에 견고한 버전으로 자리 잡았다.

이 시기에 CSS는 폭넓은 지원을 받기 시작했으며, 웹 디자인 분야에 전문적인 직업이 생겨날 만큼 성장하였다. 기존의 테이블 기반 레이아웃이 사라지고, CSS만으로도 유연한 레이아웃을 구성할 수 있게 되면서, 웹 표준 준수와 접근성을 높이는 방향으로 시장이 재편되었다.

=== CSS3 ===
CSS3는 기존의 단일 표준 문서였던 CSS1, CSS2와 달리, 모듈화(Modular)된 접근 방식을 도입하였다. 이를 통해 각 모듈(예: 배경과 경계, 셰이프, 애니메이션, 그리드 레이아웃 등)이 독립적으로 개발되고 업데이트될 수 있게 되었다. 이는 표준화 과정이 더 유연해지고, 새로운 기능이 빠르게 추가되도록 만드는 데 큰 역할을 했다.

CSS3는 그림자 효과(`box-shadow`), 그라데이션(`linear-gradient`, `radial-gradient`), 변형(`transform`), 트랜지션(`transition`), 애니메이션(`@keyframes`) 등 다양한 기능을 제공함으로써, 자바스크립트 없이도 다양한 인터랙션과 시각적 효과를 구현할 수 있게 했다. 또한, 미디어 쿼리(`@media`)를 통해 기기별 화면 크기나 해상도에 맞춘 반응형 디자인을 쉽게 적용할 수 있게 되어, 모바일 시대에 적합한 웹 개발의 기틀을 마련했다.