출처: http://www.sumanpark.com/temp/styleguide/styleguide.htm
스타일 가이드 예제
이 문서는 [고객사명] 웹사이트 제작을 위한 개발 및 구현에 사용할 스타일 가이드에 대해서 기술합니다. 이 문서는 이 사이트 제작에 사용된 전체적인 파일 구조, 이름 명명 규칙, 디자인과 코딩 가이드라인, 스타일과 참고자료를 포함하고 있습니다. 이 사이트가 유지되는 동안 일관된 디자인이 유지, 지속될 수 있도록 하기 위해서 사이트 개발, 유지보수, 개선 업무에 관여하는 모든 사람들이 이 문서를 반드시 읽고, 이해하고, 이 가이드를 준수해야 합니다.
1.0 코딩 표준
여기서는 [고객사명] 사이트 제작에서 최소한 준수해야 할 코딩 표준에 대해서 기술합니다.
1.1 유효성 검사
이 사이트는 WC3(World Wide Web Consortium)의 XHTML 1.0 Strict와 CSS2.1 명세를 준수하도록 설계했습니다. 이 사이트의 모든 페이지와 새로 추가하는 페이지는 반드시 이 명세에 맞는지 유효성 검사를 해야 합니다.
- XHTML 유효성 검사기
- CSS 유효성 검사기
- XHTML 유효성 검사용 북마클릿 – 이 링크를 브라우저 북마크 툴바에 끌어다 놓으세요.
- CSS 유효성 검사용 북마클릿 – 이 링크를 브라우저 북마크 툴바에 끌어다 놓으세요.
1.2 DOCTYPE 선언
XHTML 1.0 Strict을 준수하기 위해서 모든 (X)HTML 페이지는 다음과 같은 DOCTYPE 선언을 맨 앞부분에 기술해야 합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">1.3 접근성
이 사이트는 WCAG 1.0 (Web Content Accessibility Guidelines 1.0)에서 권고하는 Double-A accessibility conformance를 준수합니다.
1.4 지원 브라우저
다음 표는 이 사이트에서 지원해야 할 브라우저를 보여줍니다.
| 브라우저 종류 | 지원 정도 |
|---|---|
| IE 6+ | 완벽하게 지원 |
| Firefox 1.x | 완벽하게 지원 |
| Safari 2.x | 완벽하게 지원 |
| Opera 8.x | 지원 |
| IE 5.5 | 지원 |
| Netscape 6 | 지원 |
| IE5.x/Mac | 부분적으로 지원 |
| IE 5.0 | 부분적으로 지원 |
| Opera 5.0-7.x | 부분적으로 지원 |
| IE 4.0 | 부분적으로 지원 |
| NN 4.0 | 부분적으로 지원 |
| IE4.0/Mac | 지원하지 않음 |
- 완벽하게 지원 – 현재 많이 이용되는 대부분 브라우저에서 의도한 모든 동작이 되야 한다.
- 지원 – 구버전이지만 많이 이용되는 브라우저에서 대부분 내용을 볼 수 있고 중요 동작이 되야 한다. 몇가지 기능 지원이 안될 수는 있다.
- 부분적으로 지원 – 구버전이면서 버그가 많은 브라우저는 지원하기는 하지만 공식적으로는 지원하지 않는다. 내용과 기능 동작은 해야 하고 기능저하는 표시가 나지 않도록 해야 한다.
- 지원하지 않음 – 버그가 많고 더이상 기술지원이 되지 않는 브라우저. 사용자에게 업그레이드할 것을 권고한다.
1.5 문자집합
모든 페이지는 Unicode UTF-8 문자집합으로 작성해야 합니다.
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">모든 특수문자가 모든 브라우저에서 올바로 표시되고 유효성 검사를 통과하기 위해서 올바른 엔티티나 해당 유니코드 문자로 마크업해야 합니다. 특히 다음과 같이 일반적으로 사용하는 코드를 사용하기 바랍니다.
| 이름 | 심볼 | 코드 |
|---|---|---|
| Ampersand | & | & |
| Left Double Quote | “ | “ |
| Right Double Quote | ” | ” |
| Less Than | < | < |
| Greater Than | > | > |
| en-dash | - | &endash; |
| em-dash | – | &emdash; |
| Ellipsis | … | &helip; |
워드 프로세서에서 내용을 입력할 경우 주의하시기 바랍니다.
1.6 제목, 키워드, 설명
내비게이션을 쉽게 하고 검색엔진 순위를 높이기 위해서 모든 페이지에는 제목, 키워드, 설명 메타데이터를 반드시 포함해야 합니다. 이 내용은 개발자가 아니라 컨텐트 작성자가 반드시 작성해야 합니다.
페이지 제목은 단순하면서도 구분할 수 있고 내용을 간결하게 설명하는 내용이어야 하고 홍보성 문구를 남발해서는 안됩니다. 또한 모든 제목은 일정한 형식을 일관되게 유지해야 합니다.
<title>[고객사명] – [섹션명]:[페이지명]</title>페이지 설명은 해당 페이지의 내용과 목적을 1 - 3개의 짧은 문장으로 작성해야 합니다.
<meta name="Description" content="페이지 요약 내용" />페이지 키워드는 해당 페이지를 나타낼 수 있는 단어를 의미합니다. 해당 페이지와 관계없는 단어를 사용하면 안됩니다.
<meta name="keywords" content="단어 1, 단어 2, 단어 n" />1.7 이미지 설명
사이트 내에서 사용하는 이미지에는 대체 텍스트를 반드시 사용해야 합니다. 이미지의 내용이나 기능에 대한 설명을 Alt 텍스트로 제공해야합니다. 대체 텍스트 내용은 컨텐트 작성자가 반드시 작성해야 하고 개발자가 이 내용을 작성해서는 안됩니다.
<img src="/img/xxxx.gif" alt="이미지 설명 텍스트" width="xx" height="xx" />화면을 꾸미는 목적으로만 사용되는 이미지일 경우에는 대체 텍스트를 생략할 수 있습니다.
<img src="/img/pretty.gif" alt="" width="xx" height="xx" />1.8 링크
링크안에 사용하는 텍스트는 구별하기 쉽고 링크가 가는 곳을 잘 설명할 수 있도록 작성해야 합니다. "여기를 클릭하세요"나 "자세히 보기" 같은 표현은 사용하지 않아야야 합니다.
<a href="news.php">관련 기사 목록 보기</a>링크를 클릭했을 때 새 창을 띄우는 방식은 사용하지 않아야 합니다. 하지만 도움말 창을 띄우거나 해야 할 경우 링크 텍스트 설명을 통해서 사용자가 미리 알 수 있도록 해야 합니다.
<a href="help.php">도움말 보기 (새로운 창)</a>워드나 PDF 같은 문서 다운로드용 링크의 경우 문서 용량, 파일 포맷 등 다운로드할지 여부를 결정할 수 있는 정보를 제공해야 합니다.
<a href="minutes.pdf">회사안내문 PDF 문서 다운로드 (25KB)</a>부가적인 링크 정보는 title 속성을 추가해서 툴팁으로 표시하도록 합니다.
<a href="news.php" title="지난 기사">관련 기사 목록 보기</a>1.9 의미를 살린 HTML
표현을 위한 HTML을 사용하지 말고 의미를 살린 HTML로 마크업 코딩을 해야 합니다. 여기에는 다음과 같은 엘리먼트들이 있습니다.
- h1, h2 등 제목 엘리먼트
- ul, ol, dl 등 목록 엘리먼트
- strong, em
- blockquote, cite
- abbr, acronym, code
- fieldset, legend, label
- caption, thead, tbody, tfoot
구식 엘리먼트는 사용하지 마세요.
1.10 약자
약자나 준말 등이 있을 경우 처음 사용할 때 올바로 마크업에 반드시 추가합니다.
<abbr title="UK">United Kingdom</abr>
<acronym title="NATO">North Atlantic Treaty Organisation</ acronym >
1.11 테이블
테이블은 데이터 표현을 위해서만 사용해야 하고 페이지 레이아웃에 사용해서는 안됩니다. 데이터 테이블은 반드시 <th>, <td>, <thead>, <tbody>, <tfoot> 같은 의미를 살린 엘리먼트를 사용해야만 하고, summary, id, headers 같은 의미에 맞는 속성을 사용해야 합니다.
2.0 스타일
이 부분에서는 이 사이트에서 사용하는 모든 스타일 세부 사항 및 적용 방법과 표시되는 모양에 대해서 설명합니다.
2.1 글꼴 지정
[여기에 스타일을 추가하세요]
2.2 색상
[여기에 스타일을 추가하세요]
2.3 인라인이미지
[여기에 스타일을 추가하세요]
2.4 제목 스타일
[여기에 스타일을 추가하세요]
2.5 링크 스타일
[여기에 스타일을 추가하세요]
2.6 인용문구 스타일
[여기에 스타일을 추가하세요]
2.7 “error” 클래스
[여기에 스타일을 추가하세요]
2.8 “feedback” 클래스
[여기에 스타일을 추가하세요]
2.9 “news-story” 클래스
[여기에 스타일을 추가하세요]
2.9 “box” 클래스
[여기에 스타일을 추가하세요]
3.0 참고 자료
이 부분에서는 이 사이트에서 사용하는 모든 XHTML/CSS 파일에 대한 링크와 설명을 제공합니다. 그리고 템플릿에 해당하는 원본 포토샵 파일과 코딩 관련 자료에 대해서 설명을 제공합니다.
3.1 포토샵 파일
포토샵 파일 원본
3.2 마크업 작성을 위한 안내
일반적인 유형의 페이지 레이아웃, 이름 명명 규칙, 주요 요소 크기와 색상 등은 다음과 같습니다.
3.3 XHTML 템플릿
다음과 같은 핵심적인 유형의 XHTML/CSS 템플릿을 사용해서 다양한 페이지를 제작할 수 있을 것입니다.
3.4 CSS 파일
- Basic - 구버전 브라우저를 위한 기본 타이포그래피 정의. 이 파일은 Layout, General, forms 파일을 포함.
- Layout - 페이지 전체 구조 레이아웃. 레이아웃을 변경하지 않는다면 이 파일을 수정할 필요 없음.
- General - 색상, 타이포그래피, 구조적 요소가 아닌 레이아웃 정의. 주로 이 파일 내용을 수정하게 될 것임.
- Forms - 폼 레이아웃과 스타일 정의. 필요할 경우 이 파일을 여러 개로 분할 가능.
- Home - 홈페이지와 일반적인 스타일을 고쳐 사용할 경우를 위한 스타일시트.
- Print - 인쇄용 스타일시트.
3.5 유용한 링크
XHTML/CSS 관련 유용한 자료 링크
3.6 참고도서
- Web ReDesign 2.0: Workflow that Works by Kelly Goto
- The Unusually Useful Web Book by June Cohen
- Defensive Design for the Web by 37 Signals
- Designing with Web Standards – Jeffrey Zeldman
- The CSS Anthology – Rachel Andrew
- Web Standard Solutions – Dan Cederholm
- CSS Mastery: Advanced Web Standards Solutions – Andy Budd
- DOM Scripting: Web Design with JavaScript and the Document Object Model - Jeremy Keith
'Develop > HTML / CSS' 카테고리의 다른 글
| XHTML 1.0 Strict, XHTML1.1 (0) | 2008.02.05 |
|---|---|
| [링크] CSS2 규격 [한국어 번역] (0) | 2007.01.29 |
| [링크] HTML 4.01 규격 [한글 번역문] (0) | 2007.01.29 |
