지구에 거꾸로 매달리기: July 2006

1. 개요

HTML(Hyper Text Markup Language)과 CSS(Cascading Style Sheet)를 사용한 웹 UI 작성 가이드라인을 설명한다. 이 가이드라인은 HTML 코드의 최소화와 간결성 확보를 통한 웹 어플리케이션 개발 생산성과 유지 보수성 향상을 목표로 한다. 그리고 트래픽의 최소화를 통한 웹 어플리케이션 성능 향상도 목표로 한다.

또한 가능한 대중적으로 사용하는 브라우저(MS IE, 모질라 파이어폭스, 오페라, 사파리 등)에서 정상적으로 동작하는 HTML과 CSS를 작성하는 것을 목표로 한다.

이를 위해서 W3C 표준 기술을 중심으로 웹 UI를 작성하는 것을 권장한다. HTML은 XHTML 1.0을 기준으로 하고, CSS는 대중적으로 많이 사용하는 브라우저를 기준으로 한다. 단, 자세한 버전은 프로젝트와 어플리케이션의 상황에 맞게 조정한다.

2. 웹 표준 가이드

웹 표준과 관련해서 명심해야 하는 사항은 모든 브라우저에서 동일하게 보이도록 UI를 구성하는 것이 목표가 아니라는 점이다. 여기에 과도하게 집중하면 효과보다 큰 비용이 발생할 수 있다. 웹 표준를 통한 웹 UI의 작성의 목표는 모든 브라우저에서 사용자가 사용하는데 큰 불편함을 느끼지 않도록 하는 것이다.

3. HTML 작성 가이드라인

일반적인 HTML 작성 가이드라인은 아래와 같다.

(1) XHTML 사용

일반 HTML 4.0 보다 XML 표준을 준수하는 XHTML 1.0을 사용한다. 따라서 모든 HTML 문서는 아래처럼 시작해야 한다.

<?xml version="1.0" encoding="UTF-8"?> 

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
</html>

단, XML 선언부가 있는 경우에 MS IE 6.0은 비표준 방식으로 UI를 표현함으로 이를 삭제하도록 한다.

그리고 XHTML 작성에 있어서 XML의 일반적인 작성 원칙을 준수한다.

DOCTYPE을 선언한다. 문서의 앞 부분에 DOCTYPE을 선언한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

html 태그에 xmlns 속성을 기입한다.

소문자를 사용한다. XML은 대소문자를 구분하며 XHTML은 태그와 속성의 이름으로 소문자를 사용한다. 그리고 속성의 값도 소문자 사용을 기본으로 한다.

속성 값은 큰 따옴표(Double Quatation) 안에 넣는다. 큰 따옴표 없이 속성에 대한 값을 지정하지 않는다.

<a href="http://www.doosan.com">Doosan</a>

속성에는 항상 값을 기입한다.

& 속성 값에 대해서 &를 사용한다.

모든 태그는 닫는다.

특히 내용이 없는 태그 사용에 주의한다.

이런 태그를 독립형 태그라고 한다.

다음은 독립형 태그로 혼동하기 쉬운 컨테이너 태그이다.

style과 script 태그의 내용은 모두 주석 처리한다. style 혹은 script 태그 안에서 XML 태그 요소를 사용하려면 항상 주석 처리한다.

(2) 이미지 사용의 최소화

이미지 사용을 최소화하며 반복적인 이미지를 사용해야 하는 경우에 CSS의 background-image 속성으로 처리한다.

간격 조절을 위한 투명 이미지는 절대로 사용하지 않는다.

이미지의 크기는 이미지 파일의 절대 크기를 그대로 사용한다. 따라서 width와 height를 img 태그에 지정하지 않는다. 그러나 width와 height 속성을 명시적으로 지정하면 웹 브라우저 처리 속도의 향상을 기대할 수 있다.

(3) 구성 요소 간의 간격 조절

HTML 구성 요소 간의 간격 조절에 투명 이미지나 br 태그나  의 사용을 지양하고 CSS로 조정한다.

(4) 태그의 속성 값의 최소화

HTML로는 자료의 내용 및 구조만을 표현하며, UI 표현과 관련한 정보는 CSS로 나타낸다. 따라서 HTML 태그 속성 사용을 최소화한다.

(5) 들여 쓰기 규정

들여 쓰기는 탭이 아닌 스페이스 4자로 한다.

(6) table 태그의 사용

table 태그는 그리드 형 데이터 표현에만 사용한다. table 태그로 레이아웃을 표현하는 것은 지양해야 하며, table 태그 안에 table 태그가 들어가는 형식은 특별한 이유가 아니면 사용하지 않는다.

데이터를 위한 테이블의 경우, row와 column에 대한 헤더(th 태그)를 명기한다.

(7) 리스트 태그를 통한 구조적 데이터 표현

구조적인 데이터는 ul과 li 등의 리스트 태그로 표현한다.

(8) 상대 경로를 사용

모든 URL 경로의 표현은 상대 경로로 한다. 수정을 어렵게 하는 절대 경로를 사용하는 것은 지양한다.

(9) 텍스트를 이미지로 표현하는 것을 지양

