외부 CSS 불러오기

외부 CSS 파일을 HTML 문서로 불러오는 방법으로써 link와 import가 있습니다. link 방식만을 사용합니다. import 방식은 Internet Explorer 브라우저에서 image 요소보다 CSS를 늦게 렌더링하는 결함이 있으므로 사용하지 않습니다. 미디어 타입을 지정하지 않는 경우 기본값이 'all'이 되므로 별도의 미디어 타입은 지정하지 않습니다.

(X) Internet Explorer 브라우저에서 image보다 CSS를 늦게 파싱하는 결함이 있으므로 사용하지 않음

		<style type="text/css">
			@import url("default.css")
		</style>

(O) HTML 문서에서 CSS 파일을 불러올 때 HTML 헤더에 표시할 내용

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

문자셋(charset)의 선언

External 형식의 CSS 문서에는 HTML 문자셋과 동일하게 문자셋 정보를 명시합니다. 영문 이외의 서체이름을 사용하는 경우 웹 브라우저에서 정확한 서체표현이 가능하고 각종 저작도구에서 문자값이 깨지지 않습니다.
문자셋 선언은 무서의 첫 줄에 공백없이 삽입되어야 합니다. 문자셋 선언을 생략하는 것이 문법적으로 오류는 아니지만 원활한 유지보수를 위하여 반드시 포함시킵니다.

		@charset "utf-8";

CSS 속성 선언 순서

display : 표시
float : 흐름
position : 위치
margin & padding : 간격
width & height : 크기
border : 테두리
overflow : 넘침
z-index : 정렬
font : 폰트
background : 배경
Etc : 기타

CSS 코드의 정렬

선택자 기준으로 개행하고, 속성 단위로는 개행하지 않습니다.

		#selector1 { property: value; }
		#selector2 { property: value; property: value; }
		#selector3,
		#selector4,
		#selector5 { property: value; }

선택자와 속성은 tab이 아닌 space 기준으로 띄어쓰기하며, 속성과 사이에는 한칸씩 뛰어쓰기 한다.

		#selector^{^property:^value;^property:^value;^property:^value;^}

CSS 코드의 정돈을 위하여 코드의 그룹간 행(line) 간격을 1행 이상 비우지 않습니다. 그룹 안에서 의미있는 객체를 구분하기 위하여 1행씩 빈 행을 만드는 것은 허용 됩니다.

		/* 그룹1 */
		#selector1 { property: value; }
		#selector2 { property: value; }
		
		/* 그룹2 */
		#selector3 { property: value; }
		#selector4 { property: value; }

일반적인 모니터 크기에서 작업시 좌우 스크롤이 발생하지 않도록 한 줄에 120자를 넘기지 않으며, 이상 시 아래와 같이 내려쓰기 한다.

		/* 120자 이내 속성 기입 방법 */
		#selector1 { property: value; property: value; property: value; }
		
		/* 그룹2 */
		#selector1 {
			property: value; property: value; property: value; property: value; 
			property: value; property: value; property: value; property: value; 
			property: value; property: value; property: value; 
		}

위의 방법은 가독성을 유지하며, 관련 선택자들을 한 화면안에 그룹화를 할 수 있는 구조이며, 문서의 크기 또한 작성자에 의해 최적화 할 수 있는 장점이 있습니다.

CSS 주석 가이드

CSS코드는 의미있는 형태로 그룹핑하고 그룹핑 된 코드 더미 첫 줄에만 주석으로 설명합니다.
주석에 사용되는 언어는 영문이며 직관적인 단어를 사용한다.
주석과 관련된 버그를 피하기 위하여 주석 기호와 코멘트 사이에는 빈 공간을 두어야 합니다.

주석에는 시작과 끝이 있으며, 주석 안쪽에는 코드를 설명하는 문장 외에 다른 기호등을 넣지 않습니다.

그룹화가 필요한 부분은 아래와 같이

		/* ********************
		 * layout
		 ********************* */

그룹화된 CSS의 세부사항에 대한 주석을 표현시 아래와 같이 한다.

/* GNB start */(O)
/* GNB end */(O)
/* GNB */(O)
/*GNB*/(X)
/** GNB **/(X)
/*- GNB -*/(X)
/*--- GNB ---*/(X)

HTML5 태그 사용을 위한 Reset Style (필수적인 부분만 발취)

		/* 
		html5doctor.com Reset Stylesheet
		 v1.6.1
		 Last Updated: 2010-09-17
		 Author: Richard Clark - https://richclarkdesign.com
		 Twitter: @rich_clark
		*/
		
		html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
		article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
		time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
		article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }

다운로드 링크 : https://html5resetcss.googlecode.com/files/html5reset-1.6.1.css
HTML5 미지원 브라우저 호환을 위한 스크립트 (대표적으로 IE9 미만 브라우저에서 사용한다.)

CSS 핵 소개

IE 하위 브라우저 크로스 브라우징을 위한 CSS 핵은 다음과 같다.

		#select { margin: 0; *margin: 10px; _margin: 20px; }

IE 7, 6 에서 동작하는 별표 (*)
IE 6 에서 동작하는 언더버 (_)
주석과 관련된 버그를 피하기 위하여 주석 기호와 코멘트 사이에는 빈 공간을 두어야 합니다.

소속 및 작성자 표기

담당자의 소속과 작성자 및 작성일 정보를 아래와 같이 주석을 이용하여 표기합니다. 최초 저자는 이 표기를 생략할 수 없으며 유지보수만을 담당하게 되었더라도 되도록 기입하는 것이 좋습니다.

		/*
		Author: Park Jeong Shik (jspark@rsupport.com)  
		Copyright © RSUPPORT Co., Ltd. ALL RIGHTS RESERVED.
		*/

Update History: 내용상의 수정 및 추가사항을 기록합니다.

		- 소속 및 작성자 표기 수정. [2012.01.13 | 박정식]
		- 최초 작성 [2011.12.26 | 박정식]

CSS Guidelines