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