Coding Convention
for Markup Languages (HTML/CSS)

마크업 개발은 웹서비스의 기본 골격을 형성하기 때문에 디자인, 브라우저, 스크립트, 성능, 접근성 등과 밀접한 관계가 있다.
모든 브라우저에서 콘텐츠를 손실 없이, 빠르고 쉽게 사용자에게 전달할 수 있고 유지보수에 투자되는 비용을 최소화하기 위해 통일된 코드 작성법을 제시한다.
동일한 작업자가 유지보수를 진행 할 확률은 매우 낮으며 따라서, 다른 작업자도 코드를 빠르고 정확하게 이해할 수 있도록 작성하는 것은 코드의 유지보수 비용을 절감하고 업무 효율을 높이는 데 결정적인 역할을 한다. 적어도 한 프로젝트의 마크업 코드는 같은 협약에 따라 작성해야 한다.

1. 용어

1.1 요소 (Element) `HTML` `CSS`

HTML 문서를 구성하는 요소를 의미한다. 일반적으로 시작 태그, 내용, 종료 태그로 구성된다.

1.2 속성 (Attribute) `HTML` `CSS`

요소에 부여할 수 있는 특성을 의미한다. 기본값이 설정되어 있으나 애트리뷰트를 선언하여 다른 값으로 설정할 수 있다.

1.3 선택자 (Selector) `HTML` `CSS`

요소에 CSS 스타일을 적용하기 위한 패턴이다.

명칭	예	설명
공통 선택자	*	어떤 요소와도 일치함.
타입 선택자	div	해당 요소와 일치함.
하위 선택자	div p	해당 요소의 하위의 모든 요소와 일치함.
자식 선택자	div > p	해당 요소의 자식 요소와 일치함.
class 선택자	div.class	해당 요소의 class 애트리뷰트값과 일치함.
id 선택자	div#id	해당 요소의 id 애트리뷰트값과 일치함.

1.4 성질 (Property) `CSS`

요소에 부여할 CSS 스타일 특성을 의미한다. 기본값이 설정되어 있으나 속성을 선언하여 다른 값으로 설정할 수 있다. 각 속성 단위는 세미콜론(;)으로 구분지어 선언한다.

1.5 값 (Value) `HTML` `CSS`

속성에 부여하는 값을 의미한다.

1.6 약속어 `HTML` `CSS`

이 문서에서 약속어는 객체, 이미지, 파일 및 폴더의 네이밍 시 의미를 일관되게 표현하기 위해 미리 지정해 놓은 일종의 언어 규칙을 의미한다.

목록으로 돌아가기

2. 네이밍

id/class, 이미지, 파일, 폴더의 네이밍 규칙을 설명한다. 다음과 같은 기본 네이밍 규칙을 준수한다.

2.1 일반 규칙

이름은 영문 소문자, 숫자, 하이픈(-)로 작성한다. 특수한 경우를 제외하고 CSS만 적용 하기 위한 id 사용은 지양 한다.

2.2 시작 이름

이름은 영문 소문자로만 시작할 수 있다. 단, CSS 주석문은 영문 대문자를 허용한다. (예: /* BBK DEV PJH 171221 */)

잘못된 예	올바른 예
Btn	btn
2Btn	btn2
_btn	btn
btn_	btn

2.3 영문 소문자, 숫자, 하이픈(-) 조합

영문 소문자, 숫자, 하이픈(-) 만 사용할 수 있다.
하이픈(-)은 단어와 단어 조합할 때만 사용한다.
하이픈(-)이 포함된 약속어는 숫자, 영문 소문자와 조합하여 사용할 수 있다.

기본형	잘못된 예	올바른 예
section	sectionList	section-list
number	-	no1, no2, no3

2.4 id, class 규칙 `HTML` `CSS`

약속어는 레이아웃 약속어, 객체 약속어, 이미지 약속어

레이아웃

기본형	응용형	설명
wrap	wrap	페이지 전체 영역
header	header	머리글 영역
container	container	본문 영역
contents	contents	주요 콘텐츠 영역
footer	footer	꼬리글 영역

용도

기본형	응용형	설명
약속어	pop	pop-close
약속어	btn	btn-edit
약속어	ico	ico-new
약속어	bul	bul-list
약속어	nav	nav-left

class 확장

종속 확장: 기본형 class에 종속되어 여백, 색깔, 행간 등의 몇 가지 속성을 부여하고자 할 때 사용하는 class.
독립 확장: 기본형 class의 변형이 타입으로 분류할 만큼 클 경우 사용하는 class.

기본형	확장형	응용형	설명
btn-submit	btn-submit-d1 btn-submit-d2	btn-submit btn-submit-d1	종속 확장
btn-submit	btn-submit-i2 btn-submit-i2	btn-submit-i2	독립 확장

2.5 파일 및 폴더 규칙 `File`

