퍼블리싱 UI가이드

기본정책
네이밍 규칙
HTML 코드 작성 규칙
HTML 엘리먼트 작성 규칙
CSS 코드 작성 규칙

기본정책

UI 지원 브라우저 : ie11 최적 (ie9이상 지원), Chrome, FF 등 표준브라우저
디자인최적화 해상도 : 1080px
기능최적화는 개발기준참고

네이밍 규칙

공통 네이밍 규칙 예
설명	잘못된 예	올바른 예
시작이름은 영문 대문자, 숫자, 특수문자로 시작할 수 없다.(파일 및 폴더 제외)	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

파일 및 폴더

개발과 기획에서 정의된 디렉토리 구조도 및 화면 아이디가 정의가 되어있다면 그에 준한 규칙에 따라 파일 및 폴더의 이름을 사용한다.

파일 및 폴더 네이밍 규칙 예

파일 및 폴더 네이밍 규칙 예
경로/폴더			파일	설명
사이트별 폴더	contents	1차메뉴 idx 2자리 (01, 02..)	__**.jsp	1차메뉴~현재메뉴 idx 2자리.jsp ex) 01_02_03_04.jsp
	css		layout.css	사이트 개별 레이아웃 (헤더, 좌측메뉴 등) 관련 css
			main.css	메인관련 css
			sub.css	서브페이지 관련 css. 버튼, tab,k form 등 서브페이지에 들어가는 공통 style 은 이곳에 정의한다.
			sub0X.css	개별 서브페이지 관련 CSS. 1차메뉴 idx 번호 2자리를 기준으로 끝에 번호를 작성한다.
	fonts		.eot / .woff / .ttp / .otp	웹폰트 관련 파일
	js	unit	개발과 관련된 스크립트
		...	main.js	메인에 사용되는 스크립트
		...	common.js	레이아웃 및 공통으로 사용되는 스크립트

아이디(id)

아이디 네이밍 규칙 예

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

시작의 이름은 영문 소문자를 사용하되 두 번째 단어부터 첫 번째 문자를 대문자로 처리하는 기법(카멜 케이스)을 사용한다.
동일한 이름의 id는 문서에서 한번만 사용이 가능하다.
지정된 레이아웃 및 폼객체를 제외한 스타일 지정을 위하여 id를 사용하지 않는다.
앵커로서 사용되는 엘리먼트는 id 지정이 가능하다.
User Interface 동작을 위하여 DOM 선택자로서의 id 지정은 가능하다.
예약어가 있는 경우 예약어를 사용한다.

예약어

예약어
구분	예약어	설명
레이아웃	#wrap	페이지 전체 영역 그룹핑
	#m_conts	메인 본문영역
	#container	서브 본문영역
	#footer	하단 footer영역
	#lnb	메인 네비게이션
	#snbWrap	좌측 네비게이션
	#navXXX	네비게이션요소를 지정 예) #navGnb / #navSnb
	#popXXX	레이어팝업 페이지별 ID
기타컨텐츠그룹	#uiXXX	예) #uiFloat

클래스(class)

클래스 네이밍 규칙 예

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

네이밍은 - (하이폰) 사용을 기본으로 한다.
(클래스 네임이 서버사이드 스크립트의 변수와 자바스크립트의 변수 정의시 혼돈을 방지)
시작의 이름은 영문 소문자를 사용하며 두 번째 단어부터 하이픈(-)으로 연결하며 대문자는 사용하지 않는다.
영문 소문자, 숫자, 하이픈(-)만 사용할 수 있다.
하이픈(-)은 2개 이상의 단어를 조합할 때만 사용한다.
하이픈(-)을 이용하여 3단계를 초과하여 사용하는 방법은 지양한다.
숫자 없으면 '1'이라는 숫자가 생략된 것으로 간주한다.
다중의 클래시 지정을 허용하며 최대 3개 이상 사용하지 않도록 주의한다.
단, 여백 혹은 넓이를 지정하는 클래스는 예외로 한다.

기본적 클래스 예약어

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

이미지 네이밍 규칙

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

이미지 네이밍 규칙 예

이미지 네이밍의 조합은 '형태_의미_순서_상태'의 순서로 조합한다.
같은 이름의 이미지가 두 개 이상 존재하면 숫자로 구분한다.
이미지 네이밍은 이미지의 확장자에 관계 없이 순차적으로 적용한다. 예) btn_confirm.gif, btn_confirm_02.jpg, btn_confirm_03.png
임시이미지에 한하여 @특수문자를 처음으로 사용할 수 있다.
이미지 예약어에 숫자, 영문소문자, 언더바(_)를 조합하여 사용할 수 있다.

이미지 네이밍 규칙 예
잘못된 예	올바른 예	설명
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_
아이콘	ico_	아이콘
레이아웃	com_
화살표	arr_
배경	bak_
비쥬얼	vis_
스프라이트	spr_
임시	@*	관리자나 사용자에 의해 등록될 이미지 영역으로 기본코딩을 위한 임시이미지

HTML 코드 작성 규칙

head 영역의 파일 링크

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

표준 문법의 사용

HTML은 해당 DTD의 명세에 맞게 작성하며, W3C validation을 통과해야 한다.
DTD를 제외한 모든 엘리먼트와 속성은 소문자로 작성한다.
속성의 값은 큰따움표("")로 묶는다.
특수기호는 Entity name을 사용하여 entity 코드로 변환한다. Entity 코드는 ISO-8859-1을 기준으로 한다.
마크업은 w3c html5문법에 준하여 사용한다.
종료 태그는 생략하지 않는다.

주의 해야할 특수기호 Entity name

주의 해야할 특수기호
Character	₩	"	&	<	>		·
Entity Name	₩	"	&	<	>		·

