스타일시트(웹개발)
Style sheet (web development) |
| 계단식 스타일 시트 |
|---|
| 개념 |
| 철학 |
| 도구들 |
| 비교 |
| HTML |
|---|
| 비교 |
웹스타일 시트는 웹 페이지의 마크업(즉, HTML 또는 XHTML)이 페이지의 의미적 내용과 구조를 포함하지만 시각적 레이아웃(스타일)을 정의하지 않는 웹 디자인을 위한 프리젠테이션과 콘텐츠의 분리 형식이다.대신에 스타일은 CSS 또는 XSLT와 같은 스타일시트 언어를 사용하여 외부 스타일시트 파일에 정의된다.이 설계 접근방식은 페이지의 마크업이 스타일과 구조를 모두 정의한 선행 방법론을 대체하기 때문에 "분리"로 식별된다.
이 방법론의 기초가 되는 철학은 우려의 분리에 관한 구체적인 사례다.
혜택들
스타일과 콘텐츠의 분리는 장점이 있지만,[1][2] 인기 웹 브라우저의 CSS 구현이 개선된 후에야 실용화되었다.
속도
전반적으로, 스타일시트를 사용하는 사이트의 사용자 경험은 일반적으로 기술을 사용하지 않는 사이트보다 더 빠를 것이다.첫 페이지인 '전체'는 아마도 스타일 시트와 내용을 전송해야 하기 때문에 더 느리게 로딩될 것이다.스타일 정보를 다운로드할 필요가 없기 때문에 후속 페이지는 더 빨리 로딩될 것이다. CSS 파일은 이미 브라우저의 캐시에 있을 것이다.
유지관리성
모든 프레젠테이션 스타일을 한 파일에 보관하면 유지 관리 시간이 단축되고 오류가 발생할 가능성이 감소하여 프레젠테이션 일관성이 향상될 수 있다.예를 들어, 텍스트 요소의 유형과 관련된 글꼴 색상은 한 파일에서 하나의 짧은 문자열을 변경함으로써 전체 웹사이트에 걸쳐 지정될 수 있으며, 따라서 쉽게 수정될 수 있다.각 개별 페이지에 내장된 스타일을 사용하는 대안적 접근법은 모든 파일을 복잡하고 시간 소모적이며 오류가 발생하기 쉬운 편집이 필요할 것이다.
접근성
XHTML 또는 HTML과 함께 CSS를 사용하는 사이트는 서로 다른 브라우저(크롬, Internet Explorer, Mozilla Firefox, Opera, Safari 등)에서 유사하게 나타나도록 변경하기가 더 쉽다.
브라우저에서 CSS를 "품위 있게" 사용하는 사이트는 Lynx와 같은 그래픽 콘텐츠나 CSS를 사용할 수 없을 정도로 오래된 콘텐츠를 표시할 수 없다.브라우저는 CSS 3 문장과 같이 이해할 수 없는 CSS를 무시한다.이는 스타일시트를 렌더링할 수 없거나 그래픽 기능을 염두에 두고 설계되지 않았더라도 다양한 사용자 에이전트가 사이트의 내용에 접근할 수 있도록 한다.예를 들어 출력용으로 새로 고침 가능한 점자 표시를 사용하는 브라우저는 레이아웃 정보를 완전히 무시할 수 있으며 사용자는 여전히 모든 페이지 내용에 접근할 수 있다.
사용자 지정
페이지의 레이아웃 정보가 외부에 저장되면 사용자는 레이아웃 정보를 완전히 비활성화하기로 결정할 수 있으며, 사이트의 베어 콘텐츠는 여전히 읽을 수 있는 형태로 남아 있다.사이트 작성자는 또한 다수의 스타일시트를 제공할 수 있으며, 이것은 사이트의 내용을 변경하지 않고 사이트의 외관을 완전히 변경하는 데 사용될 수 있다.
대부분의 현대 웹 브라우저들은 또한 사용자가 자신의 스타일시트를 정의할 수 있도록 하는데, 이것은 저자의 레이아웃 규칙을 재정의하는 규칙을 포함할 수 있다.이를 통해 사용자는 예를 들어 방문하는 모든 페이지의 모든 하이퍼링크를 볼드할 수 있다.
일관성
의미파일은 작가가 전달하고자 하는 의미만을 담고 있기 때문에, 문서 내용의 다양한 요소의 스타일링은 매우 일관적이다.예를 들어 표제, 강조된 텍스트, 목록 및 수학적 표현은 모두 외부 스타일 시트에서 일관성 있게 적용된 스타일 특성을 받는다.작가들은 작문 당시의 스타일 속성에 대해 스스로 신경 쓸 필요가 없다.이러한 현재적 세부사항은 발표 순간까지 연기될 수 있다.
휴대성
발표 시점까지 발표 내용이 지연된다는 것은 새로운 매체를 위해 이미 준비된 새로운 스타일시트의 적용만으로 의미문서의 요소적 또는 구조적 어휘와 일관성을 유지하면서 전혀 다른 표현 매체에 대해 문서를 쉽게 재구입할 수 있다는 것을 의미한다.웹 페이지용으로 주의 깊게 작성된 문서는 새로운 스타일시트를 적용하기만 하면 머리글과 바닥글, 페이지 번호 및 생성된 목차가 있는 하드 바인딩 볼륨으로 쉽게 인쇄할 수 있다.
현재 실제적인 불이익
현재 규격(예: XHTML, XSL, CSS)과 이 규격을 구현하는 소프트웨어 도구는 만기의 초기 단계에 도달하고 있을 뿐이다.그래서 내용과 스타일을 분리하는 이 방법을 수용하고자 하는 작가들이 직면하고 있는 현실적인 문제들이 있다.
구문 분석 및 생성 도구를 사용하지 않고도 채택이 가능
스타일 사양은 상당히 성숙하고 아직 성숙하지만 소프트웨어 도구는 적응이 더디다.대부분의 주요 웹 개발 도구는 여전히 혼합된 프레젠테이션-콘텐츠 모델을 채택하고 있다.그래서 그들의 작업에 GUI 기반 도구를 찾는 작가와 디자이너들은 의미론적인 웹 방법을 따르는 것이 어렵다는 것을 알게 되었다.GUI 도구 외에도 일반화된 스타일시트를 위한 공유 저장소는 아마도 이러한 방법의 채택에 도움이 될 것이다.
참고 항목
참조
외부 링크
- CSS Zen Garden:디자이너가 XHTML 소스를 건드리지 않고 새로운 페이지 레이아웃을 만들도록 요구하는 사이트.수십 개의 레이아웃을 포함한다.모든 레이아웃에 대해 CSS 소스를 볼 수 있다.