파일 이름은 '형태_서비스명_의미_상태' 순서로 조합한다. (경우에 따라 서비스명을 제외하고 생략 할 수 있다.)

분류	예제	설명
HTML	order.html order_list.html order_reply_list.html	서비스 파일.
HTML	pop_event.html pop_event_list.html	팝업 파일.
HTML	ifr_news.html	iframe 파일.
HTML	inc_header.html	include 파일.
HTML	tmp_test.html	임시 파일.
CSS	member.css member.join.css	서비스 파일.
CSS	common.min.css	압축 파일

2.6 이미지 규칙 `File`

언더바(_) 조합
같은 분류의 이미지가 두 개 이상이면 파일 이름 마지막에 숫자를 추가하여 구분한다.
이미지 이름은 이미지 확장자와 관계 없이 순차적으로 적용한다. 예) bu_dot1.gif, bu_dot2.jpg, bu_dot3.png
임시 이미지는 tmp_를 조합한다. 예) tmp_
이미지 이름은 '형태_의미_상태' 순서로 조합한다.

잘못된 예	올바른 예	설명
on_notice_tab1.png	tab_notice1_on.png	형태_의미_상태 순으로 조합한다.
bpe.png	btn_postscript_edit.png	임의로 축약하지 않는다.
bg_Main.png	bg_main.png	영문 소문자만 사용한다.
1ico_new.png	ico_new.png	영문 소문자만 사용한다.

목록으로 돌아가기

3. HTML 코드 작성 규칙

HTML 코드의 기본 작성 규칙과 들여쓰기, 빈 줄 사용, DTD 및 인코딩 선언, 주석 표기 규칙을 설명한다.

3.1 기본 규칙

HTML 코드를 작성할 때 다음과 같은 기본 규칙을 준수한다.

3.1.1 W3C Validation

HTML은 해당 DTD의 명세에 맞게 작성하며, W3C validation을 통과해야 한다. 단, HTML5 DTD 선언 시 다음 오류 내용은 허용한다.

• <iframe>의 frameborder, marginwidth, marginheight, scrolling 속성

3.1.2 영문 소문자 사용

DTD를 제외한 모든 요소와 애트리뷰트는 소문자로 작성한다.

잘못된 예	올바른 예
<SPAN Class="desc">간단한 설명</SPAN>	<span class="desc">간단한 설명</span>
<IMG SRC="/IMG/THUMB.jpg" alt="섬네일">	<img src="/img/thumb.jpg" alt="섬네일">

3.1.3 속성 값 표기

애트리뷰트값은 큰따옴표(" ")로 묶는다

3.1.4 문자 엔티티 참조 (Character Entity References) 사용

특수 기호는 문자 엔티티 참조를 사용하여 코드로 변환한다. 자세한 사항은 아래 경로에서 확인할 수 있다. 단, 아포스트로피(‘)는 '로 선언한다.

HTML 4.01의 Character entity references:
http://www.w3.org/TR/html4/sgml/entities.html
HTML 5의 Character references:
http://www.w3.org/TR/html5/syntax.html#character-references

특수기호를 Character entity references로 변환하지 않으면, 브라우저가 이를 시작/종료 요소나 애트리뷰트로 잘못 해석할 수 있다.
자동으로 생성되는 링크의 경로나 이미지의 alt값에도 Character Entity References가 바르게 적용되도록 한다.

3.1.5 Javascript 선언 지양

Javascript를 사용하되 태그에 inline방식으로 사용하는 이벤트 속성 및 스크립트는 HTML 산출물에 선언하지 않는다.
(<head>태그 사이 또는 <body>태그 최하단에 선언할 수 있다)

잘못된 예

<input type="text" id="user_id" name="user_id" onfocus="this.className='focus'">

올바른 예

<input type="text" id="user_id" name="user_id" class="focus">
...
<script>
document.getElementById("user_id").addEventListener("focus",function(e) {
  e.target.className = "focus";
}, false);
</script>

3.2 들여쓰기

절대 space와 tab을 섞어서 사용하지 않는다. 반드시 space와 tab 둘 중 하나를 선택해야 한다. 이는 프로젝트의 성격에 따라 선택이 가능한 부분이며, space를 사용할 경우 2문자 또는 4문자를 사용한다. 들여쓰기에 대한 규칙이 합의되면 편집기의 들여쓰기 설정을 규칙대로 설정 해놓고 사용할 것을 권장한다.

3.3 빈 줄

의미 있는 객체를 구분하기 위하여 코드 그룹 간 1줄씩 빈 줄을 만드는 것은 허용한다. 빈 줄의 간격은 1줄을 초과하지 않는다.

잘못된 예

<div>내용</div>


<div>내용2</div>

올바른 예

<div>내용</div>

<div>내용2</div>

3.4 문서 형식 정의 (Document Type Definition, DTD)

3.4.1 선언

HTML 문서는 반드시 DTD를 선언한다.

HTML5 (기본)

<!DOCTYPE html>

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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">

