CSS 소개

1.1 CSS의 역사

Cascading Style Sheets (CSS), 흔히 캐스케이딩 스타일 시트라고 불리는, 웹 페이지의 시각적 표현을 담당하는 웹 개발의 핵심 구성 요소 중 하나야. CSS의 역사는 90년대 중반, 웹 페이지의 구조와 스타일을 분리해야 할 필요성이 분명해지면서 시작됐어.

초창기 인터넷

90년대 초, 인터넷이 막 인기를 끌기 시작할 때, 웹 페이지는 구조와 스타일을 모두 정의하는 HTML을 사용해 생성됐어. 웹 디자이너들은 <font>와 <center> 태그의 속성을 사용하여 스타일을 직접 HTML 코드에 삽입했어. 이로 인해 복잡하고 유지보수가 어려운 웹 페이지가 만들어졌어.

CSS의 출현

1994년, 하콘 비움 리(Håkon Wium Lie)가 유럽 입자 물리 연구소(CERN)에서 일하면서 CSS의 개념을 제안했어. 그는 HTML과 독립된 표준화된 스타일링 방식이 필요하다는 것을 깨달았어. 월드 와이드 웹의 창시자인 팀 버너스-리(Tim Berners-Lee)도 이 아이디어를 지지했어.

표준화

1996년 12월, 월드 와이드 웹 컨소시엄(W3C)은 CSS1이라는 첫 번째 CSS 규격을 발표했어. 이는 웹 페이지의 구조와 스타일을 분리하기 위한 첫걸음이었어. CSS1은 텍스트, 글꼴, 색상 및 정렬에 대한 기본 스타일을 포함했지만, 기능은 제한적이었어.

CSS1은 미래의 웹 디자인 발전을 위한 기초를 마련했어. 개발자들은 텍스트 색상, 배경, 타이포그래피 및 웹 페이지의 요소 정렬을 제어할 수 있는 능력을 얻었어. 이는 큰 진전이었지만, 여전히 CSS1은 큰 한계와 단점을 가지고 있었어.

1.2 CSS의 진화

CSS2: 기능 확장

1998년, CSS1 출시 2년 만에 W3C는 CSS2 규격을 발표했어. 이는 절대 및 상대적 포지셔닝, Z-인덱스, 미디어 타입 및 표 스타일링과 같은 새로운 기능과 개선 사항을 추가하며 CSS1의 기능을 크게 확장했어.

CSS2는 복잡한 레이아웃과 스타일 관리 개선을 위한 더 많은 도구를 제공하며 중요한 발전이 되었어.

CSS2.1: 수정 및 개선

CSS2의 혁신에도 불구하고, 개발자들은 구현 및 호환성과 관련된 문제에 직면했어. 이러한 문제를 해결하기 위해 2004년에 CSS2.1 규격이 발표되었어. 이는 오류 수정 및 개선 사항을 포함하여 웹 디자인을 위한 더 안정적이고 신뢰할 수 있는 기반을 제공했어.

CSS2.1은 웹 페이지를 만들 때 개발자들이 신뢰할 수 있는 사실상의 표준이 되었어.

CSS3: 모듈러 접근

CSS3는 웹 개발에서 진정한 혁신을 가져왔어. 이전 버전과 달리, CSS3는 모듈식 시스템으로 개발되었어. 이는 CSS의 다양한 부분이 독립적으로 발전할 수 있게 하여 새로운 기능의 개발 및 구현을 가속화했어.

CSS3는 애니메이션, 전환, 그라데이션, 미디어 쿼리, Flexbox 및 그리드 레이아웃과 같은 새로운 기능을 많이 가져왔어. 이러한 혁신은 더 복잡하고 상호작용적이며 반응성이 뛰어난 웹 페이지를 만드는 것을 가능하게 했어.

현대 CSS: Living Standard

현대의 CSS는 모듈 식으로 계속 발전하여 웹 기술의 변화와 개발자 요구에 빠르게 적응할 수 있어. CSS Grid Layout, CSS Custom Properties(변수) 및 CSS Houdini와 같은 모듈은 유연하고 강력한 웹 디자인을 위한 새로운 가능성을 제공해.

1.3 CSS의 주요 원칙

CSS는 세 가지 주요 원칙인 캐스케이딩, 상속 및 특이성을 기반으로 해.

• 캐스케이딩 (Cascading): 규칙은 정의된 순서대로 적용돼. 여러 규칙이 충돌하는 경우 코드에서 마지막 규칙이 우선순위를 가져
• 상속 (Inheritance): 일부 속성은 부모 요소에서 자식 요소로 상속돼. 예를 들어, 텍스트 색상 및 글꼴 가족
• 특이성 (Specificity): 더 높은 특이성을 가진 규칙이 우선권을 가져. 특이성은 선택기를 기반으로 계산돼

CSS는 1994년에 처음 만들어진 이래로 긴 여정을 거쳤어. 텍스트와 배경을 스타일링하기 위한 단순한 도구에서 복잡한 레이아웃과 애니메이션을 생성하는 강력한 언어로, CSS는 웹 개발에서 필수적인 도구가 되었어.

그 모듈식 구조는 웹 표준이 새로운 요구에 신속하게 진화하고 적응할 수 있게 하여 인터넷을 사용자에게 더 아름답고 편리하게 만들어줘. CSS의 역사와 진화를 이해하면 현대 웹 디자인 기술과 표준이 어떻게 그리고 왜 사용되는지 더 잘 이해할 수 있어.