Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

CSS 버전별 차이점 총정리: CSS1부터 CSS3까지 한눈에 보기

CSS 버전 비교 개요

웹 페이지의 디자인과 스타일을 담당하는 CSS(Cascading Style Sheets)는 시대에 따라 여러 버전으로 발전해 왔습니다. 각 버전은 이전 버전의 기능을 기반으로 하며, 새로운 기능을 추가하면서 웹 개발 환경을 더욱 풍부하게 만들어 왔습니다. 지금부터 CSS1부터 CSS3까지 주요 버전별 특징을 살펴보겠습니다.

CSS1 (1996년)

CSS1은 1996년 12월 W3C(World Wide Web Consortium)에서 권고 사양으로 처음 공개된 버전입니다. CSS 언어의 기본 문법을 정의했으며, 모든 HTML 태그에 적용할 수 있는 간단한 시각적 포매팅 모델(visual formatting model)을 제시했습니다. 텍스트 색상, 글꼴 스타일 등 웹 문서의 기본적인 스타일 지정이 가능해진 시기입니다.

CSS2 (1998년)

CSS2는 1998년 5월 W3C 권고 사양으로 발표되었으며, CSS1의 기능 위에 다양한 기능을 추가했습니다. 주요 새 기능은 다음과 같습니다.

  • 프린터, 음성 출력 장치 등 미디어별 스타일 시트 지원
  • 다운로드 가능한 폰트(웹 폰트) 지원
  • 요소 위치 지정(element positioning)
  • 테이블 레이아웃 지원

CSS3 (1999년)

CSS3는 1999년 6월 W3C에서 권고 사양으로 발표된 버전으로, 기존 CSS 버전들의 기능을 모두 포함합니다. 가장 큰 변화는 문서를 모듈(Module) 단위로 나누어 관리한다는 점입니다. 각 모듈은 CSS2에서 정의된 기능에 대한 확장 기능을 독립적으로 담고 있어, 표준화 작업을 더 유연하게 진행할 수 있게 되었습니다.

CSS3는 현재 CSS의 최신 표준이며, CSS2와 비교했을 때 다음과 같은 핵심 차이점이 있습니다.

  • 미디어 쿼리(Media Queries)
  • 네임스페이스(Namespaces)
  • 셀렉터 레벨 3(Selectors Level 3)
  • 색상(Color)

CSS가 하는 일

CSS는 웹 페이지의 외관과 사용자 경험(look and feel)을 담당합니다. CSS를 활용하면 다음과 같은 요소들을 자유롭게 제어할 수 있습니다.

  • 텍스트 색상 및 글꼴 스타일
  • 문단 간 간격 조절
  • 컬럼(column)의 크기와 배치 방식
  • 배경 이미지 또는 배경색 설정
  • 레이아웃 디자인
  • 디바이스와 화면 크기에 따른 화면 표시 방식 변화
  • 그 외 다양한 시각 효과

특히 CSS3의 미디어 쿼리를 활용하면 데스크톱, 태블릿, 스마트폰 등 다양한 기기에 맞춰 반응형 웹 디자인을 구현할 수 있어, 현대 웹 개발에서 필수적인 기술로 자리 잡았습니다.