Quirks Mode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

선언한 DTD 앞에 다른 문자가 오는 경우 표준 문법으로 마크업하더라도 브라우저에서 Quirks Mode로 인식되어 올바르게 해석되지 않는다.

3.5 인코딩 (Ecoding)

HTML 문서는 반드시 인코딩 정보를 선언한다. 인코딩 설정은 DB의 인코딩 방식과도 관련이 있으므로 반드시 담당 개발자와 협의하여 정해야 한다.

HTML5 (기본)

<meta charset="utf-8">

HTML 4.01 Transitional, XHTML 1.0 Transitional

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

utf-8은 다국어 지원이 가능하며, euc-kr보다 표현 가능한 한글(고어, 음절 등)이 더 많다. 한글은 utf-8에서 3바이트, euc-kr에서 2바이트를 차지하기 때문에, utf-8이 euc-kr에 비하여 DB 저장 용량이나 트래픽이 많을 수 있다. Internet Explorer 7 이상의 버전에서 아래와 같이 링크의 밑줄이 글자와 붙어 보이는 현상이 있다. HTML, CSS 파일을 저장할 때 반드시 설정한 인코딩을 선택하여 저장한다.

3.6 주석 `HTML`

HTML 주석의 시작과 종료는 아래와 같이 표기하며, 기본 형식에 맞게 작성한다.

주석 기호와 주석 내용 사이에는 반드시 공백 한 칸이 있어야 하며 시작과 종료 주석의 주석 내용은 동일해야 한다.

신규 주석 (단일 행)

<!-- 주석 내용 -->

신규 주석 (복수 행)

<!-- 주석 내용 -->
<!-- //주석 내용 -->

추가 주석 (서비스명 + 팀 + 작성자 + 작성일)

<!-- [BBK DEV PJH 180119] 주석내용 -->

<!-- [BBK DEV PJH 180120] 주석내용 -->
<!-- //주석내용 -->

마크업과 개발의 편의를 위해 작성한 주석은 실제 서비스를 적용할 때 반드시 삭제한다. (업무 편의상 적용하지 않음)

3.7 속성 (Attribute) `HTML`

특정 요소에 class, style을 선언할 때는 선언 순서를 준수한다. 다음과 같이 class와 style은 제일 뒷부분에 선언한다.

순서	의미	대표되는 속성
1	일반	rel, type
2	선택자	name, id, class
3	값	value, src, alt, href, title, for...
4	데이터	data-*
5	css	style
6	이벤트	onclick, onchange, onmouseover, onmouseout...

잘못된 예

<input data-action="edit" type="text" title="사용자ID" style="width:100px" onclick="func()" id="user_id" class="input-text" name="user_id">

올바른 예

<input type="text" id="user_id" class="input-text" name="user_id" title="사용자ID" data-action="edit" style="width:100px" onclick="func()">

3.8 요소 (Element) `HTML`

3.8.1 html 요소 HTML

class 속성은 선언하지 않는다.

HTML5 (기본)

<html lang="ko">

HTML 4.01 Transitional, XHTML 1.0 Transitional

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

lang 애트리뷰트는 User Agent가 언어를 올바로 해석할 수 있게 도와주며, 검색과 음성 장치(speech synthesizers)에 활용된다. 언어 코드는 모든 요소에 사용할 수 있지만 HTML 요소에 해당 문서의 주 언어 코드만 선언한다.

HTML 4.01 Specification, XHTML 1.0 Specification에서 자연어는 RFC 1766에 명시된 언어 코드를 사용한다. RFC1766은 각각 ISO639, ISO3166을 참조하며, ISO Specification은 유료이므로 아래 웹 페이지를 참조한다.

MSDN Language Codes: http://msdn.microsoft.com/en-au/library/ms533052(VS.85).aspx 자주 사용하는 국가코드는 en(영어), ja(일본어), zh-cn(중국어)이다.

3.8.2 head 요소 HTML

meta, title, link, style, script 순서로 요소를 선언한다.

HTML5 (기본)

<head>
<meta charset="utf-8">
<title>메뉴 : 브랜드명 서비스</title>
<link rel="stylesheet" href="css/default.css">
<style>
…
</style>
<script src="js/default.js"></script>
<script>
…
</script>
</head>

HTML 4.01 Transitional, XHTML 1.0 Transitional

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>메뉴 : 브랜드명 서비스</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<style type="text/css">
…
</style>
<script type="text/javascript" src="js/default.js"></script>
<script type="text/javascript">
…
</script>
</head>

language 속성은 HTML 4 이전 버전의 하위 호환성을 위해 사용하는 비표준 속성으로, 사용하지 않는다.

HTML4.01 문서의 경우 <script>와 <style> 선언 시 type 속성을 선언한다.

3.8.3 폼 컨트롤 요소 HTML

