Markup Guidelines

Edit

Markup Guidelines

Markup Guidelines^#

본 가이드는 HTML 기반의 개발 업무를 위한 기본 가이드라인입니다.

Author _ 봄눈(chubzo@gmail.com)
Date _ 2008. 9. 8
History
- 2007. 07. 24 [0.1]
- 2007. 09. 27 [0.2]
- 2008. 03. 27 [0.3]
- 2008. 08. 04 [0.4]
- 2008. 09. 08 [0.5]

Policy^#

Web Standards
- 모든 웹페이지는 웹표준을 준수한다.
- W3C HTML Validate 통과를 기준으로 인정한다. 단, 상황에 따른 예외 인정한다.
- Cross Browsing 을 지원한다.
Web Accessiblity
- KWCAG 1.0 준수하며, WCAG 1.0 를 참조한다.
- 웹 접근성 준수 가이드라인 체크리스트(08년 수정안) 참조
Editing
- Coding _ 하드코딩 권장한다.
- Tools _ EditPlus, DreamWeaver, Aptana 권장한다.

Process ^#

기획 : 담당자들간의 정보 공유가 이루어지고, 기획자에 의해 스토리보드 작성.
디자인 & 구조적 설계 : 디자인 작업이 시작되고, 스토리보드에 따른 기능별 HTML, Script, Flash(Action Script) 작성 및 구현.
마크업 개발 : 확정된 디자인을 통한 CSS 작업 및 플래시 결합, Script 적용.
서버 개발 : 서버측 언어를 통한 각종 기능 구현.
테스트 : HTML Validation, Cross Browing 등 웹접근성 테스트 실시.
오픈

HTML^#

Syntax^#

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>new document</title>
 <meta name="Author" content="Bomnun" />
 <meta name="Reply-to" content="bomnun@dbros.co.kr" />
 <meta name="Keywords" content="" />
 <meta name="Description" content="" />
</head>
<body>

</body>
</html>

Document Type Definition ^#

XHTML 1.0 명세를 권장하며, 경우에 따라 HTML 4.01 명세를 따를 수 있다
올바른 DTD 사용(XHTML 1.0 Transitional사용 권장)
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Meta Tag ^#

필수 정보
1. Content-Type, Author, Reply-to, Description, Keyword
Content-Type은 title 보다 우선한다.

Common^#

