E D R , A S I H C RSS

CSS

last modified: 2015-03-11 13:59:53 by Contributors

  • 밸브 코퍼레이션의 FPS 게임 카운터 스트라이크: 소스를 찾았다면 이 항목으로.

주의 : 기술적인 문제로 인해 이 문서로 오는 링크를 만들 때 주의를 요합니다.

기술적인 문제로 인해 다른 문서에서 이 문서로 오는 링크를 만들 때 [[문서명]]을 사용할 수 없거나, 특별한 처리를 필요로 합니다. [[문서명|]] 또는 [[|문서명]]을 이용해주세요. 단, 제목에 특수문자가 들어가는 문서는 그 자리에 퍼센트 코드값을 넣어야 할 수 있습니다.(예: [[C%23|C#]]) 기술적인 문제가 해결되면 이 틀을 제거해 주세요.

※ 이 페이지를 위키에 링크하시려면 [[CSS|CSS]]의 형태로 링크해 주세요.

Cascading Style Sheet
CarSekSeu

Contents

1. 개요
2. 버전
3. 기타

1. 개요

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

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

과거에는 HTML에 디자인적 요소를 포함하여 작성하는 것이 일반적이었다. 다시 말해서 온갖 레이아웃, 디자인 정보를 HTML안에 우겨넣다보니 HTML의 본연의 목적인 구조화된 문서가 아닌 디자인을 위한 문서로 전락하고 말았다. 표를 작성해야 하는 table 태그가 레이아웃을 구성하는 용도로 쓰이는 등으로 인해 HTML 소스코드만 보면 이 문서가 어떤 문서인지 전문가조차 알기 힘든 상황이었다(...)[1]

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

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

이렇게 하면 디자인에 필요한 부분은 CSS가 전담하기 때문에 웹디자이너와 웹프로그래머간의 협업이 훨씬 용이해 진다. 게다가 CSS는 별도의 파일 형태로 다른 문서에서도 동일한 CSS를 호출할 수 있기 때문에 트래픽을 줄이는 효과도 있다.[3]

단, CSS는 HTML을 완벽하게 습득한 상태라 할지라도 그 용법이나 문법에 상이한 차이를 가지고 있기 때문에 상당 시간의 연습과 실전 경험이 필요하다. 특히 인터넷 익스플로러 구버전(6~7)[4]에서는 자신의 의도와는 다른 결과물을 출력하는 경우가 많다. 이 때문에 IE6,7을 지원하기 위해 작업하다 보면 CSS에 각종 핵[5]이 우후죽순으로 들어서는 것을 볼 수 있다. CSS 최신 표준안(버전 2.1)의 지원이 IE8에서야 제대로 이루어졌기 때문에 발생하는 일이다.

2. 버전

최신 표준안은 Level 2 Revision 1. 보통 줄여서 2.1로 부른다. IE는 이 표준안을 IE8에서야 모두 지원한다.

Level 3도 논의중이고, 여기부터는 글자의 특수효과나 간단한 애니메이션도 CSS로 구현할 수 있게 되었다. 몇몇 브라우저에서 조금씩 지원을 늘리고 있고, IE9도 일부 기능을 지원한다.[6]

3. 기타

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

리그베다 위키 문서 내에서 [[CSS]]라고 치면 UI의 CSS를 선택할 수 있는데, 뭘 써도 레이아웃이 와장창 깨진다(...) 아래는 예시.

Supported CSS styles           

----
  • [1] 이것은 모 웹 에디터와 같은 WYSIWYG의 폐해가 컸다. 또한 WYSIWYG의 특성상 쓸데없는 것들이 많이 추가되기 때문에 문서가 상당히 무거워진다.
  • [2] 예를 들면 bgcolor 같은 색 지정 속성이 있다.
  • [3] 트래픽은 모바일 환경에서 더더욱 장점으로 작용하는데, 인터넷 무제한 요금제(정액제)가 아닌 이상 패킷을 최대한 적게 쓰는 것이 요금폭탄을 피하는 최선의 방법이다. 또한 로딩 속도가 빨라지는 장점도 있다.
  • [4] 특히 국내 회사 내부 인트라넷에서 돌아가는 프로그램은 액티브X의 원활한 구동을 위해 IE 6을 사용하는 경우가 많다.
  • [5] IE의 버그(...)를 이용하여 CSS 구문을 IE6,7에서만 먹히는 걸로 집어넣는 기법을 말한다. 물론 웹표준 검사기에서 걸린다(...)
  • [6] 아직 표준안이 완성되지 않았기에 브라우저별 지원 범위가 다르다.
Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2015-03-11 13:59:53
Processing time 0.0450 sec