작업규칙

기본정책

네이밍 규칙

공통 규칙

공통 네이밍 규칙 예
설명 잘못된 예 올바른 예
시작이름은 영문 대문자, 숫자, 특수문자로 시작할 수 없다.(파일 및 폴더 제외) Tit_pop.html
*-hidden-obj
03_btn_more.gif
tit-section
네이밍의 조합은 '형태_의미_(순서)_상태'을 기본 순서로 사용한다. cancle_btn_off_01.gif btn_cancle_01_off.gif
언더스코어(_) 조합 : 파일, 폴더, 이미지에 사용한다.
HTML 문서 안에서 언더스코어(_)의 조합은 form, input 엘리먼트등의 name 어트리뷰트의 값을 사용하는 것을 권장한다.
customerService customer_service
하이픈(-) 조합 : CSS 네이밍에 사용하는 것을 권장한다. obj_hidden obj-hidden
파일 및 폴더의 경우 1, 2과 같은 한자리 정수는 사용하지 않으며 01, 02과 같이 사용하며 사용을 권장한다.
대부분의 파일관리 유틸리티 프로그램들을 사용하여 파일의 이름으로 정렬할 때에 정렬의 순서를 보장하기 위함이다.
cyber_center_1
cyber_center_2
cyber_center_01
cyber_center_02
동일한 이름의 css 네이밍의 경우 가장 뒤에 숫자를 사용하여 분류지어 사용할 수 있으며(한자리정수), 첫번째 파일은 숫자를 생략하여 사용할 수 있다. box-type1
box-type2
box-type3
box-type
box-type2
box-type3

파일 및 폴더

파일 및 폴더 네이밍 규칙 예

파일 및 폴더 네이밍 규칙 예
경로/폴더 파일 설명
사이트별 폴더 카테고리별 폴더 **.html 1차카테고리 업무별 html
Common css Common.css 초기화,공통 css (Grid, font, color, margin, padding, float등) css
Content.css 컨텐츠관련 css
UI_Style.css 버튼, Tab, Form관련 css
Fonts .eot / .woff / .ttp / .otp 웹폰트 관련 파일
js plugins Plugin 모음
ui ui 관련 스크립트

아이디(id)

아이디 네이밍 규칙 예

아이디 네이밍 규칙 예
잘못된 예 올바른 예
error_Mesage errorMesage
control_center controlCenter

예약어

예약어
구분 예약어 설명
레이아웃 #wrapper 페이지 전체 영역 그룹핑
#header 사이트 상단
#container 본문영역
#footer 하단 footer영역
#navXXX 네비게이션요소를 지정
예) #navGnb / #navSnb
#popXXX 레이어팝업 페이지별 ID
기타컨텐츠그룹 #uiXXX 예) #uiFloat

클래스(class)

클래스 네이밍 규칙 예

클래스 네이밍 규칙 예
잘못된 예 올바른 예
error-Mesage error-mesage
control_center control-center

기본적 클래스 예약어

기본적 클래스 예약어
예약어 설명
.aside-* 보통 #container 또는 #content 에 종속 되며 곁가지 영역으로 불리기도 한다.
.section-* 콘텐츠를 분할하거나 그룹핑 하는 블럭. 보통 #content 내부에 배치한 다음 heading 태그와 함께 사용하는 것을 권장.
.nav-* 네비게이션 으로 사용되는 요소영역에 사용
예) .nav-gnb / .nav-lnb ..
.path 현재 페이지의 경로를 지정합니다. 보통 #container 또는 #content 에 종속된다.
.open [.close] 디스플레이 관련 : display상태를 나타내며 기본스타일 클래스에 이중클래스로 사용.
css속성으로 컨트롤 가능한 요소는 가능한 스크립트 제어는 자제하도록 한다.
.ui-xx (ex: .ui-close) 기타 동작관련 셀렉터

이미지 네이밍 규칙

비쥬얼이미지를 제외한 이미지는 최소화한다. 스프라이트기법으로 용량보다는 갯수최소화 지향

이미지 네이밍 규칙 예

