CSS

CSS
계단식 스타일 시트(CSS)
최신 버전 CSS 3의 공식 로고
CSS 소스 코드의 예
파일 확장자
아, 아.
인터넷 매체 유형
텍스트/
UTI(Uniform Type Identifier)공공의
개발자 :월드 와이드컨소시엄 (W3C)
초기출시1996년 12월 17일; 26년 전 (1996-12-17)
최신판
CSS 2.1 : 레벨 2 개정판 1
2016년 4월 12일; 7년 전 (2016-04-12)
형식 유형스타일시트언어
의 컨테이너HTML 요소(태그)에 대한 스타일 규칙
포함:HTML 문서
오픈 포맷?네.
웹사이트www.w3.org/TR/CSS/ #

CSS(Cascading Style Sheets)는 HTML 또는 XML과 같은 마크업 언어(SVG, MathML 또는 XHTML과 같은 XML 방언 포함)로 작성된 문서의 프레젠테이션을 설명하는 데 사용되는 스타일시트 언어입니다.[1] CSS는 HTML 및 자바스크립트와 함께 월드 와이드 웹의 초석 기술입니다.[2]

CSS는 레이아웃, 컬러, 폰트콘텐츠와 프레젠테이션을 분리할 수 있도록 설계되었습니다.[3]이렇게 분리하면 콘텐츠 접근성을 향상시킬 수 있고, 프레젠테이션 특성 명세에 있어 더 많은 유연성과 제어력을 제공할 수 있으며, 구조적 콘텐츠의 복잡성과 반복성을 줄이는 별도의 .css 파일에 관련 CSS를 지정하여 여러 웹 페이지가 포맷을 공유할 수 있도록 하며, 를 활성화할 수 있습니다.파일을 공유하는 페이지와 그 포맷 사이의 페이지 로드 속도를 향상시키기 위해 캐시될 css 파일.

포맷과 콘텐츠를 분리하면 화면, 인쇄, 음성(음성 기반 브라우저 또는 화면 판독기를 통해), 점자 기반 촉각 장치에서 동일한 마크업 페이지를 다른 스타일로 표시할 수 있습니다.CSS에는 콘텐츠가 모바일 장치에서 액세스되는 경우 대체 포맷에 대한 규칙도 있습니다.[4]

계단식 이름은 두 개 이상의 규칙이 특정 요소와 일치할 경우 적용되는 스타일 규칙을 결정하기 위해 지정된 우선 순위 체계에서 가져온 것입니다.이 계단식 우선 순위 체계는 예측 가능합니다.

CSS 사양은 월드 와이드컨소시엄(W3C)에서 유지합니다.인터넷 매체 유형(MIME 유형)text/css는 RFC 2318 (1998년 3월)에 의해 CSS에 사용하기 위해 등록되었습니다.W3C는 CSS 문서에 대한 무료 CSS 검증 서비스를 운영하고 있습니다.[5]

HTML 이외에도 XHTML, 평 XML, SVG, XUL을 포함한 다른 마크업 언어들도 CSS의 사용을 지원합니다.CSS는 GTK 위젯 툴킷에서도 사용됩니다.

구문

CSS는 단순한 구문을 가지고 있으며 여러 영어 키워드를 사용하여 다양한 스타일 속성의 이름을 지정합니다.

스타일시트

스타일 시트는 규칙 목록으로 구성됩니다.각 규칙 또는 규칙 집합은 하나 이상의 선택기와 선언 블록으로 구성됩니다.

셀렉터

CSS에서 선택자는 마크업 자체의 태그와 속성을 일치시킴으로써 스타일이 마크업의 어느 부분에 적용되는지 선언합니다.

셀렉터종류

셀렉터는 다음 사항에 적용될 수 있습니다.

  • 특정 유형의 모든 요소(예: 두 번째 레벨 헤더 h2)
  • 속성별로 지정된 요소, 특히 다음과 같습니다.
    • id: 문서 내에 고유한 식별자로, 선택 언어로 해시 접두사(예: hash prefix)로 표시됩니다.#id
    • class: 문서의 여러 요소에 주석을 달 수 있는 식별자로, 접두사로 표시됩니다..classname("CSS class"라는 문구는 때때로 사용되지만 잘못된 이름입니다. 요소 클래스(HTML 클래스 속성으로 지정됨)는 브라우저의 CSS 하위 시스템과 구별되는 마크업 기능이며 문서 스타일에 대한 관련 W3C/WHATWG 표준 기능을 사용하기 때문입니다. 웹 콘텐츠 모델의 "class" 시스템의 기원에 대해서는 RDF와 마이크로포맷을 참조하십시오.)
  • 문서 트리에 있는 다른 요소와 비교하여 배치되는 방법에 따라 요소가 달라집니다.

클래스 및 ID는 대소문자를 구분하고 문자로 시작하며 영숫자, 하이픈 및 밑줄을 포함할 수 있습니다.클래스는 요소의 인스턴스 수에 관계없이 적용될 수 있습니다.ID는 단일 요소에만 적용할 수 있습니다.

유사 클래스

의사 클래스는 CSS 셀렉터에서 문서 트리에 포함되지 않은 정보를 기반으로 포맷을 허용하는 데 사용됩니다.

널리 사용되는 의사 클래스의 한 예는 다음과 같습니다.:hover, 이것은 사용자가 가시적인 요소를 가리킬 때에만, 보통 마우스 커서를 그것 위에 놓아서 컨텐츠를 식별합니다.다음과 같이 선택기에 추가됩니다.a:hover아니면#elementid:hover.

의사 클래스는 다음과 같은 문서 요소를 분류합니다.:link아니면:visited, 반면 의사 element는 다음과 같은 부분적인 요소로 구성될 수 있는 선택을 합니다.::first-line아니면::first-letter.[6]의사 요소에 사용되는 이중 콜론 표기법과 의사 클래스에 사용되는 단일 콜론 표기법의 구별에 유의하십시오[6].

콤비네이터

여러 단순 선택기를 조합기를 사용하여 결합하여 위치, 요소 유형, id, 클래스 또는 이들의 조합으로 요소를 지정할 수 있습니다.[7]셀렉터의 순서가 중요합니다.예를들면,div .myClass {color: red;}는 div 요소 내부에 있는 class myClass의 모든 요소에 적용되는 반면,.myClass div {color: red;}는 클래스 myClass의 내부 요소에 있는 모든 div 요소에 적용됩니다.다음과 같은 연결 식별자와 혼동해서는 안 됩니다.div.myClass {color: red;}내 클래스의 디브 요소에 적용됩니다.

셀렉터 구문 요약

다음 표는 사용을 나타내는 셀렉터 구문과 이를 도입한 CSS 버전을 요약한 것입니다.[8]

양식 성냥 최초정의
CSS 수준으로
E E형 원소 1
E:link 대상이 아직 방문하지 않았거나(:link) 이미 방문한(:visited) 하이퍼링크의 원본 앵커인 E 요소 1
E:active 특정 사용자 작업 중에 E 요소 1
E::first-line E 원소의 첫 번째 형식화된 행 1
E::first-letter E 원소의 첫 번째 서식 문자 1
.c 클래스가 = "c"인 모든 요소 1
#myid id="myid"인 요소 1
E.warning 클래스가 "경고"인 E 요소(문서 언어는 클래스가 결정되는 방법을 지정함) 1
E#myid ID가 "myid"와 같은 E 요소 1
.c#myid class="c" 및 ID가 "myid"와 같은 요소 1
E F E 원소의 F 원소 후예 1
* 임의의 원소 2
E[foo] "foo" 속성을 가진 E 요소 2
E[foo="bar"] "foo" 속성 값이 "bar"와 정확히 일치하는 E 요소 2
E[foo~="bar"] "foo" 속성 값이 공백으로 구분된 값의 목록이며, 그 중 하나가 "bar"와 정확히 일치하는 E 요소 2
E[foo ="en"] "foo" 속성이 "en"으로 시작하는 (왼쪽부터) 하이픈으로 구분된 값 목록을 가지는 E 요소 2
E:first-child 부모의 첫아이인 E원소. 2
E:lang(fr) 언어 "fr"에서 유형 E의 요소(문서 언어는 언어가 결정되는 방법을 지정함) 2
E::before E 요소의 내용 앞에 생성된 내용 2
E::after E 요소의 내용 뒤에 생성된 내용 2
E > F E원소의 F원소 자식 2
E + F E 원소 바로 앞에 있는 F 원소 2
E[foo^="bar"] "foo" 속성 값이 정확히 "bar" 문자열로 시작하는 E 요소 3
E[foo$="bar"] "foo" 속성 값이 문자열 "bar"로 정확히 끝나는 E 요소 3
E[foo*="bar"] "foo" 속성 값이 부분 문자열 "bar"를 포함하는 E 요소 3
E:root 문서의 E 요소, 루트 3
E:nth-child(n) 부모의 n번째 자식인 E원소. 3
E:nth-last-child(n) 부모의 n번째 자식인 E 원소, 마지막 하나에서 세어짐. 3
E:nth-of-type(n) 그 유형의 n번째 형제인 E 원소 3
E:nth-last-of-type(n) 그 유형의 n번째 형제인 E 원소, 마지막 원소에서 세는 것. 3
E:last-child 부모의 마지막 자식인 E원소. 3
E:first-of-type E 원소, 그 형의 첫 번째 형제. 3
E:last-of-type 그 형의 마지막 형제인 E원소. 3
E:only-child 부모의 외동인 E원소. 3
E:only-of-type E 원소, 그 형의 유일한 형제. 3
E:empty 자식이 없는 E 요소(텍스트 노드 포함) 3
E:target 참조 URI의 대상이 되는 E 요소 3
E:enabled 활성화된 사용자 인터페이스 요소 E 3
E:disabled 비활성화된 사용자 인터페이스 요소 E 3
E:checked 선택된 사용자 인터페이스 요소 E(예: 라디오 버튼 또는 확인란) 3
E:not(s) 단순 선택 항목과 일치하지 않는 E 요소 3
E ~ F E 원소 앞에 오는 F 원소 3

