지난 주 칼럼에서는 YUI(사용자 인터페이스) 라이브러리에서 사용할 수 있는 JavaScript 기능(가장 중요한 캘린더링)에 중점을 두고 Yahoo! 개발자 네트워크에 대해 논의했습니다. CSS 도구를 제공하는 YUI 라이브러리의 또 다른 영역을 다루는 데 좀 더 시간을 보내고 싶었습니다. 이러한 도구를 사용하면 CSS 기반 디자인을 웹 애플리케이션과 쉽게 결합할 수 있습니다.
브라우저 지원
CSS 도구의 주요 기능 중 하나는 클래스 A 브라우저를 완벽하게 지원하도록 등급이 매겨져 있다는 것입니다. 브라우저 지원 등급은 순전히 Yahoo! 등급이며 웹사이트에서 전체 설명을 볼 수 있습니다. 이 설명은 기본적으로 오늘날 시장에 있는 브라우저에서 CSS가 어떻게 잘 작동하는지 설명합니다.
이 온라인 표에서 브라우저는 세 가지 브라우저 지원 수준(A, C, X)으로 구분됩니다. 레벨 A는 가장 높은 수준의 지원입니다. YUI 라이브러리는 최신 웹 표준의 힘을 활용하여 고급 기능과 시각적 충실도를 제공하는 클래스 A 경험을 발견합니다. 지원 카테고리 및 관련 파일을 통해 CSS가 지원되는 위치를 알 수 있지만 모든 브라우저에서 사용할 수 있어야 합니다(다운그레이드 가능).
재사용 가능한 CSS
YUI 라이브러리에는 서식 지정, 글꼴 소개, 그리드 기반(열 및 행) 레이아웃을 다루는 세 가지 CSS 영역 또는 기능이 포함되어 있습니다. 이 용어는 웹사이트에서 다음 세 가지 요소를 설명하는 데 사용됩니다.
페이지 그리드: 사용 중인 템플릿 용량 내에 1~4개의 열 그리드를 포함할 수 있습니다.
글꼴: 브라우저 간 타이포그래피 표준화 및 제어 기능을 제공합니다. 일반적으로 일관된 글꼴과 줄 높이를 제공하는 동시에 브라우저 내에서 글꼴에 대한 사용자 조정을 완벽하게 지원합니다.
재설정: HTML 요소에 대한 기본 할당에 대한 브라우저 간 표준화를 제공합니다. 또한 강조된 요소에 굵은 글씨를 사용하는 등 브라우저에서 일반적인 기본 표현을 제거하여 모든 글꼴 정의가 의도적이며 요소가 항상 관례적인 시각적 표현이 아닌 의미론적으로 사용되도록 합니다.
설치 후 YUI 라이브러리 다운로드의 각 요소는 웹 서버의 다음 디렉터리/파일에서 사용할 수 있습니다.
페이지 그리드: buildgridsgrids.css
글꼴: buildfontsfonts.css
재설정: eset eset.css 빌드
이러한 기본 디렉터리를 자신의 웹 서버에 설치하거나 사이트 내에 배치하여 필요에 따라 참조할 수 있습니다. CSS의 중요한 특징(무료라는 점 외에도)은 출시되기 전에 철저한 테스트와 디버깅을 거쳤다는 것입니다. 실제 CSS 도구를 자세히 살펴보겠습니다.
그리드 페이지 레이아웃
그리드 기반 레이아웃은 거의 모든 사이트 디자인이나 페이지 레이아웃의 원동력입니다. 과거에는 HTML 테이블을 통해 수행하는 경우가 많았지만 CSS는 페이지 레이아웃에 엄청난 성능과 유연성을 제공합니다. Page Grid는 요구 사항에 따라 열과 행으로 페이지를 구성하는 코드를 제공합니다.
페이지 그리드의 가장 기본적인 수준에서는 7개의 웹 페이지 템플릿을 제공하며 그 중 6개는 자세한 기본 콘텐츠/도구 모음 레이아웃을 정의하고, 7번째 템플릿은 도구 모음 없는 레이아웃을 정의하며 기본 콘텐츠는 전체 페이지 너비를 차지합니다. 이러한 템플릿의 이름은 다음과 같습니다.
yui-t1: 왼쪽에 너비 160px의 도구 모음과 너비 570px의 기본 영역이 포함되어 있습니다.
yui-t2: 왼쪽에 너비 180px의 도구 모음과 너비 550px의 기본 영역이 포함되어 있습니다.
yui-t3: 왼쪽에 너비가 300px인 도구 모음과 너비가 430px인 기본 영역이 포함되어 있습니다.
yui-t4: 오른쪽에 너비 180px의 도구 모음과 너비 550px의 기본 영역이 포함되어 있습니다.
yui-t5: 오른쪽에 너비 240px의 도구 모음과 너비 490px의 기본 영역이 포함되어 있습니다.
yui-t6: 오른쪽에 너비 300px의 도구 모음과 너비 430px의 기본 영역이 포함되어 있습니다.
yui-t7: 너비가 750px이고 도구 모음이 없는 기본 영역이 포함되어 있습니다.
목적에 맞게 이러한 템플릿을 결합(또는 대담한 경우 편집)할 수 있습니다. 목록 A는 첫 번째 레이아웃을 사용하여 페이지를 레이아웃합니다(참고: CSS 도구는 웹 서버의 기본 디렉터리에 설치됩니다).
목록 A
<html><헤드>
<title>Yahoo CSS 도구 예 1</title>
<link rel="stylesheet" type="text/css" href="build/grids/grids.css">
</head>
<본문>
<div id="doc" class="yui-t2">
<div id="hd">페이지 헤더</div>
<div 아이디="bd">
<div id="yui-main">
<div class="yui-b">메인 영역</div>
</div><div class="yui-b">왼쪽 열</div>
</div>
<div id="ft">페이지 바닥글</div>
</div></body></html>
HTML 페이지에 대한 몇 가지 참고 사항:
레이아웃은 전체 페이지에 제공됩니다. 기본 div 태그에는 yui-t2 클래스가 할당됩니다. 이는 두 번째 템플릿이 사용되었음을 보여줍니다.
페이지는 머리글, 본문, 바닥글 영역으로 구분됩니다. 헤더에는 hd라는 식별자가 부여되고, 본문은 bd, 바닥글은 ft로 지정됩니다.
페이지의 본문은 왼쪽 영역(템플릿에서 지원하는 경우)과 기본 영역으로 구분됩니다. 둘 다 yui-b 클래스가 할당되지만 기본 영역에는 div 태그에 yui-main 식별자 속성이 추가됩니다.