이미지 네이밍 규칙 예
잘못된 예 올바른 예 설명
on_tab_info.gif tab_info_01_on.gif 형태_의미_순서_상태 순서로 조합한다.
tio.gif tab_info_on.gif 임의로 축약하지 않는다.
tbl_type_list_02_off.gif tbl_list_02_off.gif 가급적 4단계 이하의 조합을 사용한다.
btn_Active.gif btn_active.gif 영문 소문자를 사용한다.
dot_type1.gif dot_1x1_b3b3b3.gif 동일이미지 중복생성을 필하기 위해 블릿, 도트등은 네이밍으로 기본이미지를 구분할수 있는(사이즈,색상등) 네이밍을 사용한다.

이미지 예약어

이미지 예약어
분류 파일명 설명
버튼 btn_
아이콘 icon_ 아이콘
레이아웃 com_
화살표 arr_
배경 bg_
비쥬얼 visual_
임시 @* 관리자나 사용자에 의해 등록될 이미지 영역으로 기본코딩을 위한 임시이미지

HTML 코드 작성 규칙

파일의 경로

<!-- 공통 css -->
<link rel="stylesheet" href="../Common/css/common.css"/>
<!-- ui script -->
<script src="../Common/js/plugins.js"></script>
<script src="../Common/js/ui.js"></script>
...
<!-- 이미지 파일 경로 -->
<img src="../../Images/*.png" alt="대체텍스트" />

head 영역의 파일 링크

웹 문서 전송 속도를 높이기 위하여(Request Count 감소) 최소한의 파일을 사용한다.

표준 문법의 사용

주의 해야할 특수기호 Entity name

주의 해야할 특수기호
Character " & < >   ·
Entity Name &#8361; &quot; &amp; &lt; &gt; &nbsp; &middot;

* 참고 : HTML Entities

파일의 인코딩

*.html, *.css, *.js의 파일의 저장 방식을 UTF-8로 설정한다. 반드시 개발과 협의가 필요하다.

문자셋(charset)별 인코딩
문자셋(charset) 기본 인코딩
charset=utf-8 utf-8
charset=euc-kr ANSI

Editplus 파일 저장 설정 방법 : Editplus > 도구 > 기본설정 > 파일

코드 들여쓰기

코드의 가독성을 높이고 전체 HTML 구조를 쉽게 파악하기 위하여 들여쓰기 규칙을 준수한다. 마크업의 중첩이 깊어질 때마다 자식 엘리먼트는 1탭 들여 쓰고, 1탭의 크기는 공백 4칸으로 설정한다.

Editplus 들여쓰기 지정 방법 : Editplus > 도구 > 기본설정 > 파일 > 설정및 구문강조 > 탭/들여쓰기

들여쓰기를 하지 않는 경우

<!doctype html>
<html lang="ko">
<head>

</head>
<body>
<div id="wrapper">

</div>
</body>
</html>

빈줄 / 주석

그룹을 감싸고 있는 객체를 구분하기 위하여 코드 그룹 간 1줄씩 빈 줄을 만드는 것은 허용한다. 빈 줄의 간격이 1줄을 초과하지 않으며 개발과 연동되는 그룹의 경우는 빈줄보다 주석을 작성한다. 코드의 가독성을 높이고 전체 HTML 구조를 쉽게 파악하기 위하여 주석사용을 준수한다.

<!-- header -->
<div id="header">
	<!-- 로고 -->
	<a href="#none">홈으로</a>
	<!-- //로고 -->
</div>
<!-- //header -->

<!-- container -->
<div id="container">

</div>
<!-- //container -->

<!-- footer -->
<footer id="footer">
</footer>
<!-- //footer -->

HTML 엘리먼트 작성 규칙

문서형(Document Type Definition) 선언

문서형을 선언하지 않으면 브라우저 호환성을확보하지 못함. 문서형을 선언하는 것은 상호 운용성을 보장하기 위함이다.

<!doctype html>

언어 / 문자셋(charset) 지정

<html lang="ko">
<meta charset="utf-8">

* 참고 : ISO Language Codes

SEO(검색 엔진 최적화)

참고 : 구글 검색엔진 최적화 방법

keywords

<meta name="keywords" content="" />

description

<meta name="description" content="" />

Title / HX

구조, 표현, 동작의 분리

문서의 구조(HTML)와 표현(CSS), 동작(script) 언어를 본래의 목적에 맞게 최대한 분리한다.

예외사항

<input type="text" id="formMyClass" class="my-class" style="width:80%;" />

