CSS 편집하기

{{HTML}}
{{CSS}}
'''종속형 시트''' 또는 '''캐스케이딩 스타일 시트'''({{llang|en|Cascading Style Sheet}})는 [[마크업 언어]]가 실제 표시되는 방법을 기술하는 [[스타일 언어]]({{Llang|en|Style sheet language|스타일 시트 랭귀지}})로<ref>{{웹 인용|title = CSS developer guide|url = https://developer.mozilla.org/en-US/docs/Web/Guide/CSS|website = Mozilla Developer Network|accessdate = 2015-09-24}}</ref>, [[HTML]]과 [[XHTML]]에 주로 쓰이며, [[XML]]에서도 사용할 수 있다. [[W3C]]의 표준이고, [[페이지 레이아웃|레이아웃]]과 스타일을 정의할 때의 [[자유도]]가 높다. 기본 파일명<ref>HTML의 index.html과 같은 것</ref>은 style.css이다.

[[마크업 언어]](ex: [[HTML]])가 [[웹사이트]]의 몸체를 담당한다면 '''CSS'''는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, [[HTML]] 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 [[웹사이트]]처럼 꾸밀 수 있다.

현재 개발 중인 [[CSS3]]의 경우 [[그림자]] 효과, [[그라데이션]], 변형 등 [[그래픽 편집 프로그램]]으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 [[어도비 플래시]]를 어느 정도 대체하고 있다.

== 역사 ==
CSS는 [[1994년]] [[10월 10일]], 하콤 비움 리(Håkon Wium Lie)가 처음 제안하였다.<ref name=chss-proposal>{{저널 인용|last=Lie|first=Hakon W|제목=Cascading HTML style sheets - a proposal|date=10 Oct 1994|issue=0.92|url=http://www.w3.org/People/howcome/p/cascade.html|accessdate=25 May 2014|publisher=CERN|format=Proposal}}</ref>

=== 버전의 변화 ===
CSS는 지속적으로 새로운 버전이 나오고 있다. 1996년에 도입된 [http://www.w3.org/TR/CSS1 CSS 1]은 CSS의 바탕이 되었다. CSS의 표준으로는 [http://www.w3.org/TR/CSS21/ CSS 2.1]이 있으며 이전 버전에 비하여 새로운 기능과 도구가 추가되었다. 대다수의 [[웹 브라우저]]는 CSS 3를 잘 지원한다. 현재 W3C에서는 CSS 3를 표준으로 만들고 있다.

CSS는 여러 수준과 프로파일을 가지고 있다. 각 수준의 CSS는 일반적으로 새로운 기능을 담고 있으며 [[CSS1]], [[CSS2]], [[CSS3]], [[CSS4]]로 나뉜다. 프로파일들은 일반적으로 특정한 장치나 [[사용자 인터페이스]]를 위해 만들어진 하나 이상 수준의 CSS의 하부 집합이다. 현재 [[휴대용 장치]], [[프린터]], [[텔레비전 수상기]]를 위한 프로파일들이 있다.

==== [[CSS1]] ====
첫 CSS 규격은 공식 W3C 권고안이 되었으며 그 이름은 [[CSS1]]이다. [[1996년]] [[12월]]에 발표되었다.

==== [[CSS2]] ====
[[CSS2]]는 [[W3C]]가 개발하였으며 [[1998년]] [[5월]]에 권고안으로 발표되었다.

==== [[CSS3]] ====
[[CSS3]]는 [[2005년]] [[12월 5일]] 이후 개발 중에 있다.<ref>[[W3C]]: ''[http://www.w3.org/Style/CSS/current-work CSS: under construction]'', CSS 3</ref> W3C CSS3 로드맵은 요약과 도입부를 제공하고 있다.<ref>[http://www.w3.org/TR/css3-roadmap/ Introduction to CSS3, W3C Working Draft, 23 May 2001]</ref> 전체가 모듈화되어 사용자 에이전트가 모듈에 대한 모든 모듈을 지원하지 않거나 자유롭게 선택할 수 있도록 하고 있으며, 다른 세로 글쓰기와 [[HTML]] 이외의 규격에까지 관여하는 내용으로 되어 있다. 현재 어떤 모듈도 권고안까지 이른 것은 없다.

==== [[CSS4]] ====
하나의 통합된 [[CSS4]] 사양은 없는데,<ref>{{웹 인용|last=Atkins Jr|first=Tab|제목=A Word About CSS4|url=http://www.xanthir.com/b4Ko0|accessdate=18 October 2012}}</ref> 이는 여러 개의 모듈로 나뉘어 있는데 기인한다. 그러나 "레벨 4" 모듈들이 존재한다.<ref>{{웹 인용|url=http://www.w3.org/TR/2011/WD-selectors4-20110929/ |제목=W3C CSS Selectors Level 4 |publisher=W3.org |accessdate=2014-05-30}}</ref>

== 문법 ==
CSS는 단순한 [[문법]]을 가지며, 수많은 영어 키워드를 사용하여 다양한 스타일의 프로퍼티의 이름을 규정한다.

스타일 시트는 규칙의 목록으로 구성된다. 각 규칙이나 규칙 집합은 하나 이상의 셀렉터와 하나의 선언 블록을 이룬다.

=== 선택자 ===
CSS에서 선택자, 또는 셀렉터({{Llang|en|Selector}})는 어느 부분의 마크업에 스타일을 적용할지 선언한다. 태그명(태그의 이름)과 클래스, ID로 선택할 수 있다. 클래스와 ID들은 [[대소문자]]를 구분하며 문자로 시작해야 하고 [[영숫자]]와 [[언더바]](_)를 포함할 수 있다. 클래스는 어떠한 요소의 어떠한 수의 인스턴스에도 적용할 수 있으며, ID는 하나의 요소에만 적용할 수 있다. ID 값은 앞에 #이 붙고, 클래스 값은 앞에 .이 붙는다.

=== 선언 블록 ===
선언 블록은 괄호로 이루어진 선언들의 목록으로 이루어진다. 각 선언은 그 자체가 프로퍼티, [[쌍점]]({{code|code=:}}), 값으로 구성된다. 한 블록 안에 여러 선언이 있으면, [[쌍반점]] ({{code|code=;}}, 세미콜론)이 개개의 각 선언에 삽입되어야 하며,<ref>{{웹 인용|url=http://www.w3.org/TR/CSS21/syndata.html#q10 |제목=W3C CSS2.1 specification for rule sets, declaration blocks, and selectors |publisher=World Wide Web Consortium|date=7 June 2011 |accessdate=2009-06-20}}</ref> 단 하나의 선언이라도 세미콜론을 넣지 않으면 동작하지 않는 경우도 있다.

=== 원천 ===
CSS 정보는 다양한 원천으로부터 제공받을 수 있다. 이러한 원천으로는 [[웹 브라우저]], [[사용자]], [[제작자]]가 될 수 있다. [[제작자]]로부터의 정보는 더 나아가 인라인, 미디어 타입, 중요성, 셀렉터 특정, 규칙 순서, 상속, 프로퍼티 정의로 분류될 수 있다. CSS 스타일은 별도의 문서에 있을 수 있고, [[HTML]] 문서에 직접 추가할 수도 있다. 사용하는 화면 크기, 다크 모드 설정, 화면 방향 등에 따라 다른 스타일을 적용할 수 있다.
{| class="wikitable"
|+ CSS 우선 순위 스킴 (높은 순위에서 낮은 순위 순)
|-
! 우선도 !! CSS 원천의 종류 !! 설명
|-
| 1 || 중요성 || ‘{{code|lang=css|code=!important}}’을 프로퍼티 뒤에 추가하면<ref>예: {{code|lang=css|code=margin: 30px !important;}}</ref> 이후에
|-
| 2 || 인라인 || HTML 'style' 속성을 통해 HTML 요소에 적용되는 스타일
|-
| 3 || 미디어 타입 || 미디어 특정 CSS가 정의되어 있지 않다면 프로퍼티 정의는 모든 미디어 타입에 적용된다.
|-
| 4 || 사용자 정의 || 대부분의 브라우저가 접근성 기능을 갖추고 있다: 사용자 정의 CSS
|-
| 5 || 선택자 특정성 || 특정 컨텍스트 선택자({{code|lang=css|code=#heading p}})는 일반 정의를 덮어쓴다.
|-
| 6 || 규칙 순서 || 마지막으로 선언한 규칙이 가장 높은 우선 순위를 가진다.
|-
| 7 || 부모 상속 || 프로퍼티를 지정하지 않으면 부모 요소에 상속된다. 다만 그렇지 않은 프로퍼티도 있다.
|-
| 8 || HTML 문서 안에서의 CSS 프로퍼티 정의 || CSS 규칙 또는 CSS 인라인 스타일은 기본 브라우저 값을 덮어쓴다.
|-
| 9 || 브라우저 기본값 || 브라우저 기본값은 W3C 초기값 사양에 정의되어 있으며, 우선 순위가 가장 낮다.
|}

== 예제 ==
<syntaxhighlight lang="css">
p {
    font-size: 110%;
    font-family: garamond, sans-serif;
}
h2 {
    color: red;
    background: white;
}
.highlight {
    color: red;
    background: yellow;
    font-weight: bold;
}
#test_id {
    color: blue;
    background: white;
}
</syntaxhighlight>

== 같이 보기 ==
* [[HTML]]
* [[Acid3]]
* [[CSS1]]
* [[CSS2]]
* [[CSS3]]
* [[CSS4]]
* [[스타일러스 (브라우저 확장기능)]]: CSS편집을 통해 웹사이트를 사용자가 원하는 색상,모양으로 리디자인 가능하다.

== 각주 ==
<references />

== 외부 링크 ==
* {{언어링크|en}} [http://www.w3.org/Style/CSS/ W3C의 CSS 공식 사이트]
* [https://web.archive.org/web/20080821161609/http://css-validator.kldp.org/ KLDP의 한글화된 CSS 유효성 검사 서비스]
* [http://www.standardmag.org/ 스탠다드 매거진]
* {{언어링크|en}} [https://web.archive.org/web/20090815115941/http://www.css3.info/ CSS3 정보 블로그]
* [https://wiki.dcinside.com/wiki/CSS 디시위키 - CSS]
* {{언어링크|en}} [http://www.csszengarden.com/ CSS Zen Garden: CSS 기반 디자인에 대한 예제]
* [https://uncyclopedia.kr/wiki/%ED%98%BC%EB%8F%88 한국어 백괴사전의 혼돈 문서로 본 미디어위키 CSS활용법]

{{W3C 표준}}
{{웹 브라우저}}

[[분류:CSS]]
[[분류:W3C 표준]]
[[분류:스타일시트 언어]]
[[분류:웹 디자인]]

{{퍼온문서|CSS}}