HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.
각기 다른 사용자 환경에서 동일한 형태의 문서를 제공한다는 이점도 있다. CSS로 만들어진 문서는 사용자들의 브라우저 환경에 따라 홈페이지가 다르게 나타나는 일이 없고 어느 환경에서나 제작자가 의도한대로 그 효과가 전달된다.
CSS 또는 캐스케이딩 스타일 시트(Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.
목차[숨기기] |
[편집]CSS 버전의 변화
CSS는 지속적으로 새로운 버전이 나오고 있다. 1996년에 도입된 CSS 1은 CSS의 바탕이 되었다. CSS의 표준으로는CSS 2.1이 있으며 이전 버전에 비하여 새로운 기능과 도구가 추가되었다. 대다수의 웹브라우저는 CSS 2.1를 잘 지원한다.(인터넷 익스플로러의 경우, 버전 7이 되면서 CSS2.1을 지원한다.) 현재 W3C에서는 CSS3을 표준으로 만들고 있다.
CSS는 여러 수준과 프로파일을 가지고 있다. 각 수준의 CSS는 일반적으로 새로운 기능을 담고 있으며 CSS1, CSS2, CSS3로 나뉜다. 프로파일들은 일반적으로 특정한 장치나 사용자 인터페이스를 위해 만들어진 하나 이상 수준의 CSS의 하부 집합이다. 현재 휴대용 장치, 프린터, 텔레비전 수상기를 위한 프로파일들이 있다.
[편집]CSS1
첫 CSS 규격은 공식 W3C 권고안이 되었으며 그 이름은 CSS1이다. 1996년 12월에 출시되었다.
[편집]CSS2
CSS2는 W3C가 개발하였으며 1998년 5월에 권고안으로 출시되었다.
[편집]CSS3
CSS3는 2005년 12월 5일 이후 개발 중에 있다.[1] W3C CSS3 로드맵은 요약과 도입부를 제공하고 있다.[2] 전체가 모듈화 되어 사용자 에이전트가 모듈에 대한 모든 모듈을 지원하지 않거나 자유롭게 선택할 수 있도록 하고 있으며, 다른 세로 글쓰기와 HTML 이외의 규격에 까지 관여하는 내용으로 되어 있다. 현재 어떤 모듈도 권고안까지 이른 것은 없다.
[편집]같이 보기
[편집]주석
[편집]바깥 고리
Cascading Style Sheets (CSS, 캐스케이딩 스타일 시트, CSS 스타일 시트)는 HTML 이나 XML 요소를 어떻게 수식 (표시)하거나 지시하는 W3C 에 의한 사양의 하나. 문서의 구조 와 체계 를 분리 시킨다는 이념을 실현하기 위해 제창되었다 스타일 시트 의 구체적인 사양의 하나.
CSS는 HTML로 표현 가능하다고 생각되는 디자인의 대부분을 실현할 수있는 요소를 도입하면서, 새로운 디자인 기능을 갖춘다. 또한 다음과 같은 특징을 가진다.
- 페이지를 표시하는 미디어에 맞는 스타일 시트를 전환하면 미디어 당을 변화시킬 수있다
- 사용자 에이전트 (대부분의 경우 웹 브라우저 ), 웹사이트 제작자, 사용자가 각각 정의한 CSS가 가져오는 효과를 쌓는다 (캐스케이드) 할 수
그러나 확장 및 수정이 계속되고있다 CSS 사양 모두를 완전하게 구현하는 사용자 에이전트는 사실상 전혀 없다고 잘 실제 점유율 다수를 차지하는 사용자 에이전트는 부분 대응에 불과하다. 그러나 실용상 지장이없는 수준 구현되어 왔으며, 게다가 표현 서로 호환성도 고려되고있다.
CSS는 1994 년 에 WWW 탄생 지인 CERN 에 근무하는 하콘 위우무 리 씨에 의해 제창되었다.
목차[ 숨기기 ] |
작성 [ 편집 ]
스타일 정보는 읽을 내용 (작성자 스타일 시트)와 사용자 에이전트 설정 (스타일 시트)의 두 군데에 기재할 수있다. 또한 사용자 에이전트가 자신의 스타일 (기본 스타일 시트)를 가지고있다.
만든 스타일 시트는 태그 문서에 직접 작성하거나 다른 문서로로드하는 형태로 이용된다. CSS의 편의를 최대한 발휘하기 위해, 다른 문서로로드하는 것이 추천되고있다.
작성 방법 [ 편집 ]
여기에서 CSS Level 2에 대해 설명한다. CSS의 문법은 다른 레벨 사이에서도 호환성을 갖도록 설계되었으며, 예를 들어 CSS Level 1로 작성된 스타일 시트를 CSS Level 2로 취급도 가능하다 (단 일부 해석의 차이 등 에 따른 호환성 부분도 존재한다). CSS는 요소에 스타일을주기 위하여 다음과 같은 사양이 정해져있다.
다음 CSS 조각을 예로 들면.
p # id { color : # ff3300 }
- "{"부터 "}"까지의 부분을 선언 블록 이라는
- "p # id"를 선택 (선택자)라고 스타일이 적용되는 대상을 나타내는
- 선언 블록과 선택을 맞춰 규칙 집합 이라는
- "color : # ff3300"부분을 선언 한다
- 선언에서 ":"이전 (위 예제에서는 "color")를 속성 (특성)는
- 선언에서 ":"다음 (위 예제에서는 "# ff3300")를 값을 는
위에 예제 CSS 조각을 적용하겠다고 선언하고있는 문서 중 선택이 지정하는 것과 일치하는 부위 (HTML 문서에서 요소 요소의 부모와 자식 관계, 특정 클래스 ID)에 선언 블록 의 선언이 적용된다. 선언은 "속성 : 값"또는 "하늘 (아무것도 쓰지 않는다)"중 하나로 구성되어 속성 ":"값 앞뒤에 공백 문자 (공백, 탭, 개행)를 자유롭게 넣어져 또한 ";"으로 구분하여 선언 나란히 쓸 수있다.
위에 예제는 HTML 문서에 적용하려면 "id라는 ID를 가진 p 요소의 글자색을 빨간색 FF (= 255), 녹색 33 (= 51), 파랑 0하라"는 지정을 의미한다.
color : # ff3300 ; width : 35 %
color : "# 0033ff" ; width : '53 % '
이러한 선언이 있었을 때, 후자 두가지는 ""와 ''를 붙여 때문에 부정하다. 왜냐하면, ""나 '안에있는 것은 문자열로 취급되고 color 속성이 취할 수있는 색상 값 (# rrggbb, rgb (0-255], [0-255], [0-255) 또는 black과 red와 같은 키워드 등)가 없기 때문이다.
p # id { color : # ff3300 } p # id { font-size : 24px }
은
p # id { color : # ff3300 ; font-size : 24px }
와 동일하다. ;은 전자와 같이 선언을 선택기에 하나씩 써있는 것을 하나의 선택 블록 작성할 때 선언을 나누는데 사용한다. 따라서 반드시 선언;를 붙이는 것을 강제하는 것은 아니다.
선택기 구현 수준 높은 브라우저라면 어떤 속성도 CSS를 적용하는 것이 가능하며,이 경우 ID에 대한 속성 선택이기 때문에, # id는 [id = "id"]와 동일하다 . 선택기 간단한 매칭이 가능하다. 다른 HTML 태그에 적용 문서 구조에서 본 아이 · 남매 구조에 적용 선택, 나아가서는 링크와 동적 표현과 언어에 대한 의사 클래스 (: link, : hover, : lang) 등이있다.
우선 순위 [ 편집 ]
CSS는 반드시 한 곳에서 고유하게 지정할 수 않으므로 지정 내용 충돌을 피하기 위해 우선 순위가 사용자 에이전트에 의해 계산된다. 그 결과는 다음과 같은 조건에 따라 산출된다.
- 만든 스타일 시트는 사용자 스타일 시트보다 우선합니다.
- 기본 스타일 시트는 다른 스타일 시트를 우선
- 가장 중요한 지정하는 선언은 CSS가 만든 스타일 시트보다 우선 (CSS1에서는 반대)
- 외부에서 가져온 것은 가져온 대상 정리해 취급
- 상세도에 따라 정리
- 그 선택에 지정된 위치를 고유하게 결정되는 것 (ID의 종류)이 많은 분들을 우선하는
- ID의 종류에 의한 우선 순위가 같은 경우는 속성과 유사 클래스의 수가 많은 쪽을 우선하는
- 그래도 우선 순위가 같을 경우 요소의 수가 많은 쪽을 우선하는
- 그래도 아직 우선 순위가 동일한 경우 제작자 스타일 시트에서 아래의 순서로 우선하는
- 인라인 것
- 외부에서 온
- HTML의 align 속성과 같은 CSS 이외에 의하면 스타일 지정은 해당하는 CSS의 스타일 지정이 제작자 스타일 시트의 시작에있는 것으로 취급한다. 그러나 이러한 내용도 가장 낮은 것으로한다 (CSS1에서는 요소 이름에 의한 지정을 하나만 포함한 셀렉터와 같은 세부 사항 수준)
설명 가능한 방법은 다음과 같다 일반적으로 선호하는 순위로 정렬한다 (CSS2에 가장 중요한 지정의 우선 순위 사양이 변경되고, 권고 6 장 4).
- 사용자 스타일 시트 중 가장 중요한 지정된 선언 - 사용자 에이전트 설정 스타일에! important를 선언 추가하기
- 만든 스타일 시트 중 가장 중요한 지정된 선언 - 작성자가 내용에 부수시킨 스타일에! important를 선언에 추가한다.
- 만든 스타일 시트의 일반 선언
- 사용자 스타일 시트의 일반 선언
- 기본 스타일 시트 선언
만든 스타일 시트를 작성하는 방법에 의한 우선 순위는 다음과 같다.
- 특정 요소에 스타일을 설명하는
- HTML과 XML의 헤더 부분에 그 페이지 전체를 대상으로 스타일을 정의하는
- CSS만을 설명하는 외부 파일을 준비하고, HTML 파일의 헤더 부분에서 링크되어 스타일을 참조하는
권고 등 [ 편집 ]
CSS 사양은 수준이라는 단계를 갖고, 2011 년 11 월 단계에서, Level 1에서 Level 4까지 사양이 공개되고있다.
Cascading Style Sheets, level 1 (CSS1) 권고 1996 년 12 월 [ 편집 ]
박스 모델의 참고 그림
여백
국경
패딩
내용
패딩
국경
여백
박스에 width 속성을 설정했을 때, W3C 의 박스 모델은 내용의 가로로 해석된다. 그리고 패딩과 보더 분 너비 요소의 너비에 추가된다.
한편 마이크로 소프트 박스 모델은 width 속성은 내용의 너비와 패딩과 보더 분을 더한 것, 즉 요소 모든 가로된다 [1] . 따라서 Internet Explorer5.5 이하와 6.0 이상 및 Internet Explorer 이외의 Web 브라우저에 표시 차이를 접근하기 위해서는 패딩과 보더를 0으로 또는 CSS 핵 을 사용해야합니다.
Internet Explorer 6에서는 DOCTYPE이 정확하다면 표준 모드로 전환 가능 (단 XML이나 XHTML의 경우 XML 선언을 사양대로 쓰면 과거 호환 모드 로 렌더링되는 버그가있다).
Cascading Style Sheets, level 2 (CSS2), 권고 1998 년 5 월 [ 편집 ]
CSS2는 CSS1의 상위 호환. 몇 가지 개념을 추가 · 확대 · 개정이 이루어졌다.
구체적으로 표시 매체 (모니터와 TV, 종이 매체 등)에 따라 자동으로 스타일 시트를 변경할 수 있도록하고 그에 부수하여 음성 브라우저 에 대한 대응, 인쇄 매체에 대한 대응이 이루어 글꼴 등의 표시 기능을 확장하고 상자 개념의 수정이 이루어졌다.
그러나 2002 년경 이후에 발표된 CSS 지원 UA에서이를 사양으로 간주하고있는 것은 존재하지 않고, 실질적으로 CSS2.1의 사양 역할을 맡긴 모양으로되어있다. CSS2 권고 사양에 액세스하면 CSS2 관리되지 않고 사양 참조 및 구현은 CSS 2.1을 기반으로하라고 장려하는주의 사항이있다.
Cascading Style Sheets, level 2 revision 1 (CSS 2.1), 권고 2011 년 6 월 [ 편집 ]
CSS2의 개정판. CSS2 규격의 정의가 불명확 있었기 때문에 각 사용자 에이전트 CSS2 구현 비호 환성 문제가 발생했기 때문에, 애매한 설명을 명확하게하는 등의 개정이 이루어졌다. 또한 text-shadow 속성과 같이 CSS2에 책정되어 있으면서 오랫동안 구현이 이뤄지지 않은 것, display 속성 run-in 값을 여러 사용자 에이전트 상호 운용성을 확보하지 못한 기능이 제거됩니다. 그들은 CSS3 이후 수준에서 정의된 다시하게된다.
CSS 구현시 업체는 2002 년경부터 CSS2.1를 기본 사양으로 간주하고있다.
Cascading Style Sheets, level 3 (CSS3) [ 편집 ]
CSS3 이후 전체가 모듈화 되어 사용자 에이전트가 모듈을 지원하는 어떤 모듈을 지원하지 않거나 자유롭게 선택할 수 있도록하는 다른 세로 서 자와 HTML 이외의 규격에까지 관여 내용과 되고있다. 2011 년 11 월 현재 권고되고있는 모듈은 다음과 같다.
- CSS Color Module Level 3 , 추천 2011 년 6 월
- Selectors Level 3 , 추천 2011 년 9 월
- CSS Namespaces Module Level 3 , 추천 2011 년 6 월
Cascading Style Sheets, Level 4 (CSS4) [ 편집 ]
CSS4는 CSS3와 마찬가지로 모듈화된있다. CSS4 모듈 추가하는 기능은 CSS3 정의되지 않은했던 새로운 기능 외에도 CSS3 모듈에 한 번 포함되면서 상호 운용성을 충분히 확보하지 못하고 사양에서 생략 기능으로 구성된다. 2011 년 11 월 현재, 셀렉터 사양 Level 4가 유일한 공개 초안으로 공개되고있다.
이 절은 집필 합니다. 가필 정정 해 주시 협력자를 찾고 있습니다 .각주 · 출전 [ 편집 ]
관련 항목 [ 편집 ]
외부 링크 [ 편집 ]
- W3C
- 권고 노트의 비공식 일본어 번역
- 웹 브라우저
- 기타
- W3C CSS 검사 서비스
- CSS2 tests by Peter-Paul Koch
- Box model hack
- Another box model workaround
- CSS Panic Guide - a fast resource
- CSS-discus wiki - A wiki dedicated to CSS
- Acid2 Test
'Development > CSS' 카테고리의 다른 글
| CSS - 버튼 (0) | 2012.05.14 |
|---|---|
| CSS - 정리 (0) | 2012.05.13 |
| CSS - em 단위 (0) | 2012.05.13 |
| CSS - 글자 레이아웃 속성 (0) | 2012.05.12 |
| CSS - background-repeat (0) | 2012.05.10 |