table 엘리먼트 사용 방법

레이아웃을 표현하기 위하여 표를 사용하지 않는다.

올바른 테이블 사용 방법

사용자정보
이름 홍길동
전화번호 02-1234-5678
E-mail abcd@pantos.com
<div class="tbl-data1">
	<table >
		<caption>사용자정보</caption>
		<tbody>
			<tr>
				<th scope="row">이름</th>
				<td>홍길동</td>
			</tr>
			<tr>
				<th scope="row">전화번호</th>
				<td>02-1234-5678</td>
			</tr>
			<tr>
				<th scope="row">E-mail</th>
				<td>abcd@pantos.com</td>
			</tr>
		</tbody>
	</table>
</div>

엘리먼트의 기본 애트리뷰트 지정 순서

User Interface 의 동작이 요구되면 id 애트리 뷰트를 선택적으로 사용할 수 있으며 위치는 기본 애트리뷰트의 지정후 다음에 위치한다. class 애트리뷰트는 가장 마지막에 작성한다. id와 class의 사용여부는 선택 사항이다.

A 엘리먼트

<a href="#none" title="새창" target="_blank">인쇄하기</a>

Iframe 엘리먼트

<iframe src="about:blank" title="빈프레임"></iframe>

Img 엘리먼트

<img src="img.gif" alt="대체텍스트"/>

CSS 코드 작성 규칙

기본 규칙

문서의 첫 줄에 인코딩을 선언하며 인코딩은 HTML과 동일한 인코딩을 지정한다. 작업 정보를 아래와 같은 방법으로 작성한다.

작업 정보

@charset "utf-8";

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- 
	File   : Layout.css 
 	Author : Gildong, Hong 2017-07
	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
    CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc 
	CSS 속성 선언순서 : display, position(top, right, bottom, left, z-index), float/clear, overflow, width/height, margin/padding(top, right, bottom, left),  
	border(top, right, bottom, left), background(image,position,repeat,color), border-radius, box-shadow,  
	font(font-weight, font-style, font-variant, font-size/line-height, font-family), opacity, cursor, box-sizing, etc
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/

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