선언 블록

선언 블록은 한 쌍의 가새로 구성됩니다({}세미콜론으로 구분된 선언 목록을 포함합니다.[9]

선언.

각 선언 자체는 속성, 콜론()으로 구성됩니다.:), 및 .선택적 공백은 가독성을 위해 선언 블록, 선언, 콜론 및 세미콜론 주위에 있을 수 있습니다.[10]

특성.

속성은 CSS 표준에 명시되어 있습니다.각 속성에는 가능한 값의 집합이 있습니다.어떤 속성은 요소 유형에 상관없이 영향을 미칠 수 있으며, 다른 속성은 요소 그룹의 특정에만 적용됩니다.[11][12]

가치

값은 "center" 또는 "상속"과 같은 키워드이거나 숫자 값(예:200px(200픽셀),50vw(뷰포트 폭의 50%) 또는 80%(부모 요소 폭의 80%).

색상 값은 키워드(예: ")로 지정할 수 있습니다.red"), 16진수 값(예:#FF0000, 약칭:#F00, 0 ~ 255 스케일의 RGB 값(예:rgb(255, 0, 0), 색상과 알파 투명도를 모두 지정하는 RGBA 값(예:rgba(255, 0, 0, 0.8), 또는 HSL 또는 HSLA 값(예:hsl(000, 100%, 50%),hsla(000, 100%, 50%, 80%)).[13]

선형 측도를 나타내는 0이 아닌 숫자 값에는 알파벳 코드 또는 약어인 길이 단위가 포함되어야 합니다.200px아니면50vw; 또는 백분율 기호(예: 에 해당됨)80%. 일부 단위 -cm(cm);in(인치);mm(밀리미터);pc(pica); 및pt(point) – 절대적입니다. 즉, 렌더링된 차원이 페이지의 구조에 의존하지 않는다는 것을 의미합니다. 기타 -em(em);ex(ex) 그리고px(픽셀)[clarification needed]상대적입니다. 즉, 상위 요소의 글꼴 크기와 같은 요소가 렌더링된 측정에 영향을 미칠 수 있습니다.이 8개의 유닛은 CSS 1의[14] 기능이었으며 이후의 모든 개정판에서 유지되었습니다.제안된 CSS 값 및 단위 모듈 레벨 3은 W3C 권장 사항으로 채택될 경우 7개의 추가 길이 단위를 제공합니다.ch;Q;rem;vh;vmax;vmin; 그리고vw.[15]

사용하다

CSS 이전에는 HTML 문서의 거의 모든 표현 속성이 HTML 마크업 내에 포함되어 있었습니다.모든 글꼴 색, 배경 스타일, 요소 정렬, 테두리 및 크기는 HTML 내에서 종종 반복적으로 명시적으로 기술되어야 했습니다. CSS는 작성자가 해당 정보의 많은 부분을 다른 파일인 스타일 시트로 이동하여 HTML을 상당히 단순하게 만듭니다. 또한 점점 더 많은 장치가 응답형 웹 페이지에 접근할 수 있게 됨에 따라다양한 화면 크기와 레이아웃이 나타나기 시작합니다.각 디바이스 크기에 맞게 웹 사이트를 사용자 정의하는 것은 비용이 많이 들고 점점 더 어려워지고 있습니다.CSS의 모듈 특성은 사이트의 다른 부분에서 또는 사이트 간에 스타일을 재사용할 수 있음을 의미하며 일관성과 효율성을 촉진합니다.

예를 들어 제목(h1요소), 하위 headings(h2), 하위 하위 headings()h3), 등을 HTML을 이용하여 구조적으로 정의하고 있으며, 인쇄 및 화면에서는 이러한 요소에 대한 글꼴, 크기, 색상강조점의 선택을 제시하고 있습니다.

CSS 이전에, 그러한 타이포그래픽 특성을 모든 것에 할당하고 싶었던 문서 작성자들은, 예를 들어,h2표제는 해당 표제 유형의 각 발생에 대해 HTML 프레젠테이션 마크업을 반복해야 했습니다.이로 인해 문서가 더 복잡하고, 더 커지고, 오류가 발생하기 쉽고, 유지보수하기가 어려워졌습니다.CSS를 통해 구조물로부터 프레젠테이션을 분리할 수 있습니다.CSS는 색상, 글꼴, 텍스트 정렬, 크기, 테두리, 간격, 레이아웃 및 기타 많은 타이포그래픽 특성을 정의할 수 있으며 화면 및 인쇄 뷰에 대해 독립적으로 정의할 수 있습니다.CSS는 읽기 속도 및 청각적 텍스트 판독기의 강조와 같은 비시각적 스타일도 정의합니다.W3C는 이제 모든 표현형 HTML 마크업의 사용을 중단했습니다.[16]

예를 들어 CSS 이전 HTML에서 빨간색 텍스트로 정의된 표제 요소는 다음과 같이 기록됩니다.

<h1><font="레드">1장./font>/h1>

CSS를 사용하면 HTML 표현 속성 대신 스타일 속성을 사용하여 동일한 요소를 코딩할 수 있습니다.

<h1 style="color: red;">1장</h1>

이것의 장점은 즉각적으로 명확하지 않을 수 있지만 CSS의 힘은 스타일 속성이 내부 스타일 요소에 배치되거나 심지어 더 나은 외부 CSS 파일에 배치될 때 더욱 분명해집니다.예를 들어, 문서에 스타일 요소가 포함되어 있다고 가정합니다.

<스타일.>     h1 {         색.: 빨간.;     } </스타일.> 

모든.h1그러면 문서의 요소는 명시적인 코드 없이 자동으로 빨간색으로 바뀝니다.만약 작가가 나중에 만들기를 원했다면,h1대신 파란색 요소를 사용하면 스타일 요소를 다음과 같이 변경할 수 있습니다.

<스타일.>     h1 {         색.: 파랑색;     } </스타일.> 

열심히 서류를 훑어보고 각자의 색깔을 바꾸는 것보다h1요소.

다음과 같이 스타일을 외부 CSS 파일에 배치하고 다음과 유사한 구문을 사용하여 로드할 수도 있습니다.

<연결고리 href="path/to/file.css" 관계있는="스타일시트" 유형="텍스트/css"> 

이를 통해 HTML 문서에서 스타일링을 분리하고 공유된 외부 CSS 파일을 편집하기만 하면 여러 문서의 스타일을 변경할 수 있습니다.

원천

CSS 또는 Cascading Style Sheets는 브라우저 기본 설정, 사용자 환경설정 또는 웹 디자이너에서 비롯된 스타일을 사용하여 웹 콘텐츠를 스타일링할 수 있는 유연한 방법을 제공합니다.이러한 스타일은 일관성을 높이기 위해 인라인, HTML 문서 내 또는 외부 .css 파일을 통해 적용할 수 있습니다.재사용성과 유지보수성을 향상시켜 웹 개발을 단순화할 뿐만 아니라 브라우저에서 캐시할 수 있는 전용 .css 파일로 스타일을 오프로드할 수 있기 때문에 사이트 성능도 향상됩니다.또한 스타일을 로드할 수 없거나 비활성화된 경우에도 이러한 분리를 통해 콘텐츠의 접근성과 가독성을 유지하여 장애인을 포함한 모든 사용자가 사이트를 사용할 수 있도록 보장합니다.선택자의 특수성, 규칙 순서 및 미디어 유형에 대한 고려를 포함한 다각적인 접근 방식은 웹 사이트가 다양한 장치와 사용자 요구에 대해 시각적으로 일관성 있고 적응성이 있도록 보장하며, 설계 의도와 사용자 접근성 사이에서 균형을 유지합니다.

다중 스타일 시트

여러 스타일 시트를 가져올 수 있습니다.사용 중인 출력 장치에 따라 다른 스타일을 적용할 수 있습니다. 예를 들어, 화면 버전이 인쇄된 버전과 상당히 다를 수 있으므로 작성자는 매체별로 적절하게 프레젠테이션을 조정할 수 있습니다.

캐스캐이딩

우선순위가 가장 높은 스타일시트는 내용 표시를 제어합니다.가장 높은 우선 순위의 소스에 설정되지 않은 선언은 사용자 에이전트 스타일과 같은 더 낮은 우선 순위의 소스로 전달됩니다.이 과정을 캐스캐이딩(cascascading이라고 합니다.

CSS의 목표 중 하나는 사용자가 프레젠테이션을 더 잘 제어할 수 있도록 하는 것입니다.빨간색 기울임꼴 제목을 읽기 어려운 사람은 다른 스타일시트를 적용할 수 있습니다.브라우저 및 웹 사이트에 따라 사용자는 설계자가 제공하는 다양한 스타일시트를 선택하거나 추가된 스타일을 모두 삭제할 수 있으며 브라우저의 기본 스타일을 사용하여 사이트를 보거나 다른 속성을 변경하지 않고 빨간색 기울임꼴 제목 스타일만 재정의할 수 있습니다.StylishStylus와 같은 브라우저 확장 기능은 이러한 사용자 스타일 시트의 관리를 용이하게 하기 위해 개발되었습니다.대규모 프로젝트의 경우, 개발자가 우선 순위가 상충되는 타사 스타일을 통합할 때 어떤 스타일이 우선 순위가 더 높은지 판단하고 이러한 갈등을 추가로 해결하는 데 캐스케이드를 사용할 수 있습니다.또한 계단식 설계는 테마형 설계를 생성하는 데 도움이 되며, 이를 통해 설계자는 전체 레이아웃을 손상시키지 않고 설계의 측면을 세밀하게 조정할 수 있습니다.

CSS 우선 순위 체계
CSS 우선 순위 체계(최고에서 최저)
우선 순위. CSS 소스 유형 묘사
1 중요성 더"!important" 주석이 이전 우선 순위 유형을 덮어씁니다.
2 인라인 HTML "style" 속성을 통해 HTML 요소에 적용되는 스타일
3 미디어 유형 속성 정의는 미디어별 CSS가 정의되지 않는 한 모든 미디어 유형에 적용됩니다.
4 사용자정의 대부분의 브라우저는 사용자 정의 CSS라는 접근성 기능을 가지고 있습니다.
5 셀렉터 특정성 특정 컨텍스트 선택기(#heading p) 일반 정의를 덮어씁니다.
6 규칙순서 마지막 규칙 선언의 우선 순위가 더 높습니다.
7 모계상속 속성이 지정되지 않은 경우 상위 요소로부터 상속됩니다.
8 HTML 문서의 CSS 속성 정의 CSS 규칙 또는 CSS 인라인 스타일이 기본 브라우저 값을 덮어씁니다.
9 브라우저 기본값 가장 낮은 우선 순위: 브라우저 기본값은 W3C 초기값 사양에 따라 결정됩니다.

특이성

특이성은 다양한 규칙의 상대적인 가중치를 말합니다.[17]두 개 이상의 규칙이 적용될 수 있는 경우 요소에 적용되는 스타일을 결정합니다.스펙을 기준으로, 단순 선택기(예를 들어, H1)는 1의 특이성을 갖고, 클래스 선택기는 1,0,0의 특이성을 갖고, ID 선택기는 1,0,0의 특이성을 갖습니다.특이도 값이 십진법에서와 같이 전달되지 않기 때문에 쉼표가 "숫자"[18]를 구분하는 데 사용됩니다(11개의 원소와 11개의 클래스로 구성된 CSS 규칙은 121개가 아닌 11, 11개의 특이도를 갖습니다.

따라서 다음 규칙의 선택자는 표시된 특정성을 갖습니다.

셀렉터 특이성
h1 {color: white;} 0, 0, 0, 1
p em {color: green;} 0, 0, 0, 2
.grape {color: red;} 0, 0, 1, 0
p.bright {color: blue;} 0, 0, 1, 1
p.bright em.dark {color: yellow;} 0, 0, 2, 2
#id218 {color: brown;} 0, 1, 0, 0
style=" " 1, 0, 0, 0

다음 HTML 조각을 고려합니다.

<!DOCTYPE html> <html> <헤드> <meta charset="utf-8"> <style> #xyz {color: blue; } </style> <body> <pid="xyz" style="color: green;">특정성을 나타내기 위해서 </p> </body> </html>

위의 예에서, 의 선언은style특성이 에 있는 특성을 재정의합니다.<style>요소는 더 높은 특이성을 가지므로 문단이 녹색으로 표시됩니다.

특수성을 입증하기 위해

상속

상속은 CSS의 핵심적인 기능으로, 작동을 위해 조상-후계 관계에 의존합니다.상속은 속성이 지정된 요소뿐만 아니라 그 하위 요소에도 적용되는 메커니즘입니다.[17]상속은 문서 트리에 의존합니다. 문서 트리는 네스팅을 기반으로 페이지에 있는 XHTML 요소의 계층입니다.하위 요소는 해당 요소를 둘러싸는 모든 상위 요소에서 CSS 속성 값을 상속할 수 있습니다.일반적으로 하위 요소는 텍스트 관련 속성을 상속하지만 상자 관련 속성은 상속되지 않습니다.상속할 수 있는 속성은 색상, 글꼴, 문자 간격, 선 높이, 목록 스타일, 텍스트 정렬, 텍스트 독립, 텍스트 변환, 가시성, 공백 및 단어 간격입니다.상속할 수 없는 속성은 배경, 테두리, 표시, 띄우기 및 지우기, 높이 및 너비, 여백, 최소 및 최대 높이 및 - 너비, 윤곽선, 오버플로, 패딩, 위치, 텍스트 장식, 수직 정렬 및 z 인덱스입니다.

상속을 사용하면 스타일시트에서 특정 속성을 반복적으로 선언하는 것을 피할 수 있으므로 CSS가 짧아질 수 있습니다.

CSS에서의 상속은 클래스 기반 프로그래밍 언어에서의 상속과 같지 않으며 클래스 B를 "클래스 A와 같지만 수정된" 것으로 정의할 수 있습니다.[19]CSS를 사용하면 "A 클래스"로 요소를 스타일링할 수 있지만 수정이 가능합니다.그러나 수정을 반복할 필요 없이 여러 요소를 스타일링하는 데 사용할 수 있는 CSS 클래스 B를 정의하는 것은 불가능합니다.

다음과 같은 스타일시트가 주어집니다.

p {    색.: 핑크색의; } 

내부에 강조 요소(<em>)가 있는 요소가 있다고 가정합니다.

<p>상속을 설명하기 위한 것입니다. </em> 상속 </p>

em 요소에 색상이 할당되지 않은 경우 강조된 단어 "일러스트레이트"는 상위 요소의 색상인 p를 이어받습니다.스타일 시트 p는 분홍색이므로 요소도 마찬가지로 분홍색입니다.

상속을 설명하기 위해서입니다.

여백

속성과 선택기 사이의 공백은 무시됩니다.이 코드 조각:

{넘치다:숨겨진;배경:#000000;배경 이미지:url(images/bg.gif);배경의:아니-;배경 위치:왼쪽 정상;} 

는 기능적으로 다음과 같습니다.

 {    넘치다: 숨겨진;    배경색: #000000;    배경 이미지: url(images/bg.gif);    배경의: 아니-;    배경 위치: 왼쪽 정상; } 

들여쓰기

가독성을 위해 CSS를 포맷하는 한 가지 일반적인 방법은 각 속성을 들여놓고 자체 라인을 제공하는 것입니다.가독성을 위해 CSS를 포맷하는 것 외에도, 코드를 더 빠르게 쓰기 위해 속기 속성을 사용할 수 있으며, 렌더링될 때 더 빠르게 처리됩니다.[20]

 {    넘치다: 숨겨진;    배경: #000 url(images/bg.gif) 아니- 왼쪽 정상; } 

여러 개의 속성 값이 자신의 행에 들여쓰기되기도 합니다.

@서체로 된 {    서체 계열의: 코믹 산스;    글자 크기의: 20개의;    src: url('first.example.com '),         url('second.example.com '),         url('third.example.com '),         url('fourth.example.com '); } 

포지셔닝

CSS 2.1은 다음과 같은 세 가지 위치 결정 체계를 정의합니다.

정상유량
인라인 항목은 텍스트의 단어에 있는 글자와 동일한 방식으로 배치되며, 사용 가능한 공간을 가로질러 더 이상 공간이 없을 때까지 차례로 배치된 다음 아래 줄을 새로 시작합니다.블록 항목은 문단과 같이 세로로 쌓여 있고 글머리표 목록의 항목을 좋아합니다.정상 흐름에는 블록 또는 인라인 항목과 런인 박스의 상대적인 위치 지정도 포함됩니다.
플로츠
플로팅된 항목은 정상 흐름에서 꺼내고 사용 가능한 공간에서 가능한 한 왼쪽 또는 오른쪽으로 이동합니다.그러면 다른 컨텐츠가 플로팅된 항목과 함께 흐릅니다.
절대위치
절대적으로 위치한 항목은 다른 항목의 정상적인 흐름에 아무런 영향을 미치지 않으며 제자리를 찾지 않습니다.다른 항목과 독립적으로 컨테이너에서 할당된 위치를 차지합니다.[21]

포지션속성

가능한 5가지 값이 있습니다.position소유물.다음과 같은 방법으로 항목을 배치하는 경우static, 그다음에 추가적인 속성들.top,bottom,left,그리고.right오프셋 및 위치를 지정하는 데 사용됩니다.위치가 정적인 요소는 다음 장치에 의해 영향을 받지 않습니다.top,bottom,left아니면right특성.

정적

기본값은 항목을 정규 흐름에 배치합니다.

관련있는

항목이 정상 흐름에 배치된 다음 해당 위치에서 이동하거나 오프셋됩니다.후속 플로우 항목은 이동되지 않은 것처럼 배치됩니다.

앱솔루트

절대 위치를 지정합니다.요소는 가장 가까운 정적이 아닌 상위 요소와 관련되어 있습니다.

고정된.

문서의 나머지 부분을 스크롤해도[21] 화면의 고정된 위치에 항목이 절대적으로 배치됩니다.

띄어쓰기

float속성은 세 가지 값 중 하나의 값을 가질 수 있습니다.절대적으로 배치되거나 고정된 아이템은 띄울 수 없습니다.다른 요소는 일반적으로 부유된 항목을 중심으로 흐릅니다. 단, 다른 요소는 해당 요소에 의해 방지되지 않는 한 말입니다.clear소유물.

왼쪽
항목이 나타났을 줄 왼쪽으로 이동합니다. 다른 항목이 오른쪽으로 흐를 수 있습니다.
맞다
항목이 나타났을 줄의 오른쪽으로 이동하므로 다른 항목이 왼쪽을 따라 이동할 수 있습니다.
분명한
요소가 왼쪽으로 떠 있는 요소 아래에 나타나도록 강제합니다('맑음').clear:left), 오른쪽(clear:right) 또는 양면(clear:both).[21][22]

역사

오페라 소프트웨어 회사의 최고 기술 책임자이자 CSS 웹 표준의 공동 개발자인 Håkon Wium Lie

CSS는 1994년 10월 10일 호콘 위움 리(Håkon Wium Lie)에 의해 처음 제안되었습니다.당시 Lie는 CERN에서 팀 버너스 리와 함께 일하고 있었습니다.[24]비슷한 시기에 웹을 위한 여러 다른 스타일시트 언어들이 제안되었고, 퍼블릭 메일링 리스트와 월드 와이드컨소시엄 내부에 대한 논의가 이루어지면서 1996년에 최초의 W3C CSS 추천(CSS1)[25]이 출시되었습니다.특히 Bert Bos의 제안은 영향력이 컸습니다. 그는 CSS1의 공동 저자가 되었고 CSS의 공동 창작자로 여겨집니다.[26]

스타일 시트는 1980년대 SGML(Standard Generalized Markup Language)이 시작된 이래로 이런저런 형태로 존재해 왔으며, CSS는 웹을 위한 스타일 시트를 제공하기 위해 개발되었습니다.[27]웹 스타일 시트 언어에 대한 한 가지 요구 사항은 스타일 시트가 웹의 다른 소스에서 나오는 것이었습니다.따라서 DSSLFOSI와 같은 기존 스타일시트 언어는 적합하지 않았습니다.반면 CSS는 문서의 스타일을 "캐스캐이딩" 스타일에 의해 여러 스타일 시트의 영향을 받습니다.[27]

HTML이 성장함에 따라 웹 개발자들의 요구를 충족시키기 위해 더 다양한 스타일리시한 기능을 포괄하게 되었습니다.이 진화는 더 복잡한 HTML의 비용을 들이면서, 설계자에게 사이트 외관에 대한 더 많은 제어권을 주었습니다. Viola같은브라우저 구현의 변형WWW월드와이드웹[28]일관된 사이트 외관을 어렵게 만들었고 사용자들은 웹 콘텐츠가 어떻게 표시되는지에 대한 통제력이 떨어졌습니다.팀 버너스 리가 개발한 브라우저/편집기는 프로그램에 하드 코딩된 스타일시트를 가지고 있었습니다.따라서 스타일시트는 웹의 문서에 연결될 수 없습니다.[24]CERN의 Robert Cailiau 역시 프레젠테이션에서 구조를 분리하여 각기 다른 스타일의 시트가 인쇄, 화면 기반 프레젠테이션 및 편집기에 대한 프레젠테이션을 설명하고자 했습니다.[28]

웹 프레젠테이션 기능 향상은 웹 커뮤니티의 많은 사람들에게 관심의 대상이었고 www 스타일 메일링 목록에는 9개의 다른 스타일 시트 언어가 제안되었습니다.[27]이 9개의 제안 중 CSS가 된 것에 특히 영향을 미쳤습니다. 바로 캐스캐이딩 HTML 스타일 시트와[23] 스트림 기반 스타일 시트 제안(SSP)입니다.[26][29]Lie는 Yves Lafon과 협력하여 Dave RaggettArena 브라우저에 CSS를 구현했습니다.[30][31][32]Bert Bos는 자신의 SSP 제안을 Argo 브라우저에 구현했습니다.[26]그 후 Lie와 Bos는 CSS 표준을 개발하기 위해 함께 노력했습니다. (이러한 스타일시트는 HTML 이외의 다른 마크업 언어에도 적용될 수 있기 때문에 'H'는 이름에서 삭제되었습니다.)[24]

Lie의 제안은 1994년 일리노이주 시카고에서 열린 "모자이크 " 컨퍼런스(이후 WWW2라고 불림)에서 발표되었고, 1995년 Bert Bos와 함께 다시 발표되었습니다.[24]이 무렵 W3C는 이미 설립되고 있었고 CSS 개발에 관심을 가졌습니다.그것은 스티븐 펨버튼이 의장을 맡은 그 목적을 향해 워크숍을 조직했습니다.이로 인해 W3C는 CSS에 대한 작업을 HTML 편집 검토 위원회(ERB)의 결과물에 추가했습니다.Lie와 Bos는 프로젝트의 이러한 측면에 대한 주요 기술 직원이었으며 Microsoft의 Thomas Reardon을 포함한 추가 구성원들도 참여했습니다.1996년 8월, 넷스케이프 커뮤니케이션 코퍼레이션자바스크립트 스타일 시트(JSSS)라는 대체 스타일 시트 언어를 발표했습니다.[24]사양이 완료되지 않았으므로 더 이상 사용되지 않습니다.[33]1996년 말, CSS는 공식화될 준비가 되었고, CSS 레벨 1 권고안은 12월에 발표되었습니다.

HTML, CSS, 그리고 DOM의 개발은 모두 HTML 편집 심의 위원회(ERB)라는 하나의 그룹에서 이루어지고 있었습니다.1997년 초, ERB는 W3C의 Dan Connolly가 의장을 맡고 있는 HTML Working Group, SoftQuad의 Lauren Wood가 의장을 맡고 있는 DOM Working Group, W3C의 Chris Lilley가 의장을 맡고 있는 CSS Working Group 등 세 개의 워킹 그룹으로 나뉘었습니다.

CSS 워킹 그룹은 CSS 레벨 1로 다루지 않았던 문제들을 다루기 시작했고, 1997년 11월 4일에 CSS 레벨 2를 만들었습니다.1998년 5월 12일 W3C 권고안으로 발표되었습니다.1998년에 시작된 CSS 레벨 3은 2014년 현재까지 개발 중에 있습니다.

2005년에 CSS 작업 그룹은 표준에 대한 요구사항을 더 엄격하게 시행하기로 결정했습니다.이는 CSS 2.1, CSS 3 Selectors 및 CSS 3 Text와 같이 이미 발표된 표준이 후보 추천에서 작업 초안 수준으로 철회되었음을 의미합니다.

채택의 어려움

CSS 1 규격은 1996년에 완성되었습니다.마이크로소프트의 인터넷 익스플로러 3[24] CSS를 제한적으로 지원하는 것을 특징으로 하여 그 해에 출시되었습니다.IE 4넷스케이프 4.x는 더 많은 지원을 추가했지만, 그것은 일반적으로 불완전했고 CSS가 유용하게 채택되는 것을 방해하는 많은 버그들을 가지고 있었습니다.웹 브라우저가 사양을 거의 완벽하게 구현하기까지는 3년 이상이 걸렸습니다.2000년 3월에 출시된 매킨토시용 인터넷 익스플로러 5.0은 CSS 1을 완전히(99% 이상) 지원하는 최초의 브라우저로,[34] 15개월 전에 CSS 지원을 도입한 이후 선두였던 오페라를 능가했습니다.다른 브라우저들은 그 후 곧 이어졌고, 그 중 많은 브라우저들이 CSS 2의 일부를 추가로 구현했습니다. 그러나 이후 버전 5 웹 브라우저가 CSS의 완전한 구현을 제공하기 시작했을 때에도 특정 영역에서는 여전히 부정확했습니다.그들은 모순, 버그, 그리고 다른 별난 점들로 가득 차 있었습니다.윈도우용 마이크로소프트 Internet Explorer 5.x매킨토시용 IE와 달리 CSS 표준과 비교하여 CSS 박스 모델의 구현에 결함이 있었습니다.이러한 기능 지원의 불일치와 다양성으로 인해 설계자들은 CSS 해킹과 필터라는 해결책을 사용하지 않고 브라우저와 플랫폼 전반에서 일관된 외관을 달성하기가 어려웠습니다.IE 윈도우 박스 모델 버그는 매우 심각하여 인터넷 익스플로러 6이 출시되었을 때 마이크로소프트는 대체 수정된 "표준 모드"와 함께 역호환 CSS 해석 모드("quirks mode")를 도입했습니다.다른 비 마이크로소프트 브라우저들도 모드 전환 기능을 제공했습니다.따라서 HTML 파일의 작성자들은 CSS가 이제는 오래 전의 IE5/Windows 브라우저용이 아닌 표준을 준수하여 올바르게 해석되도록 의도했음을 보여주는 특별한 "표준 준수 CSS 의도" 마커를 포함하는 것이 필요하게 되었습니다.이 마커가 없으면 "퀴크스 모드" 전환 기능을 가진 웹 브라우저는 CSS 표준을 따르는 것이 아니라 Windows의 IE 5처럼 웹 페이지의 개체 크기를 조정합니다.

원래 사양에서 CSS의 패치 적용 문제와 에러타로 인해 W3C는 CSS 2 표준을 CSS 2.1로 수정하게 되었고, 이는 HTML 브라우저에서 현재 CSS 지원의 작동 스냅샷으로 더 가까워졌습니다.어떤 브라우저도 성공적으로 구현하지 못한 일부 CSS 2 속성이 삭제되었고, 일부 경우에는 정의된 동작이 표준을 기존의 주요 구현과 일치하도록 변경되었습니다.CSS 2.1은 2004년 2월 25일에 후보 추천이 되었으나, CSS 2.1은 2005년 6월 13일에 작업 초안 상태로 되돌아갔으며,[35] 2007년 7월 19일에 후보 추천 상태로 되돌아갔습니다.[36]

이러한 문제들 외에도,.css확장자는 파워포인트 파일을 콤팩트 슬라이드 쇼 파일로 변환하는 데 사용된 소프트웨어 제품에 의해 사용되었으며,[37] 그래서 일부 웹 서버는 모든 것을 제공했습니다..css[38] MIME 타입으로 application/x-pointplus[39] 보다text/css.

공급업체 접두사

개별 브라우저 공급업체들은 가끔 표준화 및 보편화에 앞서 새로운 매개변수를 도입하기도 했습니다.향후 구현을 방해하는 것을 방지하기 위해 공급업체는 다음과 같은 매개 변수에 고유한 이름을 붙였습니다.-moz-Mozilla Firefox의 경우,-webkit-애플 사파리브라우징 엔진에서 이름을 따왔습니다.-o-Opera Browser-ms-Edge를 사용하는 Microsoft Internet Explorer(마이크로소프트 Internet Explorer) 및 초기 버전의 Microsoft Edge(마이크로소프트 Edge)용HTML.

때때로 다음과 같은 공급업체 접두사를 가진 매개 변수:-moz-radial-gradient그리고.-webkit-linear-gradientvendor이 아닌 prefix 대응어와 비교했을 때 약간 다른 구문을 가지고 있습니다.

접두사 속성은 표준화 시점까지 사용되지 않게 됩니다.프로그램은 이전 브라우저의 접두사를 자동으로 추가하고 접두사 매개변수의 표준화된 버전을 가리킬 수 있습니다.접두사는 브라우저의 작은 하위 집합으로 제한되므로 접두사를 제거하면 다른 브라우저에서 기능을 볼 수 있습니다.예외는 확실히 쓸모가 없습니다.-webkit-접두사 속성은 웹에서 너무 흔하고 지속적이어서 다른 브라우저 계열은 호환성을 위해 이 속성을 지원하기로 결정했습니다.[41]

변주곡

CSS 스냅샷 2021

CSS에는 다양한 레벨과 프로파일이 있습니다.CSS의 각 레벨은 일반적으로 새로운 기능을 추가하는 마지막 레벨에 구축되며 일반적으로 CSS 1, CSS 2, CSS 3, CSS 4로 표시됩니다[citation needed]. 프로파일은 일반적으로 특정 장치 또는 사용자 인터페이스를 위해 구축된 하나 이상의 레벨의 CSS의 하위 집합입니다.현재 모바일 기기, 프린터 및 텔레비전 세트에 대한 프로필이 있습니다.프로파일은 CSS 2에 추가된 미디어 유형과 혼동해서는 안 됩니다.

CSS 1

공식적인 W3C 권고안이 된 최초의 CSS 사양은 1996년 12월 17일에 발표된 CSS 레벨 1입니다.Hkonkon Wium Lie와 Bert Bos가 최초 개발자로 인정을 받고 있습니다.이 기능 중에는 다음에 대한 지원이 있습니다.

  • 글꼴 및 강조와 같은 글꼴 속성
  • 텍스트, 배경 및 기타 요소의 색상
  • 단어, 문자 및 텍스트 줄 사이의 간격과 같은 텍스트 속성
  • 텍스트, 이미지, 테이블 및 기타 요소 정렬
  • 대부분의 요소에 대한 여백, 테두리, 패딩 및 위치 지정
  • 속성 그룹의 고유 식별 및 일반 분류

W3C는 더 이상 CSS 1 권장사항을 유지하지 않습니다.[44]

CSS 2

CSS 레벨 2 사양은 W3C에 의해 개발되어 1998년 5월에 권고안으로 발표되었습니다.CSS 1의 상위 집합인 CSS 2는 요소와 z-index의 절대적, 상대적, 고정적 위치 지정, 미디어 유형의 개념, 오디오 스타일 시트([45]나중에 CSS 3 음성 모듈로 대체됨) 및 양방향 텍스트 지원, 그림자와 같은 새로운 글꼴 속성을 포함합니다.

W3C는 더 이상 CSS 2 권장 사항을 유지하지 않습니다.[46]

CSS 2.1

CSS 레벨 2 리비전 1, 흔히 "CSS 2.1"이라고 불리는 CSS 레벨 2 리비전 1은 CSS 2의 오류를 수정하고, 제대로 지원되지 않거나 완전히 상호 운용되지 않는 기능을 제거하며, 이미 구현된 브라우저 확장을 사양에 추가합니다.기술 사양 표준화를 위한 W3C 프로세스를 준수하기 위해 CSS 2.1은 수년간 작업 초안 상태와 후보 추천 상태를 오갔습니다.CSS 2.1은 2004년 2월 25일에 처음으로 후보 추천서가 되었지만, 추가 검토를 위해 2005년 6월 13일에 작업 초안으로 되돌아갔습니다.2007년 7월 19일 후보 추천으로 돌아갔다가 2009년에 두 번 업데이트되었습니다.그러나 변경 및 설명이 이루어졌기 때문에 2010년 12월 7일 마지막 통화 작업 초안으로 다시 되돌아갔습니다.

CSS 2.1은 2011년 4월 12일에 제안된 권장사항으로 변경되었습니다.[47]W3C 자문위원회의 검토를 거쳐 2011년 6월 7일 W3C 권고안으로 최종 발표되었습니다.[48]

CSS 2.1은 레벨 2의 첫 번째 및 마지막 개정으로 계획되었으나 CSS 2.2에 대한 낮은 우선순위 작업이 2015년에 시작되었습니다.

CSS 3

다양한 기능을 정의하는 대형 단일 사양인 CSS 2와 달리 CSS 3은 "모듈"이라고 불리는 여러 개의 개별 문서로 나뉩니다.각 모듈은 CSS 2에 정의된 새로운 기능을 추가하거나 기능을 확장하여 하위 호환성을 유지합니다.CSS 레벨 3에 대한 작업은 원래 CSS 2 권고안이 발표될 무렵에 시작되었습니다.최초의 CSS 3 초안은 1999년 6월에 발표되었습니다.[49]

모듈화로 인해 모듈마다 안정성과 상태가 다릅니다.[50]

일부 모듈은 CR(후보자 추천) 상태를 가지며 중간 정도로 안정적인 것으로 간주됩니다.CR 단계에서는 벤더 접두사를 삭제하는 것이 좋습니다.[51]

주 모듈 사양[52] 요약
모듈 규격제목 상황 날짜.
css3-background CSS 배경 및 경계 모듈 레벨 3 녹취 후보자. 2023년2월
css-box-3 CSS Box 모델 모듈 레벨 3 권고 2023년4월
css-cascade-3 CSS 캐스캐이딩 및 상속 레벨 3 권고 2021년 2월
css-color-3 CSS 컬러 모듈 레벨 3 권고 2022년 1월
css3-content CSS 생성 콘텐츠 모듈 레벨 3 작업 초안 2019년8월
css-fonts-3 CSS 글꼴 모듈 레벨 3 권고 2018년9월
css3-gcpm 페이징된 미디어 모듈을 위한 CSS 생성 컨텐츠 작업 초안 2014년5월
css3-layout CSS 템플릿 레이아웃 모듈 메모 2015년 3월
css3-mediaqueries 미디어 쿼리 권고 2012년6월
mediaqueries-4 IMT2000 3GPP - 미디어 질의 레벨 4 녹취 후보자. 2021년 12월
css3-multicol 다중 기둥 배치 모듈 레벨 1 녹취 후보자. 2021년 10월
css3-page IMT2000 3GPP - CSS 페이징된 미디어 모듈 레벨 3 작업 초안 및 부품이 css3-break로 마이그레이션됨 2018년10월
css3-break IMT2000 3GPP - CSS 단편화 모듈 레벨 3 녹취 후보자. 2018년12월
selectors-3 셀렉터 레벨 3 권고 2018년11월
selectors-4 셀렉터 레벨 4 작업 초안 2022년 11월
css3-ui CSS 기본 사용자 인터페이스 모듈 레벨 3 (CSS3 UI) 권고 2018년6월

CSS 4

Jen Simmons은 CSS 4 모듈이 여러 개 개발되고 있어 2019년 CSS의 상태에 대해 논의하고 있습니다.

사양이 독립적으로 레벨이 되는 여러 개의 개별 모듈로 분할되었기 [53]때문에 단일 통합 CSS4 사양은 없습니다.

CSS 레벨 2의 것들을 기반으로 하는 모듈들은 레벨 3에서 시작했습니다.그들 중 일부는 이미 레벨 4에 도달했거나 이미 레벨 5에 근접해 있습니다.Flexbox와 같이 완전히 새로운 기능을 정의하는 다른 모듈은 [54]레벨 1로 지정되었으며 일부 모듈은 레벨 2에 가까워지고 있습니다.

CSS 워킹 그룹은 때때로 전체 모듈과 브라우저 개발자들이 구현할 수 있을 정도로 충분히 안정적이라고 여겨지는 다른 초안들의 일부를 모은 "스냅샷"을 출판합니다.현재까지 5개의 "현재 모범 사례" 문서가 Notes(2007년,[55][56] 2010년,[57] 2015년,[58] 2017년 및 2018년)로 발행되었습니다.[59]

이러한 사양 스냅샷은 주로 개발자를 대상으로 하므로, 저자를 대상으로 하는 유사한 버전의 참조 문서에 대한 요구가 증가하고 있습니다. 이 문서는 Can I Use...[60] 및 MDN Web Docs와 같은 사이트에서 문서화한 상호 운용 가능한 구현 상태를 보여줍니다.[61]그러한 자원을 논의하고 정의하기 위해 2020년 초에 W3C 커뮤니티 그룹이 설립되었습니다.[62]실제 버전의 종류도 논쟁의 여지가 있습니다. 즉, 문서가 일단 생성되면 "CSS4"라고 불릴 수 없다는 것을 의미합니다.

브라우저 지원

각 웹 브라우저는 레이아웃 엔진을 사용하여 웹 페이지를 렌더링하며 CSS 기능 지원은 서로 일관되지 않습니다.브라우저가 CSS를 완벽하게 구문 분석하지 않기 때문에, 여러 코딩 기술은 해결책(일반적으로 CSS 해킹 또는 CSS 필터로 알려져 있음)을 가진 특정 브라우저를 대상으로 개발되었습니다.CSS에서 새로운 기능을 채택하는 것은 주요 브라우저의 지원 부족으로 인해 방해를 받을 수 있습니다.예를 들어, Internet Explorer는 많은 CSS 3 기능에 대한 지원을 추가하는 것이 느렸고, 이로 인해 해당 기능의 채택이 늦어지고 개발자들 사이에서 브라우저의 평판이 손상되었습니다.또한, 비벤더 접두사를 위한 고유 구문filter일부 버전에서는 property가 사용되었습니다.[63]웹 개발자는 사용자에게 일관된 경험을 제공하기 위해 여러 운영 체제, 브라우저 및 브라우저 버전에 걸쳐 사이트를 테스트하는 경우가 많아 개발 시간과 복잡성이 증가합니다.BrowserStack과 같은 툴은 이러한 환경을 유지하는 작업의 복잡성을 줄이기 위해 개발되었습니다.

이러한 테스트 도구 외에도 많은 사이트에서 Can을 포함한 특정 CSS 속성에 대한 브라우저 지원 목록을 유지하고 있습니다.IUseMDN문서.또한 CSS 3은 기능 쿼리를 정의하는데, 이는 다음을 제공합니다.@supports개발자가 CSS 내에서 특정 기능을 직접 지원하는 브라우저를 대상으로 할 수 있도록 하는 지시문입니다.[64] 이전 브라우저에서 지원되지 않는 CSS는 브라우저가 일관성 있게 동작하도록 설계된 자바스크립트 코드 조각인 자바스크립트 폴리필을 사용하여 때때로 패치될 수도 있습니다.이러한 해결책과 폴백 기능을 지원해야 하는 필요성은 개발 프로젝트에 복잡성을 가중시킬 수 있으며, 따라서 기업들은 지원할 브라우저 버전과 지원하지 않을 브라우저 버전의 목록을 자주 정의합니다.

웹 사이트가 이전 브라우저와 호환되지 않는 최신 코드 표준을 채택함에 따라 이러한 브라우저는 웹의 많은 리소스에 액세스하지 못하게(때로는 의도적으로) 차단될 수 있습니다.[65]인터넷에서 가장 인기 있는 많은 사이트들은 CSS 지원이 제대로 되지 않아 오래된 브라우저에서 시각적으로 저하되었을 뿐만 아니라 대부분 자바스크립트와 다른 웹 기술의 발전으로 인해 전혀 작동하지 않습니다.

한계

CSS의 현재 기능에 대한 몇 가지 제한 사항은 다음과 같습니다.

위치에 관계없이 새 범위를 명시적으로 선언할 수 없음

z-index와 같은 속성에 대한 범위 지정 규칙은 위치: 절대 또는 위치: 상대 속성으로 가장 가까운 상위 요소를 찾습니다.이 홀수 결합은 원치 않는 효과를 가져옵니다.예를 들어, 한 요소의 위치를 조정하도록 강요받았을 때 새로운 범위를 선언하는 것을 피할 수 없어 모 요소의 원하는 범위를 사용할 수 없습니다.

의사 클래스 동적 동작을 제어할 수 없음

CSS는 대체 스타일의 조건부 적용으로 어느 정도의 사용자 피드백이 가능한 유사 클래스를 구현합니다.CSS 유사 클래스 하나, ":hover", 는 동적이고 (예를 들어, 커서 근접 팝업을 구현하는 등)[66] 오용 가능성이 있지만, CSS는 클라이언트가 이를 비활성화하거나("비활성화" 속성이 없음) 효과를 제한할 수 있는 기능이 없습니다(각 속성에 대해 "변경 없음" 값이 없음).

규칙 이름을 지정할 수 없음

CSS 규칙의 선택기가 변경되더라도 클라이언트 측 스크립트가 규칙을 참조할 수 있도록 하는 CSS 규칙의 이름을 지정할 방법은 없습니다.

규칙의 스타일을 다른 규칙에 포함할 수 없음

CSS 스타일은 원하는 효과를 얻기 위해 종종 여러 규칙으로 중복되어야 하며, 이는 추가적인 유지보수를 야기하고 보다 철저한 테스트를 요구합니다.이를 해결하기 위해 몇 가지 새로운 CSS 기능이 제안되었으나 이후 폐기되었습니다.[67][68]대신 작성자는 Sass, Less 또는 Stylus와 같이 CSS에 컴파일되는 보다 정교한 스타일시트 언어를 사용하여 이러한 능력을 얻을 수 있습니다.

마크업을 변경하지 않고는 특정 텍스트를 대상으로 지정할 수 없음

그 외에:first-letter의사 element, 자리 표시자 요소를 사용하지 않고는 특정 범위의 텍스트를 대상으로 할 수 없습니다.

이점

프레젠테이션 내용 분리

CSS는 공칭 파라미터를 기반으로 여러 프레젠테이션 형식으로 콘텐츠를 게시하는 것을 용이하게 합니다.공칭 매개 변수에는 명시적 사용자 기본 설정, 다양한 웹 브라우저, 컨텐츠를 보는 데 사용되는 장치 유형(데스크탑 컴퓨터 또는 모바일 장치), 사용자의 지리적 위치 및 기타 여러 변수가 포함됩니다.

사이트 전체 일관성

CSS가 효과적으로 사용될 경우 상속 및 "캐스케이딩" 측면에서 전역 스타일 시트를 사용하여 사이트 전체의 요소에 영향을 주고 스타일을 지정할 수 있습니다.요소의 스타일을 변경하거나 조정해야 하는 상황이 발생하면 글로벌 스타일 시트에서 규칙을 편집하여 변경할 수 있습니다.CSS 이전에는 이러한 종류의 유지보수가 더 어렵고, 비용이 많이 들며, 시간이 많이 소요되었습니다.

대역폭

내부 또는 외부 스타일시트는 선택한 HTML 요소 범위에 대해 스타일을 한 번 지정합니다.class, 유형이나 타인과의 관계.요소가 발생할 때마다 인라인으로 스타일 정보를 반복하는 것보다 훨씬 효율적입니다.외부 스타일시트는 일반적으로 브라우저 캐시에 저장되므로 다시 로드하지 않고 여러 페이지에서 사용할 수 있으므로 네트워크를 통한 데이터 전송이 더욱 줄어듭니다.

페이지 재포맷

한 줄의 간단한 변경으로 동일한 페이지에 대해 다른 스타일의 시트를 사용할 수 있습니다.이를 통해 페이지 또는 사이트를 다양한 대상 장치에 맞게 조정할 수 있을 뿐만 아니라 접근성에 대한 이점도 얻을 수 있습니다.게다가, 스타일링을 이해할 수 없는 장치들은 여전히 컨텐츠를 표시합니다.

접근성

CSS가 없으면 웹 설계자는 일반적으로 시각 장애 사용자의 접근성을 방해하는 HTML 테이블과 같은 기술로 페이지를 배치해야 합니다(Tableless web design #Accessibility 참조).

표준화

골조

CSS 프레임워크는 Cascading Style Sheets 언어를 사용하여 웹 페이지를 보다 쉽고 표준 준수적으로 스타일링할 수 있도록 미리 준비된 라이브러리입니다.CSS 프레임워크에는 Blueprint, 부트스트랩, Foundation 및 Materialize가 포함됩니다.프로그래밍 및 스크립트 언어 라이브러리와 마찬가지로 CSS 프레임워크는 대개 HTML에서 참조되는 외부 .css 시트로 통합됩니다.<head>. 그들은 웹 페이지를 설계하고 배치하기 위한 여러 가지 미리 만들어진 옵션들을 제공합니다.이러한 프레임워크 중 많은 부분이 출판되었지만, 일부 저자들은 이 프레임워크를 주로 신속한 프로토타이핑이나 학습을 위해 사용하며, 사이트 스타일에 사용되지 않는 기능이 많은 설계, 유지보수 및 다운로드 오버헤드 없이 각 출판된 사이트에 적합한 '수공' CSS를 선호합니다.[69]

청사진

Blueprint는 CSS(Cascading Style Sheet)로 작업할 때 개발 시간을 단축하고 크로스 브라우저 호환성을 보장하도록 설계된 CSS 프레임워크입니다.또한 CSS 개발을 더 쉽고 초보자들이 쉽게 접근할 수 있도록 설계된 많은 도구들의 기초 역할을 합니다.

부츠트랩

부트스트랩(Bootstrap)은 응답성이 뛰어난 모바일 우선 프론트엔드 개발을 지향하는 자유-오픈 소스 CSS 프레임워크입니다.HTML, CSS 및 (선택적으로) 자바스크립트 기반 설계 템플릿을 포함하여 타이포그래피, 양식, 버튼, 네비게이션 및 기타 인터페이스 구성 요소를 제공합니다.

토대

Foundation은 응답형 그리드와 HTML 및 CSS UI 구성 요소, 템플릿 및 코드 스니펫(tipography, 폼, 버튼, 네비게이션 및 기타 인터페이스 요소)을 제공하는 자유 응답형 프론트엔드 프레임워크이며 자바스크립트 확장에서 제공하는 옵션 기능도 제공합니다.Foundation은 오픈 소스 프로젝트로, 이전에는 ZURB가 유지했습니다.재단은 2019년부터 자원봉사자들에 의해 유지되고 있습니다.[70]

설계방법론

프로젝트에 사용되는 CSS 자원의 크기가 커짐에 따라, 개발팀은 이들을 체계적으로 유지하기 위한 공통 설계 방법론을 결정해야 하는 경우가 많습니다.목표는 개발의 용이성, 개발 중 협업의 용이성, 브라우저에서 배포된 스타일시트의 성능입니다.인기 있는 방법론으로는 OOCSS(객체 지향 CSS), ACSS(원자 CSS), CSS(유기 캐스케이드 스타일 시트), SMACSS(CSS용 확장 가능 및 모듈형 아키텍처), BEM(블록, 요소, 수정자) 등이 있습니다.[71]

참고 항목

참고문헌

  1. ^ "CSS developer guide". MDN Web Docs. Archived from the original on 2015-09-25. Retrieved 2015-09-24.
  2. ^ Flanagan, David (18 April 2011). JavaScript: the definitive guide. Beijing; Farnham: O'Reilly. p. 1. ISBN 978-1-4493-9385-4. OCLC 686709345. JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behavior of web pages.
  3. ^ "What is CSS?". World Wide Web Consortium. Archived from the original on 2010-11-29. Retrieved 2010-12-01.
  4. ^ Clark, Scott (23 July 2010). "Web-based Mobile Apps of the Future Using HTML 5, CSS and JavaScript". HTML Goodies. HTMLGoodies. Archived from the original on 2014-10-20. Retrieved 2014-10-16.
  5. ^ "W3C CSS validation service". Archived from the original on 2011-02-14. Retrieved 2012-06-30.
  6. ^ "W3C CSS2.1 specification for pseudo-elements and pseudo-classes". World Wide Web Consortium. 7 June 2011. Archived from the original on 30 April 2012. Retrieved 30 April 2012.
  7. ^ W3C 사이트 Archive 2006-04-23(Wayback Machine)에서 셀렉터의 전체 정의를 참조하십시오.
  8. ^ "Selectors Level 3". W3.org. Archived from the original on 2014-06-03. Retrieved 2014-05-30.
  9. ^ "CSS Syntax Module Level 3". W3C. Archived from the original on 1 October 2023. Retrieved 1 October 2023.
  10. ^ "W3C CSS2.1 specification for rule sets, declaration blocks, and selectors". World Wide Web Consortium. 7 June 2011. Archived from the original on 28 March 2008. Retrieved 2009-06-20.
  11. ^ "Full property table". W3.org. Archived from the original on 2014-05-30. Retrieved 2014-05-30.
  12. ^ "Index of CSS properties". www.w3.org. Retrieved 2020-08-09.
  13. ^ "CSS Color". MDN Web Docs. 2016-06-28. Archived from the original on 2016-09-21. Retrieved 2016-08-23.
  14. ^ "6.1 Length units". Cascading Style Sheets, level 1. 17 December 1996. Archived from the original on 14 June 2019. Retrieved 20 June 2019.
  15. ^ "5. Distance Units: the <length> type". CSS Values and Units Module Level 3. 6 June 2019. Archived from the original on 7 June 2019. Retrieved 20 June 2019.
  16. ^ W3C HTML Working Group. "HTML 5. A vocabulary and associated APIs for HTML and XHTML". World Wide Web Consortium. Archived from the original on 15 July 2014. Retrieved 28 June 2014.
  17. ^ a b Meyer, Eric A. (2006). Cascading Style Sheets: The Definitive Guide (3rd ed.). O'Reilly Media, Inc. ISBN 0-596-52733-0. Archived from the original on 2014-02-15. Retrieved 2014-02-16.
  18. ^ "Assigning property values, Cascading, and Inheritance". Archived from the original on 2014-06-11. Retrieved 2014-06-10.
  19. ^ "Can a CSS class inherit one or more other classes?". StackOverflow. Archived from the original on 2017-10-14. Retrieved 2017-09-10.
  20. ^ "Shorthand properties". Tutorial. Mozilla Developers. 2017-12-07. Archived from the original on 2018-01-30. Retrieved 2018-01-30.
  21. ^ a b c Bos, Bert; et al. (7 December 2010). "9.3 Positioning schemes". Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. Archived from the original on 18 February 2011. Retrieved 16 February 2011.
  22. ^ Holzschlag, Molly E (2005). Spring into HTML and CSS. Pearson Education, Inc. ISBN 0-13-185586-7.
  23. ^ a b Lie, Hakon W (10 October 1994). "Cascading HTML style sheets – a proposal" (Proposal). CERN. Archived from the original on 4 June 2014. Retrieved 25 May 2014.
  24. ^ a b c d e f Lie, Håkon Wium; Bos, Bert (1999). Cascading Style Sheets, designing for the Web. Addison Wesley. ISBN 0-201-59625-3. Retrieved 23 June 2010.
  25. ^ "Cascading Style Sheets, level 1". World Wide Web Consortium. Archived from the original on 2014-04-09. Retrieved 2014-03-07.
  26. ^ a b c Bos, Bert (14 April 1995). "Simple style sheets for SGML & HTML on the web". World Wide Web Consortium. Archived from the original on 23 September 2009. Retrieved 20 June 2010.
  27. ^ a b c "Cascading Style Sheets". University of Oslo. Archived from the original on 2006-09-06. Retrieved 3 September 2014.
  28. ^ a b Petrie, Charles; Cailliau, Robert (November 1997). "Interview Robert Cailliau on the WWW Proposal: "How It Really Happened."". Institute of Electrical and Electronics Engineers. Archived from the original on 6 January 2011. Retrieved 18 August 2010.
  29. ^ Bos, Bert (31 March 1995). "Stream-based Style sheet Proposal". Archived from the original on 12 October 2014. Retrieved 3 September 2014.
  30. ^ Nielsen, Henrik Frystyk (7 June 2002). "Libwww Hackers". World Wide Web Consortium. Archived from the original on 2 December 2009. Retrieved 6 June 2010.
  31. ^ "Yves Lafon". World Wide Web Consortium. Archived from the original on 24 June 2010. Retrieved 17 June 2010.
  32. ^ "The W3C Team: Technology and Society". World Wide Web Consortium. 18 July 2008. Archived from the original on 28 May 2010. Retrieved 22 January 2011.
  33. ^ Lou Montulli; Brendan Eich; Scott Furman; Donna Converse; Troy Chevalier (22 August 1996). "JavaScript-Based Style Sheets". W3C. Archived from the original on 27 May 2010. Retrieved 23 June 2010.
  34. ^ "CSS software". W3.org. Archived from the original on 2010-11-25. Retrieved 2011-01-15.
  35. ^ Anne van Kesteren. "CSS 2.1 – Anne's Weblog". Archived from the original on 2005-12-10. Retrieved 2011-02-16.
  36. ^ "Archive of W3C News in 2007". World Wide Web Consortium. Archived from the original on 2011-06-28. Retrieved 2011-02-16.
  37. ^ Nitot, Tristan (18 March 2002). "Incorrect MIME Type for CSS Files". Mozilla Developer Center. Mozilla. Archived from the original on 2011-05-20. Retrieved 20 June 2010.
  38. ^ McBride, Don (27 November 2009). "File Types". Archived from the original on 29 October 2010. Retrieved 20 June 2010.
  39. ^ "css file extension details". File extension database. 12 March 2010. Archived from the original on 18 July 2011. Retrieved 20 June 2010.
  40. ^ "How and why you would want to use CSS vendor prefixes in your website". Lifewire. 2019-11-12.
  41. ^ "Compatibility Standard". WHATWG.
  42. ^ Bos, Bert; Wium Lie, Håkon (1997). Cascading style sheets: designing for the Web (1st print. ed.). Harlow, England; Reading, MA.: Addison Wesley Longman. ISBN 0-201-41998-X.
  43. ^ W3C: Cascading Style Sheets, 레벨 1 Wayback Machine CSS 1 규격에서 보관 2011-02-09
  44. ^ W3C: Cascading Style Sheets 레벨 1 규격 Wayback Machine CSS 레벨 1 규격 보관 2011-02-11
  45. ^ "Aural style sheets". W3C. Archived from the original on 2014-10-26. Retrieved 2014-10-26.
  46. ^ W3C: Cascading Style Sheets, 레벨 2 Wayback Machine CSS 2 사양으로 보관 2011-01-16 (1998 권장사항)
  47. ^ W3C: Cascading Style Sheets, 레벨 2 개정판 1 Wayback Machine CSS 2.1 규격에서 2011-11-09 보관 (W3C 제안 권장사항)
  48. ^ W3C: 캐스캐이딩 스타일 시트 표준, Wayback Machine에서 전례 없는 상호 운용성 자랑 2011-06-10 아카이브
  49. ^ Bos, Bert (18 February 2011). "Descriptions of all CSS specifications". World Wide Web Consortium. Archived from the original on 31 March 2011. Retrieved 3 March 2011.
  50. ^ Bos, Bert (26 February 2011). "CSS current work". World Wide Web Consortium. Archived from the original on 3 March 2011. Retrieved 3 March 2011.
  51. ^ Etemad, Elika J. (12 December 2010). "Cascading Style Sheets (CSS) Snapshot 2010". World Wide Web Consortium. Archived from the original on 16 March 2011. Retrieved 3 March 2011.
  52. ^ "All CSS specifications". W3.org. 2014-05-22. Archived from the original on 2014-05-30. Retrieved 2014-05-30.
  53. ^ Atkins, Tab Jr. "A Word About CSS4". Archived from the original on 31 October 2012. Retrieved 18 October 2012.
  54. ^ "CSS Flexible Box Layout Module Level 1". W3C. 19 November 2018. Archived from the original on 19 October 2012. Retrieved 18 October 2012.
  55. ^ "Cascading Style Sheets (CSS) Snapshot 2007". 12 May 2011. Archived from the original on 8 August 2016. Retrieved 18 July 2016.
  56. ^ "Cascading Style Sheets (CSS) Snapshot 2010". 12 May 2011. Archived from the original on 16 March 2011. Retrieved 3 March 2011.
  57. ^ "CSS Snapshot 2015". W3C. 13 October 2015. Archived from the original on 27 January 2017. Retrieved 13 February 2017.
  58. ^ "CSS Snapshot 2017". 31 January 2017. Archived from the original on 13 February 2017. Retrieved 13 February 2017.
  59. ^ "CSS Snapshot 2018". 15 November 2018. Archived from the original on 1 February 2019. Retrieved 2 January 2019.
  60. ^ "Can I Use… Support tables for HTML5, CSS3, etc". Archived from the original on 2018-02-19. Retrieved 2019-01-26.
  61. ^ "MDN Web Docs: CSS". 22 July 2023.
  62. ^ "CSS4 Community Group". 24 February 2020. Archived from the original on 2020-02-27. Retrieved 2020-02-27.
  63. ^ "CSS3 Solutions for Internet Explorer – Smashing Magazine". Smashing Magazine. 2010-04-28. Archived from the original on 2016-10-12. Retrieved 2016-10-12.
  64. ^ "Using Feature Queries in CSS ★ Mozilla Hacks – the Web developer blog". hacks.Mozilla.org. Archived from the original on 2016-10-11. Retrieved 2016-10-12.
  65. ^ "Looking at the Web with Internet Explorer 6, one last time". Ars Technica. Archived from the original on 2016-10-12. Retrieved 2016-10-12.
  66. ^ "Pure CSS Popups". meyerweb.com. Archived from the original on 2009-12-09. Retrieved 2009-11-19.
  67. ^ Tab Atkins Jr. "CSS apply rule". GitHub. Archived from the original on 2016-02-22. Retrieved 2016-02-27.
  68. ^ "Why I Abandoned @apply — Tab Completion".
  69. ^ Cederholm, Dan; Ethan Marcotte (2009). Handcrafted CSS: More Bulletproof Web Design. New Riders. p. 114. ISBN 978-0-321-64338-4. Archived from the original on 20 December 2012. Retrieved 19 June 2010.
  70. ^ "Is Zurb Foundation in active development?". GitHub. Retrieved 21 Nov 2019.
  71. ^ Antti, Hiljá. "OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?". clubmate.fi. Hiljá. Archived from the original on 2 June 2015. Retrieved 2 June 2015.

추가열람

외부 링크