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" /> <!-- 콘텐츠관련 -->

 

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 속성 선언 순서

순서	속성	의미
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...

 

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)

 

---

공통 스타일시트

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

PC - Reset.css

@charset "UTF-8";

/* 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,header,main,article,footer,i {margin:0;padding:0;box-sizing:border-box;}
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}
/* 기본 폰트 설정 */
html,body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'NanumSquare',"Malgun Gothic", "Apple Gothic", sans-serif;font-weight: 400;color:#333;letter-spacing: -.2px;} /* color값은 디자인가이드에 맞게사용 */
a {color:#333;text-decoration:none}
a:active, a:hover, a:focus {text-decoration:none; color: #0072bc;}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
hr {display: none;}
input[type=password] {font-family: 'Malgun Gothic';}

/* skipnavigation */
#skipnavigation a {position: absolute;left: -3000%;}
#skipnavigation a:focus {display: block;left: 0;top: 0;z-index: 10000000000;width: 100%;height: 30px;line-height: 30px;background: #0072bc;color: #fff;text-align: center;}

/* 이미지 스프라이트 */
.img_g {display: inline-block;overflow: hidden;background:url(../../images/comm/img-comm.png) no-repeat;vertical-align: top;} /* 이미지 */

/* global */
.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시에도 대체 텍스트를 보여주고자 할때 */
.blind, caption, legend {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */

.f_l {float:left}
.f_r {float:right}
.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:''}

 

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;box-sizing:border-box}
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}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
hr {display: none;}
input[type=password] {font-family: 'Malgun Gothic';}

/* skipnavigation */
#skipnavigation a {position: absolute;left: -3000%;}
#skipnavigation a:focus {display: block;left: 0;top: 0;z-index: 10000000000;width: 100%;height: 30px;line-height: 30px;background: #0072bc;color: #fff;text-align: center;}

/* 이미지 스프라이트 */
.img_g {display: inline-block;overflow: hidden;background:url(../../images/comm/img-comm.png) no-repeat;vertical-align: top;} /* 이미지 */

/* global */
.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시에도 대체 텍스트를 보여주고자 할때 */
.blind, caption, legend {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */

.f_l {float:left}
.f_r {float:right}
.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:''}