HTML&CSS 본문

CSS Convention

기본정책

CSS 가이드

CSS 데이터를 로딩할 경우 @import 방식은 사용하지 않는다. (일부 브라우저에서 이미지 로딩 후 적용되기 때문에)

external방식에서는 charset 표기한다.

@charset "utf-8"

CSS 데이터는 섹션의 경우 head 상단에 공통부분(common.css)과 콘텐츠부분(해당서비스.css)으로, 간단한 콘텐츠의 경우 하나의 css 파일로 로딩될 수 있도록 권장한다.

<link rel="stylesheet" type="text/css" href="yozm_common.css" /> <!-- reset, common요소 -->
<link rel="stylesheet" type="text/css" href="yozm_top.css" /> <!-- 콘텐츠관련 -->

CSS 스타일 속성간 개행하지 않으며, 클래스명을 선언한 뒤 한 칸의 공백을 두고 세부 속성간에는 공백을 주지 않으며, CSS 선언의 마지막 속성의 세미콜론은 생략한다.

.gnb_comm{
overflow:hidden;
width:978px;
clear:both;
} (x)
.gnb_comm{overflow:hidden;width:978px;clear:both;} (x)
.gnb_comm {overflow:hidden; width:978px; clear:both;} (x)
.gnb_comm {overflow:hidden;width:978px;clear:both;} (x)
.gnb_comm {overflow:hidden;width:978px;clear:both} (o)

CSS 선택자는 class로 핸들링되며, 태그네임으로 핸들링하지 않는다. (단 사용빈도가 높은 li, td, th는 예외) 또한, 태그네임과 class는 중복사용하지 않는다.

h3 {font-size:14px;line-height:18px} (x)
h3.tit {font-size:14px;line-height:18px} (x)
.tit {font-size:14px;line-height:18px} (o)
.news li {float:left;margin:0 10px 0 0} (o)
 
.list_view li.fst (X) / .list_view .fst (O)

CSS 작성 시 Indentation Depth 는 3 Depth 까지 허용하며, 1 Depth 만을 사용하는 것을 권장한다.

크로스브라우징을 위한 필터적용(핵)은 최소한으로 한다.

단위 사용은 다양한 환경의 크로스플랫폼을 위해 절대단위(px)를 권장하며, 유동적인 레이아웃 구현 시 상대단위(em, %)를 사용한다.

속성선언에 따옴표는 사용하지 않는다. (단, 한글폰트 선언이나, 공백표현처럼 사용이 필요한 경우는 예외되며, 사용 시에는 홑따옴표로 통일한다.)

.list_news {background:url("/image/box_news.gif") no-repeat} (x)
.list_news {background:url('/image/box_news.gif') no-repeat} (x)
.list_news {background:url(/image/box_news.gif) no-repeat} (o)
.list_news {font-family: '돋움', Dotum, Arial} (o)
z-index 값 적용 가이드
  • z-index 수치 간격은 10단위로 적용
  • 스니펫에서는 z-index를 기본값(10)으로 지정하고, 해당 서비스마다 z-index를 재정의해서 사용
  • 페이지 단위에서 1000을 넘는 경우는 발생하지 않음
  • 팝업레이어의 경우는 1000부터 시작
  • 전사공통인 서제스트인 경우는 9999로 유지

링크영역 규칙

아이콘, 버튼 및 디자인된 링크요소에 최소링크영역을 설정하여, 링크영역이 너무 작아 불러오는 불편함을 방지하고자 한다. 최소한의 링크영역은 아래와 같이 기준을 둔다. 하지만 이 부분은 권장사항이며 다양한 케이스에 따라 적절하고 유연하게 대처한다.

PC

18*18 을 기본으로 하되, 디자인 요소에 따라 15*15 혹은 그 이하의 요소를 적절히 사용함

Mobile
  • GNB형 : 최소 31x29
  • 강조·일반형 : 최소 50x31
  • 박스형(네비게이션) : 높이33~38px

주석 규칙

CSS 주석 기호( /*, */ )와 내용 사이에는 반드시 공백 한 칸이 있어야 한다.

/*common*/ (x)
/* common */ (o)

CSS 주석은 2 depth 까지 허용한다. 단, 2 depth 주석은 개행하지 않는다.

추가 및 수정이 되어 주석을 기입하는 경우 해당 수정날짜로 시작하는데 두 줄이상일 경우 범위로 표시하며, 한 줄일 경우 해당 선언 마지막 뒤에 표시한다.

/* 2011-11-30 GNB 수정 시작 */
.gnb_comm {overflow:hidden;width:978px;clear:both}
.gnb_comm li {float:left;height:38px}
.gnb_comm .menu {display:block;overflow:hidden;height:38px}
.gnb_comm .home {width:79px}
.gnb_comm .roadmap {width:98px}
.gnb_comm .on .menu {margin:0 -1px}
/* 2011-11-30 GNB 수정 끝 */
 