/* 잘못된 예 */
.class-name {color:#FFF;}

/* 올바른 예 */
.class-name {color:#fff;}

작은 따옴표('') 사용 범위

폰트의 선언, filter, content에 작은 따옴표('')를 사용한다. 그 외의 경우는 사용하지 않는다.

.class-name {font-family:'dotum';}
.filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png', sizingMethod='scale';}
.class-name:after{content:'.'}
.class-name {background:url(img.gif) no-repeat}

세미콜론(;)

마지막 선언된 속성에도 세미콜론(;)을 사용한다.

/* 잘못된 예 */
.class-name {margin-left:0;padding-left:10px}

/* 올바른 예 */
.class-name {margin-left:0;padding-left:10px;}

공백의 사용

선택자 간, 중괄호간 한칸의 공백을 사용한다, 중괄호 안쪽 좌우에는 공백은 사용하지 않는다.

/* 잘못된 예 */
.class-name, .class-name .child-class{background:url(../img/img.gif) no-repeat}
.class-name {padding:0; margin:0}
.class-name { padding:0;margin:0 }

/* 올바른 예 */
.class-name,
.class-name .child-class {background:url(../img/img.gif) no-repeat;}
.class-name {padding:0;margin:0;}
.class-name {padding:0;margin:0;}

들여쓰기/줄 바꿈

CSS 코드 작성시 들여쓰기는 허용하지 않는다.

공통으로 사용되는 속성의 선택자간의 줄 바꿈은 허용하며 이 외의 줄바꿈은 허용하지 않는다.

/* 잘못된 예 */
h4.class-name {
	font-size:1.25em;
	letter-spacing:-1px;
	margin:0.5em 0 0 0;
}

/* 올바른 예 */
h4.class-name {font-size:1.25em;letter-spacing:-1px;margin:0.5em 0 0 0;}

.class-name,
.class-name .child-class {background:url(../img/img.gif) no-repeat;}

주석 / 빈줄

  • CSS 주석 처리는 시작 주석을 작성하며 종료 주석은 작성하지 않는다. 종료코드 이후에 오는 요소에 한 칸 띄어 쓰기를 허용한다.
  • 객체를 구분하기 위하여 코드 그룹 간 1줄의 빈 줄을 허용한다. 빈 줄의 1줄을 초과하지 않는다.
/* title */
.title-type1 {margin:30px 0 10px 0;}

/* description */
.desc1 {padding:2px 0 0 15px;font-size:0.917em;}

선택자

공통 선택자

'*' 공통 선택자는 웹 페이지의 성능을 저하를 가져오기 때문에 가급적 사용하지 않는다.

/* 잘못된 예 */
* {margin:0;padding:0}

속성의 선언 순서

전체 속성의 선언 순서는 시계 방향으로 명시한다. top, right, bottom, left

CSS 속성선언순서
순서 속성 속성 값
1 display none, block, inline, inline-block, inline-table, list-item, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group
2 visibility visible, hidden, collapse
3 overflow visible, hidden, scroll, auto
4 float left, right, none
5 position absolute, fixed, relative, static
6 width auto, length(px), %
max-width
min-width
7 height auto, length(px), %
max-height
min-height
8 margin auto, length(px, em), %
9 padding auto, length(px, em), %
10 border border-width, border-style, border-color
11 background background-color, background-image, background-repeat, background-attachment, background-position
12 font font-style, font-variant, font-weigth, font-size/line-height, font-family
13 color hex_number, hex_number
letter-spacing normal, length
text-decoration none, underline, overline, line-through, blink
text-align left, right, center, justify
white-space normal, nowrap, pre, pre-line, pre-wrap
word-spacing normal, length(px, em, etc)
13 기타 여기서 언급하지 않은 나머지 속성들은 폰트 속성 이후에 선언하며, 선언 순서는 무관하다.

속성의 축약/약식 속성 사용

CSS 최적화를 위해 속성값을 축약 한다.

CSS 축약/약식 속성
축약 전 축약 후 설명
#ffffff #fff
background-position:left center background-position:0 50% 문자로 표현은 지양하며 숫자 사용을 지향한다.
top:0px top:0 속성의 값이 0일 경우 단위를 표시하지 않는다.
margin:15px 15px 15px 15px margin:15px 속성의 값이 동일한 경우 top, right, bottom, left 순서대로 축약한다.
margin:0 auto 0 auto margin:0 auto
margin:25px 15px 30px 15px margin:25px 15px 30px

Background 약식 속성

배경 이미지의 속성의 초기 선언시 반드시 background 단일 속성을 사용하며, 이후 배경적인 부분의 속성이 변경될 경우 background 관련 속성을 사용하여 제 선언 한다. 선언 순서는 background-attachment, background-color, background-image, background-repeat, background-position 이다.

.class-name {border:1px solid #ccc;}
.class-name .child-bg-1 {background-position:0 -18px;}
.class-name .child-bg-2 {background-position:0 -36px;}

Border 약식 속성

테두리의 스타일이 동일할 경우 반드시 border 단일 속성을 사용하고 동일하지 않을 경우 부분적 border 속성을 사용할 수 있다.속성의 값의 선언 순서는 border-width, border-style, border-color의 순서이다.

.class-name {border:1px solid #ccc;}
.class-name .top-border {border-top:2px solid #000;}
.class-name .left-border {border-left-width:0;}

Font 약식 속성

폰트의 약식 속성에 대하여는 부분적으로 허용하며 폰트의 크기와 라인의 높이를 동시에 제어를 하는 경우에 한하여 사용한다. 속성의 선언순서는 font-style font-variant font-weight font-size/line-height font-family 이며 style, variant, weight는 생략 가능하지만 font-size/line-height font-family는 필수 입력 사항이다.

.class-name {font:1em/1.2 'dotum';}

미디어타입 및 미디어쿼리

  • 미디어 타입은 CSS 파일의 가장 아랫 부분, 또는 별도파일로 분리하여 선언한다. 또한 미디어 타입의 코드 작성시 1탭의 들여쓰기는 허용한다.
  • 미디어쿼리는 해당 스타일 하단에 분기별로 추가한다.
/* header */
#header {}

@media only screen and (max-width:540px){
	#header {}
}
@media only screen and (max-width:420px){
	#header {}
}
..
/* footer */
#footer {}

/* Print */
@media print {
	#header {display:none;}
}