마크업은 의미를 살리고 최대한 쉽고, 짧게 작성한다
1. Division Layout을 사용하며, Table for Layout 지양한다.
2. 테이블(Table) 중첩은 지양하며, 필요한 경우 협의를 통해서 2,3단계 이내로 사용한다.
3. 자바스크립트(Javascript)를 통한 동적 HTML 생산을 최대한 지양하며, 필요한 경우 협의를 통해 적용한다.
4. 태그(Tag)에 직접 스타일(Stylesheet)을 정의(inline style)하지 않으며, id와 class를 지정한다. 단, 이미지 요소나 폼 요소, 표의 컬럼 가로길이 값은 개발 편의를 위하여 직접 작성할 수 있도록 한다.
속성 값은 반드시 따옴표 사용
컬러(Color) 값에 샵(#) 사용
폰트크기는 서비스의 성격에 맞춰 px과 em 택일 사용. 단, 두가지를 혼합하여 사용하지 말 것.
사용하지 말아야할 태그들(HTML4.01기준 비표준태그 포함)
, <apple>, <basefont>, <center>, <dir>, <isindex>, <menu>, <s>, <strike>, , <xmp>, 
* 태그는 태그로 대체
* 태그 대신 태그로 대체
단독 태그들은 반드시 닫아준다. 태그명 뒤에 공백을 두고 슬래쉬(/)를 쓴다.
 , <img src="" />, <hr />
인라인(inline) 스타일은 사용하지 않는다. 단, 일회성 페이지의 경우는 가능
이미지 태그(img)에 반드시 alt="" 속성을 부여한다. 배경으로 쓰이는 이미지의 경우에도 값을 비워둔채 속성은 쓴다.
html 파일명
11-1. 의미를 살리는 작명
11-2. 두 단어 이상은 밑줄(Underscore)로 연결
img 태그에는 width, height, alt 속성을 반드시 사용한다. 단, border 속성은 스타일에서 해결한다
img { border: none }
ID와 Class Naming
1. HTML에서는 대소문자를 구별하지 않으나, XHTML에서는 구분함을 주의
2. 첫글자는 소문자로 시작, 두 단어 이상일 경우 시작하는 단어를 대분자료 표기하여 이어 붙이다
3. 의미를 살리는 이름을 사용. 레이아웃에서 위치나 순서를 나타내는 이름은 좋지 않다

Comment ^#

모듈의 시작 부분 , 끝 부분  으로 작성
단독일 경우 만 작성
가능한 영문으로 작성(인코딩 문제로 한글 주석이 깨져서 제대로 보이지 않을 수 있음)

CSS^#

Syntax^#

@charset "utf-8";
@import url(ui.css);

/*
Project _ Title
FileName _ style.css
Author _ Bomnun(chubzo@gmail.com)
Date _ 2008. 8. 2
Last _ 2008. 8. 2
*/

/* CSS Init */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,th,td,p { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
hr { display: none; }

Common ^#

CSS 2.1 명세를 따른다
Charset 은 HTML Encoding 설정에 따른다.
@charset "UTF-8";
font-family
한글 폰트일 경우에 한글명칭을 사용하며, 전역(Global)지정으로 영문명을 표기해준다
링크 스타일 a.c:link, a.c:visited, a.c:hover, a.c:active 의 순으로 작성한다
폰트색별 링크 스타일 지정
.nv, a.nv:link, a.nv:visited, a.nv:hover, a.nv:active{}
스타일은 가능한 외부셋을 사용하며, <link>태그를 이용해서 삽입한다. 단, 일회성 이벤트 페이지의 경우는 html문서에 스타일을 포함한다.
작명은 의미를 살려서 하며, 두 단어 이상일 경우 단어의 밑줄(Underscore)방식으로 이어 붙인다.
double_click, second_contents
둘 이상의 스타일 파일을 가질 경우 Import하는 방식을 취한다
@import url(extend.css);
Property Ordering
1. display
2. list-style
3. position
4. float
5. clear
6. width / height
7. padding / margin
8. border / background
9. color / font
10. text-decoration
11. text-align / vertical-align
12. white-space
13. other text
14. content

Comment ^#

각각의 스타일 문서에는 문서정보를 소개하는 주석을 포함한다.
기능별 스타일군 상단에는 기능명을 주석으로 표기한다.
되도록 영문으로 작성한다.

Script^#

Common ^#

사용자 에이젼트 웹접근성 확보가 가능한 스크립트를 사용한다.
공통의 스크립트는 common.js 에 작성한다.

Library ^#

Comment ^#

/*
* Subject
*
* Copyright (c) 2008 Bomnun (chubzo@gmail.com)
* Date: 2008-02-06
*/
var tmp = "";
// Function Comment
function winClose()
{
tmp = "test";
alert(tmp);
}

Reference ^#

Flash ^#

플래시 보안설정 해제 : 로컬PC 작업시 액션스크립트 작동을 위해 플래시 보안설정 해제
Internet Explorer 이올라스 패치

Directory Structor^#

디렉토리 구조는 HTML 디렉토리를 Image 디렉토리와 같은 레벨로 운용할 것인가 말 것인가로 나뉠수 있다. HTML 디렉토리를 루트 아래 나열할 것인가? Images 디렉토리와 같이 확장시킬것인가? 에 따라 전자를 기본형, 후자를 확장형이라 하겠다.

HTML 확장형^#

루트 아래 카테고리(메뉴)별 HTML 디렉토리를 포함하는 대표 HTML 디렉토리와 Images를 같은 레벨로 위치시키는 방법.

장점 : ROOT 아래 디렉토리가 적고, HTML 디렉토리와 Images 디렉토리가 같은 구조로 만들어지기 때문에 유지보수가 쉽다.
- 하드코딩시 HTML 문서 내에서 Image 파일을 삽입시킬 경우 Image 디렉토리를 추적하기가 쉽다.
단점 : 상대경로를 사용할 경우 경로가 깊어진다.

사이트의 규모가 크고, 둘 이상의 웹퍼블리셔가 작업할 때 좋다.

HTML 기본형^#

루트 아래 카테고리(메뉴)별 HTML 디렉토리를 생성하고, Images 디렉토리를 운용하는 방법.

장점 : ROOT 아래 카테고리(메뉴)별 HTML 디렉토리가 위치하므로, 직관적으로 운용이 가능하다.
단점 : HTML 파일이나 디렉토리가 늘어날 경우 관리가 어려워지고, 복잡해진다.

사이트의 규모가 작고, 단독으로 작업하는 경우에 좋다.

File Naming^#

HTML^#

확장자는 소문자 .html 로 한다.
동작구분에 따라 밑줄(Underscore)과 동작명을 이용하여 명명한다.
freeboard_list.html
notice_view.html

Include Files^#

.css, .js, .swf, .flv, .xml 과 같이 공통 요소로 포함되는 파일들
사이트의 규모가 큰 경우 CSS는 카테고리(메뉴)별로 파일을 분리할 수 있다.
common.css / ui.css / category.css ...
자바스크립트의 사용이 많은 경우 라이브러리를 사용할 수 있다.
jQuery / YUI / Prototype / MOOTOOLS ...
JS는 기능별로 파일을 분리할 수 있다.
common.js / lightbox.js / tabs.js ...

Images^#

폴더(folder)는 루트(root) 폴더 아래 images/ 로 생성
서브 폴더를 사용할 경우 html폴더명과 동일하게 생성 images/html폴더명/
공통 폴더는 images/common/ 로 생성

네이밍은 의미를 살리며, 밑줄(Underscore) 방식으로 만든다. 접두어는 HTML Tag의 이름을 사용한다. (_idx : 일련번호)

종류	형식
제목	h*_ (HTML Tag h1~h6을 접두어로 사용)_idx
문단	p_ (이름)_idx
배경	bg_(이름)_idx
이미지글자	txt_(이름)_idx
삽입이미지	img_(이름)_idx
버튼	btn__(이름)_idx
블릿	bul_(이름)_idx
아이콘	ico_(이름)_idx
탭	tab_(이름)_idx
글로벌 네비게이션	gnb_(이름)_idx
로컬 네비게이션	lnb_(이름)_idx
서브 네비게이션	snb_(이름)_idx
글로벌 검색	g_ser_(이름)_idx
게시판 검색	b_ser_(이름)_idx

Web Accessibility^#

Check Item ^#

인쇄를 위한 스타일(CSS) 제공
고대비 디자인 제공
스킵 네비게이션(Skip Navigation) 제공
대체 텍스트(Alternative Text) 제공
- 이미지 요소에는 반드시 alt 지정
- 의미없는 이미지 요소에는 내용이 없는 alt 지정
- 콘텐츠 형식을 나타내는 '~버튼'과 같은 내용은 지정하지 않음
키보드 접근(제어) 가능한 셀렉트 박스 제공
프레임(iframe 포함) 사용시 적절한 title 속성 지정
파일 업로드 서식, 스크롤바, 펼침목록 서식 등 디자인 제한 (사용성을 고려하여, 충분히 필요한 경우에만 대체기술을 통해 적용)
사용자 서식(form) 안에 포함된 콘트롤 요소에 label 또는 title 속성 지정
표 작성시 caption 또는 summary 제공
작은 버튼을 위한 클릭 영역 확보 (more 와 같이 작은 버튼은 지체장애인 뿐 아니라 일반인에게도 클릭이 쉽지 않다)
텍스트 줌인/아웃 버튼 제공

Cross Browsing Level^#

Level	Browser	Win 98	Win XP	Win Vista	Linux	Mac OS
0	MSIE 6.0		○
	MSIE 7.0		○
1	MSIE 6.0	○	○
	MSIE 7.0		○	○
	Firefox 2+		○	○	○	○
2	MSIE 8.0			○
	Safari 3+		○	○		○
	Opera 9+		○	○	○	○
3	Camino 1+					○
	Flock 2+		○	○
	Galeon 2+				○
	Konqueror 3+				○
*	MSIE 5.5	○	○

최근 수개월 이내에 가장 사용율이 높은 사용자 에이젼트를 대표 브라우저로 설정한다.
프로젝트 목적에 따라 부합하는 사용자 에이젼트는 특별히 추가할 수 있다.
미래 사용자가 확대될 것으로 고려되는 사용자 에이젼트의 추가를 고려할 수 있다.

User Agent^#

주요 브라우저 정리

Internet Explorer^#

Testing ^#

DebugBar IE Tester
TredoSoft Mutiple IEs
TredoSoft Internet Explorer 7 Standalone

Development Tools ^#

Mozilla (Firefox, Flock 등)^#

Development Tools ^#

Safari^#

Opera^#

Mobile ^#

Virture Testing ^#

Reference^#

CSS 공식 홈페이지 http://www.w3.org/Style/CSS/
CSS Level 2.1 http://www.w3.org/TR/CSS21/cover.html
CSS Level 2 한글 번역 http://trio.co.kr/webrefer/css2/cover.html
NHN 코딩 가이드 http://html.nhndesign.com/
웹표준 적용 사이트 http://kwsg.org/
브라우져 캠프(사파리 스크린샷) http://www.browsrcamp.com/
정보통신 접근성 향상 표준화 포럼 http://www.iabf.or.kr/
CSS 디자인 사이트 http://www.cssbeauty.com/
HTML, XML, CSS 등 강좌 http://www.cadvance.org/ (한글) / http://www.w3schools.com/ (영어)
CSS Cheat Shee http://lesliefranke.com/files/reference/csscheatsheet.html
각종 레퍼런스 문서 http://appletree.or.kr:8080/quick_reference_cards/
웹 접근성 진단 평가 서비스 http://www.veryfineweb.com/
CSS Design Korea http://forum.standardmag.org/

History

Last edited on 12/16/2008 17:44 by 봄눈

Header

봄눈의 마크업가이드

home

All Pages

Updates

Markup Guidelines

Markup Guidelines#

Policy#

Process #

HTML#

Syntax#

Document Type Definition #

Meta Tag #

Common#

Comment #

CSS#

Syntax#

Common #

Comment #

Script#

Common #

Library #

Comment #

Reference #

Flash #

Directory Structor#

HTML 확장형#

HTML 기본형#

File Naming#

HTML#

Include Files#

Images#

Web Accessibility#

Check Item #

Cross Browsing Level#

User Agent#

Internet Explorer#

Testing #

Development Tools #

Mozilla (Firefox, Flock 등)#

Development Tools #

Safari#

Opera#

Mobile #

Virture Testing #

Reference#

History

Comments (0)

Create a new page

Change the location

Upload a document

Change the location

Preview Template

Bookmarks

What is a bookmark?

Please confirm your email address

Markup Guidelines^#

Policy^#

Process ^#

HTML^#

Syntax^#

Document Type Definition ^#

Meta Tag ^#

Common^#

Comment ^#

CSS^#

Syntax^#

Common ^#

Comment ^#

Script^#

Common ^#

Library ^#

Comment ^#

Reference ^#

Flash ^#

Directory Structor^#

HTML 확장형^#

HTML 기본형^#

File Naming^#

HTML^#

Include Files^#

Images^#

Web Accessibility^#

Check Item ^#

Cross Browsing Level^#

User Agent^#

Internet Explorer^#

Testing ^#

Development Tools ^#

Mozilla (Firefox, Flock 등)^#

Development Tools ^#

Safari^#

Opera^#

Mobile ^#

Virture Testing ^#

Reference^#