.news .on .menu {margin:0 -1px} /* 2011-11-30 수정 */

스타일선언 규칙

CSS 속성 선언 순서
CSS 속성 선언 순서
순서 속성 의미
1 display 표시
2 overflow 넘침
3 float 흐름
4 position 위치
5 z-index 정렬
6 width & height 크기
7 margin & padding 간격
8 border 보더
9 font 폰트
10 background 배경
11 etc(기타) color,text-decoration,text-indent,clear...
font 속성 순서

축약형을 사용하지 않으며, 스타일 선언시 font-style > font-variant > font-weight > font-size > line-height > font-family 순서로 선언하길 권장한다.

.txt {font-style:bold;font-variant:small-caps;font-weight:bold;font-size:14px;line-height:1.5;font-family:'굴림',Gulim,sans-serif}
background-position 속성값

숫자로 선언한다.

.bg {background-position:left top} (x)
.bg {background-position:0 0} (o)
.bg {background-position:100% 50%} (o)
컬러값

축약형을 사용한다.

.txt {color:#666666} (x)
.txt {color:#666} (o)

필터규칙

!important 필터는 렌더링이슈로 사용하지 않는다.

ie6용 필터는 운영을 위해 * html 필터를 사용한다. (ie6 에서 레이아웃을 깨트리지 않는 선까지의 대응을 위해 사용)

.list_news {margin:0 10px 0 0}
* html .list_news {margin:0 5px 0 0}

PNG의 사용에 따른 filter 적용은 하지 않는다 (ie6 대응 X)

조건부주석(Conditional Comment) : 사용하지 않음 (기본 정책). 혹 Conditional Comment 분리 사용이 필요하다 판단되는 부분 발생시 별도 논의하여 결정한다.

공통 스타일시트

크로스브라우징을 위해 각 태그관련 속성을 초기화 시켜주는 CSS로 PC와 Mobile에서의 환경을 고려하여 각각 reset.css를 정의하고 있다. 각 서비스 개편시 해당 reset.css를 활용하여 초기화시켜준다. 그리고 기능적으로 공통적으로 사용되는 속성은 global 클래스네임을 정의하여 선택적으로 사용한다.

PC - Reset.css
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
body {background:#fff}
body,th,td,input,select,textarea,button {font-size:12px;line-height:1.5;font-family:'돋움',dotum,sans-serif;color:#333} /* color값은 디자인가이드에 맞게사용 */
a {color:#333;text-decoration:none}
a:active, a:hover {text-decoration:underline}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
Mobile - Reset.css
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {font-size:100%;vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
table {border-collapse:collapse;border-spacing:0}
body {-webkit-text-size-adjust:none} /* 뷰표트 변환시 폰트크기 자동확대 방지 */
input[type='text'],input[type='password'],input[type='submit'],input[type='search'] {-webkit-appearance:none; border-radius:0}
input:checked[type='checkbox'] {background-color:#666; -webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; border-radius:0}
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
 
body {background:#fff}
body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'Malgun Gothic', '맑은 고딕', sans-serif;color:#333} /* color값은 디자인가이드에 맞게사용 */
 
a {color:#333;text-decoration:none}
a:active, a:hover {text-decoration:none}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
PC/Mobile - Global Classname (선택적 사용)
	/* global */
#daumIndex {overflow:hidden;position:absolute;left:-9999px;width:0;height:1px;margin:0;padding:0} /* 스킵네비게이션 */
.ir_pm {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px} /* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
.ir_wa {display:block;overflow:hidden;position:relative;z-index:-10;width:100%;height:100%} /* 중요한 이미지 대체텍스트로 이미지off시에도 대체 텍스트를 보여주고자 할때 */
.screen_out {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */
 
.f_l {float:left}
.f_r {float:right}
.cl_b {width:0;height:0;font-size:0;line-height:0;clear:both}
.show {display:block}
.hide {display:none}
.tbl {border-collapse:collapse;border-spacing:0} /* 테이블 초기화 */
.clear_g {display:block;overflow:visible;width:auto;clear:both;*zoom:1}
.clear_g:after {display:block;visibility:hidden;height:0;font-size:0;clear:both;content:''}

/* line */
.txt_bar {font-size:12px;color:#b6b6b6} /* 텍스트형 구분라인 */
 
/* Background Image - common 요소 */
.btn_comm {background:url() no-repeat} /* 버튼 */
.ico_comm {background:url() no-repeat} /* 아이콘 */
.tit_comm {background:url() no-repeat} /* 타이틀 */
.line_comm {background:url() no-repeat} /* 라인 */
Mobile - Global Classname
/* border round 3px button style */
.bround {display:inline-block;padding:0;border:1px solid;border-radius:3px;font-size:12px;text-decoration:none;text-align:center}
 
/* padding round 3px button style */
.pround {display:inline-block;padding:1px;border-radius:3px;font-size:12px;text-decoration:none}
.pround .inner {display:inline-block;width:100%;height:100%;border-radius:3px;text-align:center}