폼 컨트롤 요소를 마크업 할 때 form, fieldset, legend 요소를 다음과 같이 선언한다. 단, 필요에 따라 개별적으로 사용할 수 있다.

<fieldset> <legend>
fieldset은 form 요소의 자식 노드로 선언하여 폼 컨트롤 요소들을 그루핑하기 위해 선언하고 legend는 fieldset 요소의 자식 요소로서 폼 컨트롤 요소들의 그룹 이름을 표현하기 위해 선언한다.

<form>
<fieldset>
<legend>개인정보</legend>
...
</fieldset>
</form>

<input> (type=text, password, file)
title 속성을 통해 스크린 리더 사용자는 주변 맥락에 대한 이해 없이 각 요소에 독립적으로 접근해도 폼을 이해할 수 있다.

<label for="user_id">아이디</label> <input type="text" id="user_id" name="user_id">

<input type="password" id="user_password" name="user_password" title="비밀번호">

동일한 스타일의 너비값이 다를 경우 style 속성를 이용하여 width값을 제어한다.

<input> (type=checkbox, radio)

<input type="radio" name="alignment" id="align_left"> 
<label for="align_lft">왼쪽정렬</label>

<input type="checkbox" name="sports" id="soccer"> 
<label for="soccer">축구</label>

<input> (type=image, button, submit)
type속성이 image 일 경우 alt 속성을 반드시 선언한다.

<input type="image" src="btn_confirm.gif" alt="확인">

<button>
type 속성을 선언한다.

<button type="button">열기</button>
<button type="submit">전송</button>

<select>
동일한 스타일의 셀렉트 박스이나 너비값이 다르면 선택적으로 style 애트리뷰트를 이용하여 width값을 제어한다.

<label for="grade">등급</label>
<select id="grade" style="width:100px">
<option>1등급</option>
<option>2등급</option>
</select>

<select title="등급" style="width:100px">
<option>등급</option>
</select>

<textarea>
cols, rows 속성를 선언한다.

<textarea name="contents" cols="30" rows="5" title="내용"></textarea>

CSS를 정상적으로 불러오지 못하는 상황에서도 사용에 문제가 없도록 cols, rows의 속성 값은 각각 최소 30, 5 이상이 되도록 선언한다.

3.8.4 표 요소 HTML

<table>
표의 요약 내용을 표기해야 할 때 summary 속성을 선택적으로 사용할 수 있다.

<table summary="표 요약 내용">

<caption>
표의 제목을 표현하기 위해 사용한다. caption 요소는 반드시 선언한다.

<caption>표 제목/caption>

<colgroup>
col 요소를 그루핑하여 디자인을 제어할 때 선언한다. 이 요소는 선택적으로 사용한다.

<colgroup>
<col>
</colgroup>

<col>
width, span 속성을 아래와 같이 선택적으로 선언한다.

<col>
<col style="width:100px">
<col style="width:50%">
<col span="2" style="width:100px">

<thead>
표 머리글을 그루핑할 때 선언한다.

<thead>
<tr>
<th>구분</th>
<th scope="col" abbr="가격">가격(won)</th>
<th scope="col" abbr="열량">열량(kcal)</th>
</tr>
</thead>

<tfoot>
표 바닥글을 그루핑할 때 선택적으로 선언한다. tfoot 요소는 thead와 tbody 요소 사이에 위치해야 한다.

<thead>
...
</thead>

<tfooter>
<tr>
<th>계</th>
<td>6,500</td>
<td>650</td>
</tr>
</tfooter>

<tbody>
...
</tbody>

<th>
scope, abbr, id 속성을 선언한다. scope 속성은 반드시 선언해야 한다.(id, Headers 사용 시 선언하지 않음). abbr과 id애트리뷰느는 선택적으로 선언한다.

<th scope="col" abbr="가격">음식값</th>

scope 속성: th 요소에 동반되는 애트리뷰트로서 현재의 셀이 어느 셀의 제목인지 범위를 명시한다. scope 애트리뷰트의 값으로는 col, colgroup, row, rowgroup이 있다.

abbr 속성: th 요소에 동반되는 애트리뷰트로서 포함하고 있는 콘텐츠를 축약하여 표기 할 수 있을 때 약어를 표기하는 데 사용한다. 헤딩 셀의 내용을 반복해서 음성으로 출력하는 도구들은 abbr 애트리뷰트에 표기된 약어를 읽는다.

<tbody>
표 본문을 그루핑하기 위해 선언한다. 테이블의 본문(body)이 하나이고 나 이 없을 경우 생략할 수 있다.

<tbody>
<tr>
<th scope="row">자장면</th>
<td>3,000</td>
<td>300</td>
</tr>
</tbody>

올바른 예

