2017년 1월 18일 (수) 02:24에 Maintenance script님의 편집

2017-01-18T02:24:07Z

새 문서

[include(틀:다른 뜻1, other1=밸브 코퍼레이션의 FPS 게임, rd1=카운터 스트라이크: 소스)]

[목차]

{{{+3 Cascading Style Sheet}}}

== 개요 ==
> CSS 또는 캐스케이딩 스타일 시트(Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. [[W3C]]의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

...라고 한국어 [[위키백과]]에 소개되어 있으나 일반인이 저 말을 보기엔 이해하기 어려울 수도 있을 것이다.

과거에는 [[HTML]]에 디자인적 요소를 포함하여 작성하는 것이 일반적이었다. 다시 말해서 온갖 레이아웃, 디자인 정보를 HTML 안에 욱여넣다 보니 HTML의 본연의 목적인 구조화된 문서가 아닌 디자인을 위한 문서로 전락하고 말았다. 표를 작성해야 하는 {{{<table>}}} 태그가 레이아웃을 구성하는 용도로 쓰이는 등으로 인해 HTML 소스코드만 보면 이 문서가 어떤 문서인지 전문가조차 알기 힘든 상황이었다.[* 이것은 [[나모 웹에디터]]와 같은 [[WYSIWYG]]의 폐해가 컸다. 또한 [[WYSIWYG]]의 특성상 쓸데없는 것들이 많이 추가되기 때문에 문서가 상당히 무거워진다.]

이에 따라 [[W3C]]에서는 CSS라는 것을 만들었고, 디자인적 요소를 HTML과 완전히 분리시켜 구조화된 HTML을 만들어보자! 라는 것이 주된 목적이었다. 거기에 따라 {{{bgcolor}}} 등과 같이 HTML에서 디자인에 관련된 요소들은 전부 사용을 지양할 것을 권고하고 있다. 물론 아직도 많은 사이트들은 CSS는 그냥 링크, 글꼴이나 글자 크기, 색상 설정 정도로만 쓰고 안 쓰는 경우가 허다하긴 하다.

구조화된 HTML은 HTML 태그를 본연의 용도에 맞게 사용하는 것이다. 예를 들어 최상위 제목을 뜻하는 {{{<h1>}}} 태그는 문서의 제목 수준으로 쓰이며, 본문 내용은 {{{<p>}}} 태그로 쓴다. 이렇게 하면 디자인적 요소가 대부분 배제되기 때문에 HTML을 알아보기 훨씬 쉽다.

이렇게 하면 디자인에 필요한 부분은 CSS가 전담하기 때문에 웹디자이너와 웹프로그래머 간의 협업이 훨씬 용이해진다. 게다가 CSS는 별도의 파일 형태로 다른 문서에서도 동일한 CSS를 호출할 수 있기 때문에 트래픽을 줄이는 효과도 있다.[* 트래픽은 모바일 환경에서 더더욱 장점으로 작용하는데, 인터넷 무제한 요금제(정액제)가 아닌 이상 '''패킷을 최대한 적게 쓰는 것이 요금폭탄을 피하는 최선의 방법이다.''' 또한 로딩 속도가 빨라지는 장점도 있다.]

단, CSS는 HTML을 완벽하게 습득한 상태라 할지라도 그 용법이나 문법에 상이한 차이를 가지고 있기 때문에 상당 시간의 연습과 실전 경험이 필요하다. 특히 [[인터넷 익스플로러]] 구버전(6~7)[* 특히 국내 회사 내부 인트라넷에서 돌아가는 프로그램은 [[액티브X]]의 원활한 구동을 위해 IE 6을 사용하는 경우가 많다.]에서는 자신의 의도와는 다른 결과물을 출력하는 경우가 많다. 이 때문에 IE 6, 7을 지원하기 위해 작업하다 보면 CSS에 각종 핵[* IE의 버그(...)를 이용하여 CSS 구문을 IE 6, 7에서만 먹히는 걸로 집어넣는 기법을 말한다. 물론 웹표준 검사기에서 걸린다.]이 우후죽순으로 들어서는 것을 볼 수 있다. CSS 최신 표준안(버전 2.1)의 지원이 IE8에서야 제대로 이루어졌기 때문에 발생하는 일이다.

== 버전 ==
최신 표준안은 Level 2 Revision 1. 보통 줄여서 2.1로 부른다. IE는 이 표준안을 IE8에서야 모두 지원한다. [[http://www.w3.org/TR/CSS21/|CSS 2.1 표준안(영문)]]

Level 3도 논의 중이고, 여기부터는 글자의 특수효과나 간단한 애니메이션도 CSS로 구현할 수 있게 되었다. 몇몇 브라우저에서 조금씩 지원을 늘리고 있고, IE9도 일부 기능을 지원한다. 아직 표준안이 완성되지 않았기에 브라우저별 지원 범위가 다르다.

== 기타 ==
CSS에서 의도한 대로의 오류가 생길 때 이를 검사해내는 프로그램이 유용하게 쓰인다. 그 중에서도 [[파이어폭스]] 및 [[구글 크롬]]의 확장 프로그램인 [[파이어버그]]라는 것이 으뜸으로 알아준다.

CSS 장점은 작성이 쉽다는 것이지만, 요소가 많아지고 이에 따라 코드가 늘어나기 시작하면 유지보수에 어려움이 많아진다. 이를 보완하기 위해 만들어진 기술로 [[LESS]], [[SASS]], [[Stylus]]등이 있다. [[http://code.tutsplus.com/tutorials/sass-vs-less-vs-stylus-preprocessor-shootout--net-2432|참조: LESS vs SASS vs Stylus]]
[[분류:파일형식]]

CSS - 편집 역사

2017년 1월 18일 (수) 02:24에 Maintenance script님의 편집