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;
}
위의 방법은 가독성을 유지하며, 관련 선택자들을 한 화면안에 그룹화를 할 수 있는 구조이며, 문서의 크기 또한 작성자에 의해 최적화 할 수 있는 장점이 있습니다.
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 미만 브라우저에서 사용한다.)