CSS

 


1. 개요
2. 본문
4. 버전
5. 라이브러리
6. 주의사항
7. 기타
8. 단점과 보완

'''C'''ascading '''S'''tyle '''S'''heet

1. 개요

HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 언어.
CSS의 C가 Cascading의 약자인데, 이는 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜주는 모습이 DOM 트리구조에서 마치 폭포수처럼 내려가는 모습을 닮았기 때문이다.[1]

2. 본문

과거에는 HTML에 디자인적 요소를 포함하여 작성하는 것이 일반적이었다. 다시 말해서 온갖 레이아웃, 디자인 정보를 HTML 안에 욱여넣다 보니 HTML의 본연의 목적인 구조화된 문서가 아닌 디자인을 위한 문서로 전락하고 말았다. 표를 작성해야 하는 
 태그가 레이아웃을 구성하는 용도로 쓰이는 등으로 인해 HTML 소스코드만 보면 이 문서가 어떤 문서인지 전문가조차 알기 힘든 상황이었다.[2]
이에 따라 W3C에서는 "디자인적 요소를 HTML과 완전히 분리시켜 구조화된 HTML을 만들어보자!" 라는 목적으로 CSS를 발표했다. 거기에 따라 
bgcolor
 등과 같이 HTML에서 디자인에 관련된 요소들은 전부 사용하지 말 것을 권고하고 있다. CSS 발표 이후로 HTML문서의 구조화를 도와주는 div, span, section 등의 새로운 태그가 도입되고 strike, font 등의 스타일 태그는 비권장 태그로 전환되다가 HTML5에서는 아예 삭제되었다. table은 표 형태의 데이터를 표현하는 용도에만 쓰도록 권고하면서 표의 구조화를 도와줄 thead, tbody태그가 새로 소개되었다.
구조화된 HTML은 HTML 태그를 본연의 용도에 맞게 사용하는 것이다. 예를 들어 최상위 제목을 뜻하는 
 태그는 문서의 제목 수준으로 쓰이며, 본문 문단은 
 태그로 나눈다. 이렇게 하면 디자인적 요소가 대부분 배제되기 때문에 HTML을 알아보기 훨씬 쉽다. 여기서 '알아보기 쉽다'에는 사람(프로그래머)뿐만 아니라 기계(웹 브라우저)역시 포함된다. 기계가 이해하기 쉬운 HTML은 다양한 포맷으로 출력 형식을 바꾸기 용이하고(CSS파일을 모바일용, PC용 등으로 각자 준비해 교체하는 방식으로 적용한다), 문서의 해독(파싱)속도가 빨라지며 동적인 기능을 구현하기가 더 쉬워진다. 그리고 대부분의 경우 구조화된 HTML이 과거의 비구조화 HTML보다 문서 크기가 상대적으로 작다.
이렇게 하면 디자인에 필요한 부분은 CSS가 전담하기 때문에 웹디자이너와 웹프로그래머 간의 협업이 훨씬 용이해진다. 게다가 CSS는 HTML문서에