* 참고 : HTML Entities

파일의 인코딩

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

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

코드 들여쓰기

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

들여쓰기를 하지 않는 경우

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

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

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

html의 자식 엘리먼트인 head, body
body의 자식 첫 번째 엘리먼트 div="wrap"

빈줄 / 주석

그룹을 감싸고 있는 객체를 구분하기 위하여 코드 그룹 간 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 -->

주석 기호와 주석 내용 사이에는 반드시 공백 한 칸이 있어야 한다.
시작과 종료주석의 내용은 동일해야 한다. 그룹간 1줄 빈줄이 있을경우(예:레이아웃관련)에는 종료주석을 생략할 수 있다.
레이아웃 엘리먼트를 제외한 독립된 콘텐츠 영역의 주석 표기는 선택 사항이다.

HTML 엘리먼트 작성 규칙

문서형(Document Type Definition) 선언

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

<!doctype html>

언어 / 문자셋(charset) 지정

lang 속성은 User Agent가 언어를 올바로 해석할 수 있게 도와주며, 검색과 음성 장치에 활용된다.
utf-8은 다국어 지원이 가능하며, euc-kr 보다 표현 가능한 한글(고어, 음절 등)이 많음.
한글은 utf-8에서 3바이트, euc-kr에서 2바이트를 차지하기 때문에 utf-8이 euc-kr에 비하여 DB 저장 용량이나 트래픽이 많을수 있음.
utf-8 인코딩 기본. DB의 인코딩 방식과도 관련이 있으므로 개발자와 협의하여 결정.

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

* 참고 : ISO Language Codes

SEO(검색 엔진 최적화)

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

keywords

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

페이지 키워드를 기재/콤마(,)로 구별하여 기술/동의어와 유의어를 포함.

description

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

페이지 정보 요약
구글검색에서, 결과 페이지 내용 미리보기로 사용할 수도 있음.

Title / HX

각각의 페이지마다 고유한 Title 제공. 헤딩태그의 활용
header의 로고는 단순 링크, 페이지 타이틀을 h1으로 정의 : 검색우선순위

구조, 표현, 동작의 분리

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

예외사항

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

특정 엘리먼트에 id, class, style을 선언할 때에 선언 순서는 엘리먼트의 기본 속성 지정후 마지막에 id, class와 style을 선언한다.
테이블 셀의 경우 다양한 너비의 고정폭을 지닐 수 있는데 이것을 모두 CSS로 지정하는 것은 기대했던 효과에 대한 이점이 없으므로 예외의 경우를 허용함
input[text], select 엘리먼트의 경우 너비의 고정폭 지정 허용함

table 엘리먼트 사용 방법

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

올바른 테이블 사용 방법

사용자정보
이름	홍길동
전화번호	02-1234-5678
E-mail	abcd@pantos.com

<div class="tbl">
	<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>

모바일에서의 테이블은 가급적 세로형 데이터테이블 형태로 사용(기획협의)
table 엘리먼트의 border 값은 클래스를 지정하여 사용한다.
caption 엘리먼트는 표의 제목을 표현하며 표의 윗부분에 헤딩 엘리먼트로 표의 제목을 표시하면 생략가능하다.
디자인에 머리글이 제공되어 있지 않더라도 반드시 머리글을 제공한다.
행 제목과 열 제목이 있는 경우 이에 대한 scope 속성을 사용하여 행과 열의 범위를 적절히 구분하여 배치한다.

엘리먼트의 기본 속성 지정 순서

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

A

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

href 속성의 값은 #로 한다. 앵커 기능이 있다면 해당 엘리먼트의 id값을 작성한다.
링크의 목표가 명확하지 않은 경우 title 속성의 값으로 부가적인 설명을 제공한다.
새창열림 : [title="새창"] 새 창으로 페이지를 표시해야 할 경우 target 속성을 선택적으로 사용 (target="_blank"가 선언되어 있을 경우 title="새창" 생략 가능)
다운로드 : [title="파일명+파일확장자 다운로드"]

Iframe

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

iframe 사용은 페이지 성능에 영향을 주시 때문에 가급적 사용을 하지 않는다.단, 유튜브 동영상 사용으로 동영상컨텐츠 또는 새올에 한하여 사용함
align, frameborder, longdesc, marginheight, marginwidth, scrolling등의 속성은 html5에서 지원되지 않으므로 사용시 참고한다.
◆ http://www.w3schools.com/tags/tag_iframe.asp
iframe을 포함하는 페이지의 도메인과 iframe에서 불러오는 페이지의 도메인이 다르면, 크로스 도메인 설정을 위해 별도의 소스 코드가 추가되어 성능의 영향을 줄 수 있다
iframe은 가장 마지막으로 로딩되기 때문에 페이지 로딩 초기에는 화면이 비어 보일 수 있다.

Img

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

alt 속성은 반드시 제공되어야 하며 빈 값을 사용하지 않는다.(의미가 없는 이미지에 한하여 빈 값을 허용한다.)
유지보수의 편의성을 위하여 width, height 속성은 사용하지 않는다.
이미지 맵 사용을 지양하며 포지셔닝 방법을 사용한다.

CSS 코드 작성 규칙

기본 규칙

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

작업 정보

@charset "utf-8";

/****************************************************
	파일명	: Layout.css
	최초작성자	: 박현정
	최초작성일	: 2020-12-15
	-------------------------------------------------
	Dec. 해당 css의 용도에 대한 설멍
	-------------------------------------------------
	최종수정자	: 
	최종수정일	: 
	수정내용	: 
*****************************************************/

CSS 적용 방법
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';}
.class-name {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)
14	기타	여기서 언급하지 않은 나머지 속성들은 폰트 속성 이후에 선언하며, 선언 순서는 무관하다.

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

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';}