<table summary="짬뽕은 자장면보다 500원 비싸고 열량이 50kcal 높다">
<caption>자장면과 짬뽕의 가격과 열량 비교</caption>
<col span="2" style="width:100%">
<thead>
<tr>
<th scope="col" >구분</th>
<th scope="col" abbr="가격">가격(won)</th>
<th scope="col" abbr="열량">열량(kcal)</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row" >계</th>
<td>6,500</td>
<td>650</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">자장면</th>
<td>3,000</td>
<td>300</td>
</tr>
<tr>
<th scope="row">짬뽕</th>
<td>3,500</td>
<td>350</td>
</tr>
</tbody>
</table>

3.8.6 기타 요소 HTML

<a>
href, target, title 애트리뷰트를 선택적으로 선언한다.

<a href="print.nhn" target="_blank" title="새창">인쇄하기</a>

<img>
src, width, height, title, alt, usemap 속성을 선택적으로 선언한다.

<img src="logo.gif" width="30" height="10" title="고객센터" alt="고객지원" usemap="#help">

<map>
map 요소의 name 속성을 선언하여 img 요소의 usemap 속성과 같은 이름으로 커플링한다.

<img src="img_main.gif" width="696" height="196" title="한글날이벤트" alt="한글날이벤트, 한글을
글꼴로 나눕니다" usemap="#help">
<map name="help">
<area shape="rect" coords="506,48,608,139" href="#" target="_blank" title="고객센터"
alt="고객센터, 모든 궁금증이 해결되는 곳">
</map>

<area>
shape, coords, href, target, title, alt 속성을 선택적으로 선언한다.

<area shape="rect" coords="506,48,608,139" href="#" target="_blank" title="새창" alt="고객센터, 모든 궁금증이 해결되는 곳">

<iframe>
src, width, height, title, frameborder, marginwidth, marginheight, scrolling 속성을 선언한다.

<iframe src="nbox.html" width="410" height="800" title="공지사항 게시판" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

참고
frame을 포함하는 페이지의 도메인과 iframe에서 불러오는 페이지의 도메인이 다르면, 크로스 도메인 설정을 위해 별도의 소스 코드가 추가되어 성능에 영향을 줄 수 있다.

iframe의 높이값이 콘텐츠에 따라 유동적이어야 한다면 별도의 자바스크립트 코드가 추가되어 성능에 영향을 줄 수 있다.

검색 엔진에서 iframe의 내용만 추출하여 표시하면 전체 페이지의 레이아웃이 비정상적으로 보일 수 있으며, 주변 맥락(머리글, 바닥글, 메뉴)이 노출되지 않아 검색 엔진 최적화(SEO) 관점에서 적합하지 않다.

iframe은 가장 마지막으로 로딩되기 때문에 페이지 로딩 초기에는 화면이 비어 보일 수 있다.

모바일에서는 iframe 스크롤에 대한 렌더링이 브라우저별로 다르며, CSS 말 줄임이 동작하지 않는 브라우저가 있다.

3.8.7 초기파일 HTML

웹사이트

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>메뉴 : 브랜드명 서비스</title>
<link rel="stylesheet" type="text/css" href="sevice_name.css">
</head>
<body>
  <div id="wrap">
  <!-- u_skip -->
  <div id="u_skip">
  </div>
  <!-- //u_skip -->
  <!-- header -->
  <div id="header">
  </div>
  <!-- //header -->
  <!-- container -->
  <div id="container">
  <!-- content -->
  <div id="content">
  </div>
  <!-- //content -->
  </div>
  <!-- //container -->
  <!-- footer -->
  <div id="footer">
  </div>
  <!-- //footer -->
</div>
</body>
</html>

모바일 웹사이트

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="..">
<title>상단: 헤더명</title>
<link rel="stylesheet" type="text/css" href="css/..">
</head>
<body class="..">
  <!-- u_skip -->
  <div id="u_skip" >
  </div>
  <!-- //u_skip -->
  <!-- header -->
  <header role="banner">
  </header>
  <!-- //header -->
  <hr />
  <!-- content -->
  <div id="content" role="main">
  </div>
  <!-- //content -->
  <hr />
  <!-- footer -->
  <div id="footer" role="contentinfo">
  </div>
  <!-- //footer -->
</body>
</html>

목록으로 돌아가기

4. CSS 코드 작성 규칙

4.1 기본 규칙 `CSS`

4.1.1 W3C Validation CSS

CSS는 사용 가능한 Hack과 CSS3 속성을 제외하고 W3C Validation을 통과해야 한다.

4.1.2 영문 소문자 사용 CSS

모든 속성은 영문 소문자로만 작성한다.

