스타일 시트 (웹 개발)

웹 스타일 시트(style sheet)는 웹 디자인에서 콘텐츠와 표현의 분리의 한 형태로, 웹 페이지의 마크업(HTML 또는 XHTML)이 페이지의 의미론적 콘텐츠와 구조를 포함하지만 시각적 레이아웃(스타일)은 정의하지 않는다. 대신, 스타일은 CSS 또는 XSLT와 같은 스타일시트 언어를 사용하여 외부 스타일 시트 파일에서 정의된다. 이 디자인 접근 방식은 페이지의 마크업이 스타일과 구조를 모두 정의했던 이전 방법론을 대체했기 때문에 "분리"로 식별된다.

이 방법론의 기본 철학은 관심사 분리의 특정 사례이다.

장점

스타일과 콘텐츠의 분리는 장점이 있지만, 널리 사용되는 웹 브라우저의 CSS 구현 개선 후에야 실용적이 되었다.

속도

전반적으로 스타일 시트를 활용하는 사이트의 사용자 경험은 해당 기술을 사용하지 않는 사이트보다 일반적으로 더 빠르다. '전반적으로' 첫 페이지는 스타일 시트와 콘텐츠를 모두 전송해야 하므로 더 느리게 로드될 수 있다. 이후 페이지는 스타일 정보를 다운로드할 필요가 없으므로 더 빠르게 로드된다. CSS 파일은 이미 브라우저의 캐시에 있기 때문이다.

유지보수성

모든 프레젠테이션 스타일을 하나의 파일에 담아두면 유지보수 시간을 줄이고 오류 발생 가능성을 낮춰 프레젠테이션 일관성을 향상시킬 수 있다. 예를 들어, 특정 유형의 텍스트 요소와 관련된 글꼴 색상은 단일 파일에서 짧은 문자열 하나만 변경하면 전체 웹사이트에서 지정하고 쉽게 수정할 수 있다. 각 개별 페이지에 스타일을 포함하는 다른 접근 방식은 모든 파일을 번거롭고 시간이 많이 걸리며 오류가 발생하기 쉬운 편집을 요구할 것이다.

접근성

XHTML 또는 HTML과 함께 CSS를 사용하는 사이트는 다양한 브라우저(크롬, 인터넷 익스플로러, 모질라 파이어폭스, 오페라, 사파리 등)에서 유사하게 보이도록 조정하기 쉽다.

CSS를 사용하는 사이트는 Lynx와 같이 그래픽 콘텐츠를 표시할 수 없는 브라우저 또는 CSS를 사용할 수 없을 정도로 매우 오래된 브라우저에서 "정상적으로 저하"된다. 브라우저는 CSS 3 문장과 같이 이해하지 못하는 CSS를 무시한다. 이를 통해 다양한 사용자 에이전트가 스타일 시트를 렌더링할 수 없거나 그래픽 기능을 염두에 두고 설계되지 않았더라도 사이트의 콘텐츠에 액세스할 수 있다. 예를 들어, 점자 디스플레이를 출력에 사용하는 브라우저는 레이아웃 정보를 완전히 무시할 수 있으며, 사용자는 여전히 모든 페이지 콘텐츠에 액세스할 수 있다.

사용자 지정

파일:Icons8 flat search.svg CSS § 소스 문서를 참고하십시오.

페이지의 레이아웃 정보가 외부에 저장되어 있으면, 사용자는 레이아웃 정보를 완전히 비활성화하여 사이트의 기본 콘텐츠를 여전히 읽을 수 있는 형태로 남겨둘 수 있다. 사이트 작성자는 여러 스타일 시트를 제공할 수도 있으며, 이를 통해 콘텐츠를 변경하지 않고도 사이트의 모양을 완전히 변경할 수 있다.

대부분의 최신 웹 브라우저는 사용자에게 자체 스타일 시트를 정의할 수 있도록 허용하며, 여기에는 작성자의 레이아웃 규칙을 재정의하는 규칙을 포함할 수 있다. 이를 통해 사용자는 예를 들어 방문하는 모든 페이지의 모든 하이퍼링크를 굵게 표시할 수 있다. 스타일리시 및 스타일러스와 같은 브라우저 확장 기능이 이러한 사용자 스타일 시트 관리를 용이하게 하기 위해 만들어졌다.

일관성

의미론적 파일에는 작성자가 전달하려는 의미만 포함되므로 문서 콘텐츠의 다양한 요소의 스타일이 매우 일관적이다. 예를 들어, 제목, 강조된 텍스트, 목록 및 수학적 표현은 모두 외부 스타일 시트에서 일관되게 적용된 스타일 속성을 받는다. 작성자는 작성 시점에 스타일 속성에 대해 걱정할 필요가 없다. 이러한 프레젠테이션 세부 사항은 프레젠테이션 순간까지 연기될 수 있다.

이식성

프레젠테이션 세부 정보를 프레젠테이션 시점까지 연기하는 것은, 새로운 매체에 맞춰 이미 준비된 새로운 스타일 시트를 적용하고 의미론적 문서의 요소 또는 구조적 어휘와 일치시키기만 하면 문서를 완전히 다른 프레젠테이션 매체에 쉽게 재활용할 수 있음을 의미한다. 웹 페이지용으로 신중하게 작성된 문서는 단순히 새로운 스타일 시트를 적용하는 것만으로 헤더와 푸터, 페이지 번호, 생성된 목차를 포함하는 하드 바운드 볼륨으로 쉽게 인쇄될 수 있다.

오늘날의 실질적인 단점

2006년 현재, 사양(예: XHTML, XSL, CSS) 및 이러한 사양을 구현하는 소프트웨어 도구는 초기 성숙 단계에 도달하고 있다. 따라서 콘텐츠와 스타일을 분리하는 이 방법을 채택하려는 작성자가 직면하는 몇 가지 실질적인 문제가 있다.

구문 분석 및 생성 도구 없는 협소한 채택

스타일 사양은 상당히 성숙하고 계속해서 성숙해지고 있지만, 소프트웨어 도구는 적응 속도가 느렸다. 대부분의 주요 웹 개발 도구는 여전히 혼합된 프레젠테이션-콘텐츠 모델을 채택하고 있다. 따라서 작업을 위한 GUI 기반 도구를 찾는 작성자와 디자이너는 의미론적 웹 방식을 따르기 어렵다는 것을 알게 된다. GUI 도구 외에도 일반화된 스타일 시트를 위한 공유 저장소가 이러한 방법의 채택을 도울 것이다.

같이 보기

• 관심사 분리

외부 링크

• CSS Zen Garden: XHTML 소스를 건드리지 않고 새로운 페이지 레이아웃을 만들도록 디자이너에게 도전하는 사이트. 수십 가지 레이아웃이 포함되어 있다. 모든 레이아웃에 대한 CSS 소스를 볼 수 있다.