텍스트를 이미지 파일로 표현하는 것을 지양한다. 이미지를 사용하면 네트워크 트래픽을 증가시키는 동시에 수정을 어렵게 한다.

(10) Content-based text styles

표현 방식을 지칭하는 b, big, i, small, sub, sup, tt 태그 사용을 지양하고(Physical Styles) 의미 방식을 지칭하는 strong, em 태그의 사용을 지향한다.

abbr - abbreviated form of a longer word or phrase
acronym - acronym
em - 강조해야 하는 내용
strong - 매우 강조해야 하는 내용
cite - 출처, 인용구
code - 프로그래밍 코드의 일부분
kbd - 사용자가 입력한 내용
samp - 샘플 내용
dfn - 정의
var - 변수

(11) 사용을 지양해야 하는 태그

center, font, basefont, u, s, strike, marquee 등의 태그 사용을 지양한다.

(12) 사용을 지양해야 하는 속성

태그의 align, style 등의 속성 사용을 지양한다.

(13) img 태그 사용의 지양

이미지를 표현하는데 있어서 img 태그의 사용은 지양하고 CSS의 background-image 속성의 사용을 지향한다.

(14) 개발 시 편집을 위한 태그의 활용

ins, del 등의 태그를 사용하여 개발 시 편집 정보를 기술한다.

4. CSS 작성 가이드라인

일반적인 CSS 작성 가이드라인은 아래와 같다.

(1) 소문자 사용

CSS의 내용은 모두 소문자로 작성한다.

(2) 들여 쓰기 규정

들여 쓰기는 탭이 아닌 스페이스 4자로 한다.

(3) 선택자

선택자는 태그의 이름, 태그의 클래스(class) 속성, 태그의 아이디(id) 속성 순으로 지정한다.
태그의 계층 구조를 사용하면 태그의 이름을 통한 선택자 사용 비율을 늘릴 수 있다.

table tbody tr td {
background-color: #ffffff;
font: 1em 굴림, Tahoma, sans-serif;
height: 2em;
padding: 0.5em 0.5em 0 1em;
overflow: hidden;
}

클래스 속성이나 아이디 속성을 사용하는 경우에도 앞에 태그를 지정한다.

div.title-area {
...
}

div#header {
...
}

(4) 기본 설정의 초기화

html, body, form 태그 등의 기본 설정이 브라우저에 따라서 상이하다. 따라서 이를 CSS를 통해서 동일하게 설정한다.

html, body, form {
margin: 0;
padding: 0;
}

(5) 상속을 통한 속성 반복의 최소화

상속을 통하여 동일한 속성 값을 반복하는 것을 지양한다.

div {
width: 775em;
}

div.title-area {
color: #0b9af3;
margin: 0 0 1em 0;
padding-left: 2em;
}

(6) em을 이용한 크기 설정

해당 요소의 크기를 조정하기 위해 사용하는 여러 단위 중에서 em을 사용하여 크기를 조정한다. 단 border, margin, padding 등과 같은 경우에는 px를 사용할 수 있다.

(7) 색상 속성

색상(color) 속성에 대한 값은 색상 이름이 아닌, 헥사 코드로 표현한다.

bgcolor: #ffffff;

rgb로 표현할 수도 있다.

bgcolor: rgb(255, 255, 255);

(8) background-image 속성을 통해서 이미지 설정

background-image 속성을 통해서 HTML에서의 이미지(img) 태그 사용을 최소화한다.

div.title-area {
background-image: url(../image/label/Title2.gif);
background-position: 0 -2px;
background-repeat: no-repeat;
margin: 0 0 1em 0;
padding-left: 2em;
}

(9) 집합 속성의 사용을 지향

CSS의 내용을 간결하게 가기 위해서 집합 속성을 사용한다. 아래는 개별 속성을 사용한 경우이다.

div.title-area {
margin-top: 5px;
margin-right: 4px;
margin-bottom: 3px;
margin-left: 2px;
}

위의 표현을 아래처럼 집합 속성으로 표현한다.

div.title-area {
margin: 5px 4px 3px 2px;
}

(10) 웹 브라우저 독립적인 속성의 사용

특정 웹 브라우저에 종속적인 속성의 사용을 지양하며, W3C가 제공하는 아래의 속성 테이블을 중심으로 CSS 파일을 작성한다.

Cascading Style Sheets, level 2 CSS2 Specification, Appendix F. Property index (http://www.w3.org/TR/REC-CSS2/propidx.html)

(11) CSS 파일 수의 최소화

CSS 파일의 수를 최소화한다. 유사한 형태의 업무 화면은 하나의 CSS 파일로 조정한다. 각 업무 화면에 특징적인 요소를 별개의 CSS 파일로 지정하기 보다는 HTML의 style 태그를 이용해서 설정하는 것을 권장한다.

단 메인 화면, 사이트 맵 등 업무 화면과는 독립적인 화면에 대해서는 별도의 CSS 파일을 가져간다.

(12) 특기 사항

CSS와 관련한 특기 사항은 아래와 같다.

select 태그 CSS 적용 - border 속성을 지정할 수 없음

5. 참고 자료

지구에 거꾸로 매달리기

2006-07-07

웹 UI 가이드라인