잘못된 예	올바른 예
.Class {Background-Color: #FFFFFF}	.class {background-color: #fff}

4.1.3 따옴표 사용 범위 CSS

공백이 포함된 폰트명, 한글 폰트명, 문자열 데이터 타입, filter 속성의 파라미터값은 작은따옴표(' ')로 감싸며, @charset 선언 시에는 속성 값을 큰따옴표(" ")로 감싼다. 그 외의 경우에는 따옴표를 사용하지 않는다. filter 속성의 파라미터값에 따옴표를 사용하는 것은 선택사항이다. url 데이터 타입에는 작은 따옴표를 사용하지 않는다.

잘못된 예

charset "utf-8";
.class {
  font-family: 돋움; 
  filter:progid: DXImageTransform.Microsoft.AlphaImageLoader(src="fill.png", sizingMethod="scale"); 
  background: url('bg.gif') no-repeat; 
  content: "Chapter"
}

올바른 예

charset "utf-8";

.class {
  font-family: '돋움'; 
  filter:progid: DXImageTransform.Microsoft.AlphaImageLoader(src='fill.png', zingMethod='scale'); 
  background: url(bg.gif) no-repeat; 
  content: 'Chapter:'
}

4.1.4 마지막 세미콜론 사용 지양 CSS
마지막 속성의 세미콜론(;)은 삭제한다.

잘못된 예

.class {width: 100px; height: 100px;}

올바른 예

.class {width: 100px; height: 100px}

4.2 들여쓰기 `CSS`

CSS 코드를 작성할 때는 들여쓰기를 하지 않는다. 단, 중괄호”{}”가 중첩되는 경우 예외로 한다

잘못된 예

#content{border:1px solid #000}
  #content .class{color:#000}

@media all and (minwidth:480px){.vod_wrp2{height:278px}}

올바른 예

#content{border:1px solid #000}
#content .class{color:#000}

@media all and (min-width:480px){
  .vod_wrp2{height:278px}
}

4.3 공백 `CSS`

쉼표로 구분되는 선택자 간 공백, 속성 간 공백 및 속성 값 사이 공백, 중괄호 좌, 우 공백은 제거한다.

잘못된 예

a:hover, a:active, a:focus { text-decoration:none; color:#000 }

올바른 예

a:hover,a:active,a:focus{text-decoration:none;color:#000}

4.4 빈줄 (Line Break)`CSS`

의미 있는 객체를 구분하기 위하여 코드 그룹 간 1줄씩 빈 줄을 넣을 수 있다. 단, 빈 줄의 간격은 1줄을 초과하지 않게 한다.

잘못된 예

/* 그룹 1 */
.class1{border:1px solid #000}
.class1 img{border:1px solid #000}
빈 줄
빈 줄
/* 그룹 2 */
.class2{border:1px solid #eee}
.class2 img{border:1px solid #eee}

올바른 예

/* 그룹 1 */
.class1{border:1px solid #000}
.class1 img{border:1px solid #000}
빈 줄
/* 그룹 2 */
.class2{border:1px solid #eee}
.class2 img{border:1px solid #eee}

4.5 줄바꿈 `CSS`

속성, 속성 값 사이 줄 바꿈은 허용하지 않는다. 단, 선택자와 중괄호”{}”가 중첩되는 경우 예외로 한다.

잘못된 예

.class1,
.class2,
.class3{
  width:
    100px;
  color:
    #000
}

@media print{#header{display:none}}

올바른 예

.class1,.class2,.class3{width:100px;color:#000}

.class1,
.class2,
.class3{width:100px;color:#000}

@media print{
  #header{display:none}
}

4.6 인코딩 (Encoding)`CSS`

폰트 이름이 영문이 아닐 때 이를 브라우저에서 바르게 표현하고, HTML에서 불러온 스타일을 제대로 렌더링하려면 반드시 CSS 인코딩을 선언해야 한다.

@charset "utf-8";

HTML과 동일한 인코딩을 문서 첫 줄에 공백 없이 선언한다. 파일을 저장할 때는 반드시 선언한 인코딩과 동일한 인코딩을 선택한다.

4.7 선택자 (Selector) `CSS`

4.7.1 공통 선택자 사용 지양 CSS
최 상위 공통 선택자 '*'는 웹 페이지의 성능을 떨어뜨리고, Internet Explorer에서는 주석까지 영향을 받을 수 있으므로 사용하지 않는다.

4.7.2 id 선택자 범위 CSS
id 선택자는 2.2 id 및 class 네이밍 규칙에서 정의한 레이아웃(wrap, header, container, content, footer)에만 사용한다.

4.7.3 다중선택자 사용 CSS
대응 범위에 인터넷 익스플로러 6.0 브라우저 환경이 포함 될 경우 다중선택자 오류가 발생하므로 id와 class, class와 class 간의 다중선택자를 사용하지 않는다.

잘못된 예

.class{width:980px}
.class.bg{background:yellow}
.class.bg_v1{background:green}

올바른 예

.class{width:980px}
.bg{background:yellow}
.bg_v1{background:green}

참고
다중선택자란 두 선택자의 조합에 의해 속성이 부여되는 경우를 의미한다.
아래 예에서 background:yellow 속성은 .class와 .bg가 동시에 선언될 때만 의미가 있으며,
background:green 속성은 .class와 .bg_v1이 동시에 선언될 때만 의미가 있다.
인터넷 익스플로러 6.0에서는 id와 class 간 다중선택자를 사용할 경우 두 번째 선언된 다중선
택자를 무시하는 버그가 있으며, class와 class 간의 다중선택자를 잘못 해석하는 버그가 있다.
이와 같은 버그를 방지하기 위해 다중선택자를 사용하지 않도록 한다.

<style>
.class{width:980px}
.bg{background:yellow}
.bg_v1{background:green}
</style>

<p class="class bg">다중선택자</p>
<p class="class bg_v1">다중선택자</p>

4.8. 성질 (property)`CSS`

4.8.1 성질 선언 순서 CSS
성질을 선언할 때는 그 쓰임새가 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 것 순서로 선언한다.

순서	의미	대표되는 속성
1	레이아웃	display, visibility, overflow, float, clear, position, top, right, bottom, left, z-index
2	BOX	width, height, margin, padding, border
3	배경	background
4	글꼴	font,color, letter-spacing, text-align, text-decoration, text-indent, vertical-align, white-space
5	기타	위에 언급되지 않은 나머지 속성들로 폰트의 관련 속성 이후에 선언하며, 기타 속성 내의 선언 순서는 무관함

속성 선언 순서 기준: 1: 레이아웃, 2: BOX, 3: 배경, 4: 폰트, 5: 기타 순으로 선언한다.
밴더속성과 핵속성은 해당 속성 뒤에 선언한다.

4.8.2 속성 값 축약 CSS
CSS 최적화를 위해 다음과 같이 속성 값을 축약한다.

축약 전	축약 후	설명
#555555	#555	16 진수 컬러 코드값
background--position:left center background--position:right bottom	background-position:0 background-position:100%	위치값
top:0px	top:0	0값
padding:20px 20px 20px 20px margin:0 auto 0 auto	padding:20px margin:0 auto	동일한 속성 값

4.8.3 약식 속성 사용 범위 CSS
border 와 background 는 약식 속성을 우선적으로 사용하며, font 약식 속성은 사용하지 않는다.

border 속성 값은 border-width, border-style, border-color 순서로 선언한다
background 속성 값은 background-color, background-image, background-repeat, background-position, background-size, background-attachment, background-origin, background-clip 순서로 선언한다. 배경 스타일 속성을 초기 선언할 때는 반드시 background 단일 속성을 사용하며, 이후 배경의 부분적인 속성이 변경될 경우 background 관련 속성(background-color, background-image, background-repeat, background-position, background-size, background-attachment, background-origin, backgroundclip)을 선언한다.
font 폰트 스타일은 약식 속성으로 선언하면, font-weight:bold는 상속되지 않고 font 속성의 디폴트값인 font-weight:normal로 변경되기 때문에 불필요한 속성 값을 선언해야 하는 문제가 발생하므로 약식 속성 선언하지 않는다.

4.8.4 한글 폰트 선언 CSS
영문폰트만 선언할 경우 특정 브라우저에서 폰트를 올바르게 출력하지 못하는 경우가 있으므로 한글 폰트 선언 시 한글, 영문 폰트를 모두 선언한다.

잘못된 예

font-family:'돋움'

올바른 예

font-family:'돋움',dotum

4.9 z-index

z-index 속성의 값 범위는 최소 10, 최고 1000이며, 10 단위로 증감한다. 단, 10 단위 사이의 예외가 발생하면 1 단위 값을 지정할 수 있다.

4.10 미디어 타입

미디어 타입 선언을 위한 명령문(중괄호 포함)은 다음과 같이 세부 스타일을 지정하는 명령문과 줄로 구분한다. 인쇄를 위한 미디어 타입은 기본 CSS 파일의 가장 아랫부분에 선언한다.

/* For Print */
@media print{
    #header,.snb,.aside{display:none}
}

참고
미디어 타입은 각종 미디어(프린터, 모바일, 보조공학기기 등)에 대응하는 별도의 CSS 코드를 작성할 수 있게 한다. CSS 2.1 Specification에 따라 대응 가능한 미디어 타입은 아래와 같으며, 가장 범용적으로 사용하는 타입은 print 타입이다.

all (모든 출력 장치)

aural (음성 출력)

braille (점자 출력)

handheld (포켓, 모바일)

print (인쇄)

projection (투사 장치)

screen(컴퓨터회면)

tty(고정폭 글자를 사용하기위한 미디어타입)

tv(텔레비전 타입)

4.11 핵 (Hack)

핵(hack)은 가능한 한 사용하지 않는다. 불가피하게 사용해야 할 때는 제시된 핵만 사용한다.

브라우저	표준 DTD	표준 DTD	표준 DTD	Quirks Mode	Quirks Mode	Quirks Mode
IE6	S{*P:V}	S{_P:V}	S{_P:V}
IE7	S{*P:V}	S,x:-moz-any-link, x:default {P:V}	*+html S{P:V}	S{_P:V}	S,x:-moz-any-link, x:default{P:V}
IE8	S{P:V\0}			S{_P:V}	S,x:-moz-any-link, x:default{P:V}	:root S{P:V}
IE9	S{P:V\0}	:root S{P:V\0 !important}	:root S{P:V}		S,x:-moz-any-link, x:default{P:V}	:root S{P:V}
Firefox		S,x:-moz-any-link, x:default{P:V}			S,x:-moz-any-link, x:default{P:V}	:root S{P:V}
Safari Chrome						:root S{P:V}
Opera						:root S{P:V}

참고
[약어 표기] S(Selector): 선택자, P(Property): 성질, V(Value): 값

4.12 CSS 선언 타입

CSS 선언 타입은 크게 세 가지로 분류하며, 용도에 맞게 사용한다.

1. 익스터널 타입 (External Type)
CSS를 선언하는 가장 기본적인 방식으로, CSS 파일이 별도로 존재하는 형태이다. link 요소를 통해 HTML과 CSS 파일을 연결한다. 작성 예는 다음과 같다.

<link rel="stylesheet" type="text/css" href="../css/service_name.css">

2. 인터널 타입 (Internal Type)
HTML 파일의 head 안에 스타일을 선언하는 방식으로, 단발성 페이지의 CSS 분량이 작을 경우 사용한다. 작성 예는 다음과 같다.

<style type="text/css">
...
</style>

3. 인라인 타입 (Inline Type)
HTML의 개별 요소에 style 속성을 이용하여 스타일을 선언하는 방식으로, 속성 값이 동적으로 변경되어야 하는 경우 사용한다. 속성 값에 사용되는 %와 같은 특수기호는 Character entity references로 변환하지 않는다. 작성 예는 다음과 같다.

<div style="top:0;left:50%"></div>

4.13 주석

신규 주석

/* 주석 내용 */

추가 주석

/* [WHB DEV PJH 180122] 오류 추가 */

4.14 초기파일

@charset "utf-8";

/* Normalize */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textare
a,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'돋움',Dotum, Helvetica,sansserif;font-size:12px}
img,fieldset{border:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:underline}
.blind{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:1px;height:
1px;font-size:0;line-height:0}

목록으로 돌아가기

https://cssminifier.com/

HTML, CSS 코딩 협약 - noir1986/guide-web-development GitHub Wiki

Coding Convention for Markup Languages (HTML/CSS)

목차

1. 용어

1.1 요소 (Element) HTML CSS

1.2 속성 (Attribute) HTML CSS

1.3 선택자 (Selector) HTML CSS

1.4 성질 (Property) CSS

1.5 값 (Value) HTML CSS

1.6 약속어 HTML CSS

2. 네이밍

2.1 일반 규칙

2.2 시작 이름

2.3 영문 소문자, 숫자, 하이픈(-) 조합

2.4 id, class 규칙 HTML CSS

2.5 파일 및 폴더 규칙 File

2.6 이미지 규칙 File

3. HTML 코드 작성 규칙

3.1 기본 규칙

3.2 들여쓰기

3.3 빈 줄

3.4 문서 형식 정의 (Document Type Definition, DTD)

3.5 인코딩 (Ecoding)

3.6 주석 HTML

3.7 속성 (Attribute) HTML

3.8 요소 (Element) HTML

4. CSS 코드 작성 규칙

4.1 기본 규칙 CSS

4.2 들여쓰기 CSS

4.3 공백 CSS

4.4 빈줄 (Line Break)CSS

4.5 줄바꿈 CSS

4.6 인코딩 (Encoding)CSS

4.7 선택자 (Selector) CSS

4.8. 성질 (property)CSS

4.9 z-index

4.10 미디어 타입

4.11 핵 (Hack)

4.12 CSS 선언 타입

4.13 주석

4.14 초기파일

⚠️ **GitHub.com Fallback** ⚠️

Coding Convention
for Markup Languages (HTML/CSS)

1.1 요소 (Element) `HTML` `CSS`

1.2 속성 (Attribute) `HTML` `CSS`

1.3 선택자 (Selector) `HTML` `CSS`

1.4 성질 (Property) `CSS`

1.5 값 (Value) `HTML` `CSS`

1.6 약속어 `HTML` `CSS`

2.4 id, class 규칙 `HTML` `CSS`

2.5 파일 및 폴더 규칙 `File`

2.6 이미지 규칙 `File`

3.6 주석 `HTML`

3.7 속성 (Attribute) `HTML`

3.8 요소 (Element) `HTML`

4.1 기본 규칙 `CSS`

4.2 들여쓰기 `CSS`

4.3 공백 `CSS`

4.4 빈줄 (Line Break)`CSS`

4.5 줄바꿈 `CSS`

4.6 인코딩 (Encoding)`CSS`

4.7 선택자 (Selector) `CSS`

4.8. 성질 (property)`CSS`

⚠️ GitHub.com Fallback ⚠️