편집토론문서 역사

CSS: 두 판 사이의 차이

(새 문서: CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 각 구성요소의 여백 및 폭/높이, 색상, 글꼴 등의 시각적인 효과를 주는 언어다. 확장자로는 <code>.css</code>를 사용한다. == 문법 == CSS는 기본적으로 다음과 같이 생겼다. <syntaxhighlight lang="css"> div.wiki#libre { padding: 10px; color: #663399; } </syntaxhighlight> 여기서 <code>div.wiki#libre</code>는 선택자(...)
 
편집 요약 없음
 
(같은 사용자의 중간 판 2개는 보이지 않습니다)
1번째 줄: 1번째 줄:
CSS는 Cascading Style Sheets의 약자로, [[웹 페이지]]의 각 구성요소의 여백 및 폭/높이, 색상, [[글꼴]] 등의 시각적인 효과를 주는 [[프로그래밍 언어|언어]]다. [[확장자]]로는 <code>.css</code>를 사용한다.
{{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 파일만 변경해도 전혀 다른 [[웹사이트]]처럼 꾸밀 수 있다.
CSS는 기본적으로 다음과 같이 생겼다.
 
<syntaxhighlight lang="css">
 
div.wiki#libre {
    padding: 10px;
    color: #663399;
}
 
</syntaxhighlight>
 
여기서 <code>div.wiki#libre</code>는 선택자(Selector)로, 해당 선택자에 맞는 요소에 스타일이 적용된다. 여기선 "div태그 중에 class가 wiki이고, id가 libre인 요소"를 의미한다. 중괄호(<code>{}</code>) 사이에는 속성(attribute) 이름과 값이 연속으로 나오는 데, 여기서 해당 요소에 어떤 속성을 지정하는 지를 표기한다.
 
최신 CSS(CSS3)에는 미디어 쿼리(Media Query) 및 애니메이션 등의 기능이 추가되어 문법이 다소 복잡해졌다.


=== 선택자 ===
현재 개발 중인 [[CSS3]]의 경우 [[그림자]] 효과, [[그라데이션]], 변형 등 [[그래픽 편집 프로그램]]으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 [[어도비 플래시]]를 어느 정도 대체하고 있다.
선택자는 CSS에서 "어떤 요소"에 스타일을 적용할 지를 표현하는 요소이다. 위의 예제코드에서 <code>div.wiki#libre</code>에 해당하는 부분이다. CSS에서 쓰는 선택자의 종류는 다음과 같다.


==== 기본 선택자 ====
== 역사 ==
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>


{| class="wikitable"
=== 버전의 변화 ===
! 문법
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를 표준으로 만들고 있다.
! 설명
|-
| <code>*</code>
| 모든 요소 선택
|-
| <code>Element</code>
| Element 요소 선택<br />
<small>div, body같은 태그 선택</small>
|-
| <code>#ID</code>
| 특정 ID를 가진 요소 선택
|-
| <code>.Class</code>
| 특정 클래스를 가진 요소 선택
|}


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


모든 요소를 선택한다. 함부로 사용하면 웹 페이지의 로딩 속도를 느리게 할 수 있으므로 꼭 필요할 때 사용한다.
==== [[CSS1]] ====
첫 CSS 규격은 공식 W3C 권고안이 되었으며 그 이름은 [[CSS1]]이다. [[1996년]] [[12월]]에 발표되었다.


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


div, body, span 같은 HTML 태그를 직접 선택한다. 지정하지 않고 아래의 선택자만 사용하면 모든 태그에 해당한다.
==== [[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]] 이외의 규격에까지 관여하는 내용으로 되어 있다. 현재 어떤 모듈도 권고안까지 이른 것은 없다.


<code>.Class</code>
==== [[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>


Class는 한 페이지당 여러 개의 요소를 선택할 수 있다.
== 문법 ==
CSS는 단순한 [[문법]]을 가지며, 수많은 영어 키워드를 사용하여 다양한 스타일의 프로퍼티의 이름을 규정한다.


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


ID는 HTML문서 한 곳에만 지정 할 수 있다. class와 달리 한 페이지의 한 요소에만 스타일 지정을 할 수 있다. class처럼 HTML페이지에 같은 ID 여러 개를 쓰면 맨 처음의 ID만 스타일 적용이 되고 그 다음은 무시되니 그 때는 class를 쓰자.
=== 선택자 ===
 
CSS에서 선택자, 또는 셀렉터({{Llang|en|Selector}})는 어느 부분의 마크업에 스타일을 적용할지 선언한다. 태그명(태그의 이름)과 클래스, ID로 선택할 수 있다. 클래스와 ID들은 [[대소문자]]를 구분하며 문자로 시작해야 하고 [[영숫자]]와 [[언더바]](_)를 포함할 수 있다. 클래스는 어떠한 요소의 어떠한 수의 인스턴스에도 적용할 수 있으며, ID는 하나의 요소에만 적용할 수 있다. ID 값은 앞에 #이 붙고, 클래스 값은 앞에 .이 붙는다.
==== 속성 선택자 ====
요소의 속성값은 <code><a href="#libre" target="_blank"></code>같은 태그가 주어줬을 때, <code>href</code>나 <code>target</code>같은 부분을 뜻한다. 단, <code>id</code>나 <code>class</code>는 (위에 나와있듯이) 따로 문법이 있다.
 
{| class="wikitable"
! 문법
! 설명
|-
| <code>[속성이름]</code>
| 특정 속성을 가진 요소 선택
|-
| <code>[속성이름='값']</code>
| 특정 속성값이 해당 값과 일치하는 요소 선택
|-
| <code>[속성이름^='값']</code>
| 특정 속성값이 해당 값으로 시작하는 요소 선택
|-
| <code>[속성이름$='값']</code>
| 특정 속성값이 해당 값으로 끝나는 요소 선택
|-
| <code>[속성이름*='값']</code>
| 특정 속성값에 해당 값이 들어 있는 요소 선택
|-
| <code>[속성이름~='값']</code>
| (여러 단어가 띄어쓰기로 구분된) 특정 속성값에 해당 값이 들어 있는 요소 선택
|-
| <code><nowiki>[속성이름|='값']</nowiki></code>
| 특정 속성값이 해당 값과 일치하거나 해당 값 + 하이픈(-)으로 시작하는 요소 선택
|}
 
==== 조합 선택자 ====
두 가지 이상의 선택자를 조합한다. 주로 특정 요소 다음에 오는 요소나, 자식 요소를 선택하는 데 쓴다.
 
{| class="wikitable"
! 문법
! 설명
|-
| <code>선택자1, 선택자2</code>
| 선택자1 또는 선택자2 선택
|-
| <code>선택자1선택자2</code>
| 선택자1과 선택자2를 동시에 만족하는 요소 선택
|-
| <code>선택자1 선택자2</code>
| 선택자1의 자식 요소 중 선택자2 요소 선택
|-
| <code>선택자1 > 선택자2</code>
| 선택자1의 바로 밑에 있는 자식 요소 중 선택자2 요소 선택
|-
| <code>선택자1 + 선택자2</code>
| 선택자1 바로 다음에 오는 선택자2 요소 선택
|-
| <code>선택자1 ~ 선택자2</code>
| 선택자1 다음에 오는 모든 선택자2 요소 선택
|}


==== 특수 선택자 ====
=== 선언 블록 ===
===== 가상 클래스 선택자 =====
선언 블록은 괄호로 이루어진 선언들의 목록으로 이루어진다. 각 선언은 그 자체가 프로퍼티, [[쌍점]]({{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> 단 하나의 선언이라도 세미콜론을 넣지 않으면 동작하지 않는 경우도 있다.


=== 속성 정의 ===
=== 원천 ===
선택자로 선택한 요소를 "어떻게 보일지"를 정의하는 부분이다. 문법은 <code>속성: 값;</code>의 연속으로 구성되어 있다.
CSS 정보는 다양한 원천으로부터 제공받을 수 있다. 이러한 원천으로는 [[웹 브라우저]], [[사용자]], [[제작자]]가 될 수 있다. [[제작자]]로부터의 정보는 더 나아가 인라인, 미디어 타입, 중요성, 셀렉터 특정, 규칙 순서, 상속, 프로퍼티 정의로 분류될 수 있다. CSS 스타일은 별도의 문서에 있을 수 있고, [[HTML]] 문서에 직접 추가할 수도 있다. 사용하는 화면 크기, 다크 모드 설정, 화면 방향 등에 따라 다른 스타일을 적용할 수 있다.
 
==== 단위 ====
CSS의 값에는 뒤에 단위가 붙는 경우가 있다. CSS에서 사용할 수 있는 단위는 다음과 같다.
 
===== 길이(절대값) =====
{| class="wikitable"
{| class="wikitable"
! 단위
|+ CSS 우선 순위 스킴 (높은 순위에서 낮은 순위 순)
! 이름
! 길이
|-
| <code>cm</code>
| 센티미터
| 1cm = 96px / 2.54
|-
| <code>mm</code>
| 밀리미터
| 1mm = 1cm의 1/10
|-
| <code>q</code>
| 쿼터-밀리미터
| 1q = 1cm의 1/40
|-
| <code>in</code>
| 인치
| 1in = 2.54cm = 96px
|-
|-
| <code>pc</code>
! 우선도 !! CSS 원천의 종류 !! 설명
| 피카
| 1pc = 1인치의 1/6
|-
|-
| <code>pt</code>
| 1 || 중요성 || ‘{{code|lang=css|code=!important}}’을 프로퍼티 뒤에 추가하면<ref>예: {{code|lang=css|code=margin: 30px !important;}}</ref> 이후에
| 포인트
| 1pt = 1인치의 1/72
|-
|-
| <code>px</code>
| 2 || 인라인 || HTML 'style' 속성을 통해 HTML 요소에 적용되는 스타일
| 픽셀
| 1px = 1인치의 1/96
|}
 
===== 길이(상대값) =====
{| class="wikitable"
! 단위
! 길이
|-
|-
| <code>%</code>
| 3 || 미디어 타입 || 미디어 특정 CSS가 정의되어 있지 않다면 프로퍼티 정의는 모든 미디어 타입에 적용된다.
| 부모 요소에서 퍼센트 값
|-
|-
| <code>em</code>
| 4 || 사용자 정의 || 대부분의 브라우저가 접근성 기능을 갖추고 있다: 사용자 정의 CSS
| 요소의 글자크기
|-
|-
| <code>ex</code>
| 5 || 선택자 특정성 || 특정 컨텍스트 선택자({{code|lang=css|code=#heading p}})는 일반 정의를 덮어쓴다.
| x-높이 (알파벳 x의 글자크기 기준)
|-
|-
| <code>ch</code>
| 6 || 규칙 순서 || 마지막으로 선언한 규칙이 가장 높은 우선 순위를 가진다.
| 0 (숫자 영)의 글자폭
|-
|-
| <code>rem</code>
| 7 || 부모 상속 || 프로퍼티를 지정하지 않으면 부모 요소에 상속된다. 다만 그렇지 않은 프로퍼티도 있다.
| 루트 요소의 글자크기
|-
|-
| <code>vw</code>
| 8 || HTML 문서 안에서의 CSS 프로퍼티 정의 || CSS 규칙 또는 CSS 인라인 스타일은 기본 브라우저 값을 덮어쓴다.
| 뷰포트의 폭 1%
|-
|-
| <code>vh</code>
| 9 || 브라우저 기본값 || 브라우저 기본값은 W3C 초기값 사양에 정의되어 있으며, 우선 순위가 가장 낮다.
| 뷰포트의 높이 1%
|-
| <code>vmin</code>
| 뷰포트의 좁은 쪽 1%
|-
| <code>vmax</code>
| 뷰포트의 넓은 쪽 1%
|}
|}


===== 기타 =====
== 예제 ==
* 각도에선 <code>deg</code>(원=360deg),<code>grad</code>(원=400grad),<code>rad</code>(원=2πrad),<code>turn</code>(원=1turn)을 사용한다.
* (애니메이션 등에서 쓰이는) 시간의 단위로는 <code>s</code>(초)와 <code>ms</code>(밀리초)가 있다.
* 주기를 나타내는 단위로 <code>Hz</code>와 <code>kHz</code>가 있다.
 
==== 색상 ====
CSS에선 색상을 나타내는 표기법이 여러 가지 있다.
* 16진법 표기: <code>#A2CCA3</code>, '#' 이후에 두 글자씩 각각 Red, Green, Blue를 나타낸다. 이 표기법이 가장 자주 쓰인다. 만약 <code>#AABBCC</code> 각각의 [[RGB]] 값이 모두 같은 두 글자라면 <code>#ABC</code>와 같이 줄여서 작성 할 수도 있다.
* 10진법 RGB 표기: <code>rgb(162, 204, 163)</code>, 세 숫자가 각각 Red, Green, Blue를 나타낸다.
* 10진법 % 표기: <code>rgb(64%, 80%, 64%)</code>, 위와 같으나 백분율을 사용해 표기한다.
* HSL 표기: <code>hsl(119, 29%, 72%)</code>, 세 숫자가 각각 Hue(색조), Saturation(채도), Lightness(명도)를 나타낸다.
* HSV 표기: <code>hsv(119, 21%, 80%)</code>, 세 숫자가 각각 Hue(색조), Saturation(채도), Value(명도)를 나타낸다. HSL과 차이가 있음에 유의할 것.
* 색상 이름: <code>lightgreen</code>, 직접 색상의 이름을 넣을 수 있다. 전체 색상 목록은 [http://www.w3.org/TR/css3-color/#svg-color CSS 스펙 문서]를 참고할 것.
 
CSS3엔 알파 값(투명도) 개념이 추가되어서, RGB/HSL/HSV의 4번째 값에 알파 값을 쓸 수 있다. 단, 앞에 소문자 a를 붙여야 하며, 0은 완전 투명, 1은 불투명이다. (예: <code>rgba(162, 204, 163, 0.8)</code>) 16진수 표기법에서는 뒤에 투명도를 두글자로 적으면 된다. (<code>#AABBCCDD</code>의 형식)
 
=== 미디어 쿼리(Media query, @media) ===
CSS3에 새로 추가된 기능으로, 특정 기기나 해상도 등에 따라 다른 효과를 줄 때 사용하며, 반응형 웹 디자인의 핵심 기능 중 하나이다. CSS 내에서 미디어 쿼리를 사용한 문법은 다음과 같다.
 
<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
 
p {
@media screen and (min-width: 768px) {
    font-size: 110%;
     div.wiki#libre {
     font-family: garamond, sans-serif;
        font-size: 10pt;
}
     }
h2 {
    color: red;
     background: white;
}
}
 
.highlight {
</syntaxhighlight>
     color: red;
 
     background: yellow;
또한, <code><link></code>태그로 CSS를 적용할 때에도 <code>media</code>속성에 미디어 쿼리를 다음과 같이 사용할 수 있다.
     font-weight: bold;
 
<syntaxhighlight lang="html5">
 
<link rel="stylesheet" media="screen and (min-width: 768px)" href="stylesheet.css" />
 
</syntaxhighlight>
 
=== 웹 폰트 (@font-face) ===
CSS3에 새로 추가된 기능으로, 현재 컴퓨터(또는 스마트폰)에 설치되어 있지 않은 글꼴을 내려받아 적용하는 기능이다. 파일 형식으로는 <code>woff2</code>, <code>woff</code>를 주로 쓰며, 구형 브라우저를 위해 <code>ttf</code>, <code>svg</code>, <code>eot</code>도 쓰인다. 웹 폰트는 다음과 같이 사용한다.
 
<syntaxhighlight lang="css">
 
@font-face {
     font-family: 'LibreWiki Font'; /* 글꼴의 이름 */
     src: url('webfont.eot'); /* IE9 */
     src: local('LibreWiki Font'), /* 해당 글꼴이 이미 설치되어 있으면 그걸 사용한다. */
        url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6 - IE8 */
        url('webfont.woff2') format('woff2'), /* WOFF 2.0 */
        url('webfont.woff') format('woff'), /* WOFF 1.0 */
        url('webfont.ttf')  format('truetype'), /* 트루타입 */
        url('webfont.svg#svgFontName') format('svg'); /* 구형 iOS */
}
}
 
#test_id {
div.wiki#libre {
     color: blue;
     font-family: 'LibreWiki Font', sans-serif;
    background: white;
}
}
</syntaxhighlight>
</syntaxhighlight>


== 웹 페이지에 적용 ==
== 같이 보기 ==
작성한 CSS를 [[HTML]] 웹 페이지에 적용하는 방법은 다음과 같이 크게 세 가지가 있다.
* [[HTML]]
* 인라인 스타일 : 해당 요소의 style속성에 직접 입력하는 방법. !important를 빼고 중요도가 가장 높은데 인라인 속성에 <code>background:black</code>이 지정되면 내부 스타일에서 지정한 <code>background:white</code>가 무시된다.
* [[Acid3]]
* 내부 스타일 : CSS를 <code><style></code>태그 안에 넣는 방법. 인라인 스타일 다음으로 중요도가 높다.
* [[CSS1]]
* 외부 스타일 : 외부 파일로 만들어 <code><link rel="stylesheet" href="(주소)"></code>태그를 적용하는 방법. 중요도가 가장 낮다.
* [[CSS2]]
 
* [[CSS3]]
최근에는 HTML의 용량을 줄이기 위해 CSS와 HTML을 분리하는 경향이 많아져 내부 스타일 보다는 외부 스타일을 더 많이 쓴다.
* [[CSS4]]
 
* [[스타일러스 (브라우저 확장기능)]]: CSS편집을 통해 웹사이트를 사용자가 원하는 색상,모양으로 리디자인 가능하다.
== [[전처리기]] ==
CSS가 가지고 있는 한계를 극복하기 위해 기존 CSS에 없는 문법과 기능(예를 들면, 변수나 산술식, 상속 등)을 추가한 언어를 만들어, 이를 CSS로 출력하는 프로그램을 만들어 쓰는데, 이를 가리켜 CSS 전처리기(Preprocessor)라고 한다.
 
=== Sass/SCSS ===
[http://sass-lang.com/ Sass 공식 홈페이지]
Hampton Catlin이 만들었다. 공식 구현체는 [[루비]]로 작성했으나, [[C++]]구현체인 [https://github.com/sass/libsass libsass]가 나오면서 이를 이용해 [[파이썬]]([https://github.com/dahlia/libsass-python libsass-python])이나 [[Node.js]]([https://github.com/sass/node-sass node-sass])등에서도 사용할 수 있다.
SCSS는 CSS와 같은 중괄호 문법을, Sass는 파이썬과 같은 들여쓰기 문법을 사용한다.
현재 Bootstrap과 Foundation에서 쓰고 있다.


=== Less ===
== 각주 ==
[http://lesscss.org/ Less 공식 홈페이지]
<references />
Alexis Sellier가 만들었다. 최초엔 루비로 작성했으나, 이후 [[자바스크립트]]로 대체했다., 서버측(Node.js나 Rhino)뿐만 아니라, 클라이언트측(웹 브라우저)에서 직접 사용할 수 있다.
Bootstrap에서 쓰고 있었으나, 버전 4 이후로 Sass로 바꿨다.


=== Stylus ===
== 외부 링크 ==
[https://learnboost.github.io/stylus/ Stylus 공식 홈페이지]
* {{언어링크|en}} [http://www.w3.org/Style/CSS/ W3C의 CSS 공식 사이트]
문법을 상당히 간소화 시켜서, 중괄호는 물론, 콜론도 세미콜론도 필요없다. [[Node.js]]에서 돌아간다.
* [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 표준}}
* [https://developer.mozilla.org/en-US/docs/Web/CSS CSS 문서 모음 (MDN)]
{{웹 브라우저}}
* [http://www.w3schools.com/css/default.asp W3Schools/CSS]


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


{{퍼온문서|CSS|||리브레 위키|https://librewiki.net/wiki/CSS}}
{{퍼온문서|CSS}}

2023년 9월 16일 (토) 06:44 기준 최신판

HTML
비교
CSS
개념
철학
도구
비교

종속형 시트 또는 캐스케이딩 스타일 시트(영어: Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(영어: Style sheet language 스타일 시트 랭귀지[*])로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이고, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 기본 파일명[2]은 style.css이다.

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

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

역사[편집 | 원본 편집]

CSS는 1994년 10월 10일, 하콤 비움 리(Håkon Wium Lie)가 처음 제안하였다.[3]

버전의 변화[편집 | 원본 편집]

CSS는 지속적으로 새로운 버전이 나오고 있다. 1996년에 도입된 CSS 1은 CSS의 바탕이 되었다. CSS의 표준으로는 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일 이후 개발 중에 있다.[4] W3C CSS3 로드맵은 요약과 도입부를 제공하고 있다.[5] 전체가 모듈화되어 사용자 에이전트가 모듈에 대한 모든 모듈을 지원하지 않거나 자유롭게 선택할 수 있도록 하고 있으며, 다른 세로 글쓰기와 HTML 이외의 규격에까지 관여하는 내용으로 되어 있다. 현재 어떤 모듈도 권고안까지 이른 것은 없다.

CSS4[편집 | 원본 편집]

하나의 통합된 CSS4 사양은 없는데,[6] 이는 여러 개의 모듈로 나뉘어 있는데 기인한다. 그러나 "레벨 4" 모듈들이 존재한다.[7]

문법[편집 | 원본 편집]

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

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

선택자[편집 | 원본 편집]

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

선언 블록[편집 | 원본 편집]

선언 블록은 괄호로 이루어진 선언들의 목록으로 이루어진다. 각 선언은 그 자체가 프로퍼티, 쌍점(:), 값으로 구성된다. 한 블록 안에 여러 선언이 있으면, 쌍반점 (;, 세미콜론)이 개개의 각 선언에 삽입되어야 하며,[8] 단 하나의 선언이라도 세미콜론을 넣지 않으면 동작하지 않는 경우도 있다.

원천[편집 | 원본 편집]

CSS 정보는 다양한 원천으로부터 제공받을 수 있다. 이러한 원천으로는 웹 브라우저, 사용자, 제작자가 될 수 있다. 제작자로부터의 정보는 더 나아가 인라인, 미디어 타입, 중요성, 셀렉터 특정, 규칙 순서, 상속, 프로퍼티 정의로 분류될 수 있다. CSS 스타일은 별도의 문서에 있을 수 있고, HTML 문서에 직접 추가할 수도 있다. 사용하는 화면 크기, 다크 모드 설정, 화면 방향 등에 따라 다른 스타일을 적용할 수 있다.

CSS 우선 순위 스킴 (높은 순위에서 낮은 순위 순)
우선도 CSS 원천의 종류 설명
1 중요성 ‘!important’을 프로퍼티 뒤에 추가하면[9] 이후에
2 인라인 HTML 'style' 속성을 통해 HTML 요소에 적용되는 스타일
3 미디어 타입 미디어 특정 CSS가 정의되어 있지 않다면 프로퍼티 정의는 모든 미디어 타입에 적용된다.
4 사용자 정의 대부분의 브라우저가 접근성 기능을 갖추고 있다: 사용자 정의 CSS
5 선택자 특정성 특정 컨텍스트 선택자(#heading p)는 일반 정의를 덮어쓴다.
6 규칙 순서 마지막으로 선언한 규칙이 가장 높은 우선 순위를 가진다.
7 부모 상속 프로퍼티를 지정하지 않으면 부모 요소에 상속된다. 다만 그렇지 않은 프로퍼티도 있다.
8 HTML 문서 안에서의 CSS 프로퍼티 정의 CSS 규칙 또는 CSS 인라인 스타일은 기본 브라우저 값을 덮어쓴다.
9 브라우저 기본값 브라우저 기본값은 W3C 초기값 사양에 정의되어 있으며, 우선 순위가 가장 낮다.

예제[편집 | 원본 편집]

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;
}

같이 보기[편집 | 원본 편집]

각주[편집 | 원본 편집]

  1. ↑ “CSS developer guide”. 《Mozilla Developer Network》. 2015년 9월 24일에 확인함. 
  2. ↑ HTML의 index.html과 같은 것
  3. ↑ Lie, Hakon W (1994년 10월 10일). “Cascading HTML style sheets - a proposal” (Proposal) (0.92). CERN. 2014년 5월 25일에 확인함. 
  4. ↑ W3C: CSS: under construction, CSS 3
  5. ↑ Introduction to CSS3, W3C Working Draft, 23 May 2001
  6. ↑ Atkins Jr, Tab. “A Word About CSS4”. 2012년 10월 18일에 확인함. 
  7. ↑ “W3C CSS Selectors Level 4”. W3.org. 2014년 5월 30일에 확인함. 
  8. ↑ “W3C CSS2.1 specification for rule sets, declaration blocks, and selectors”. World Wide Web Consortium. 2011년 6월 7일. 2009년 6월 20일에 확인함. 
  9. ↑ 예: margin: 30px !important;

외부 링크[편집 | 원본 편집]

월드 와이드 웹 컨소시엄 (W3C)
제품 및 표준
권고
참고
작업 중인 초안
가이드라인
이니셔티브
과거
조직
소프트웨어
콘퍼런스
Wikipedia-ico-48px.png
이 문서는 한국어 위키백과의 CSS 문서에서 분기하였습니다.
  • 이 문서는 2023년 9월 16일 (토) 06:44에 마지막으로 편집되었습니다.
  • 별도로 명시하지 않은 경우, 내용은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0에 따라 사용할 수 있습니다.

    케이이음 유한회사 | 대표이사: 윤승현 사장 | 사업자등록번호:441-88-02454 | 서울 가산 본사: 서울특별시 금천구 가산디지털1로 168, C동 4층 402호 | 통신판매업신고:제 2023-서울금천-2368호 | 소프트웨어사업자: B24-293672 | 본사 전화번호:070-8835-9610 | 본사 팩스번호:070-7966-1610 | E-Mail: enxgmp@theeum.com
    가급적 문의는 메일로 부탁드립니다. 재택근무가 상시로 이루어지기에 전화연결이 어렵습니다.