Rev. 2.73

Louis Harboe씨는 순수 CSS만을 이용하여 iOS의 11개 아이콘들을 만들었습니다. 둥근 모서리, 그림자, 그라디언트, RGBA, 가짜 요소를 응용한 것이라고 합니다. CSS만으로 SVG수준의 리치 스타일링이 가능하다는 것을 보여주는 듯 합니다. 이 데모는 웹킷기반 브라우저에서 제대로 보이며 사파리에 최적화되었습니다.

280

Monday

7

z
+
×
=
 73°

Comments

Jeff Starr씨는 스타일 시트를 경량화(Micro-Optimization)하는 11가지 팁을 소개했습니다. 이것은 코드 전체를 압축(Minify)하는 것이 아닌, CSS 코드 자체를 효율적으로 작성하거나 배포하는 방법입니다.

Tip #1: 색상 값을 짧게 쓰기

색상을 지정하는 속성에 값을 기입할 때 가능하면 가장 짧은 값을 사용합니다.

article { background-color: rgb(255,255,255); } /* WTF? */
article { background-color: #ffffff; } /* better */
article { background-color: #fff; } /* good */

Tip #2: 중복되는 속성을 병합하기

반복적으로 중복되는 속성들은 통합합니다. 이 작업을 자동으로 처리해 주는 온라인 CSS 최적화 서비스도 있으니 참고하세요.

/* before */
#wrap p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.22em;
	}
	.
	.
	.
p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.33em;
	}

/* after */
p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.33em;
	}

Tip #3: 가능한 한 몰아쓰기

CSS 속성들 중에는 여러 값을 인식하는 것들이 있습니다. fontbackground, padding, border 등이 그렇습니다. 이런 경우 한줄로 몰아씁니다.

/* before */
p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.33em;
	}

/* after */
p {
	font: normal 1.33em/1.33 Georgia, serif;
	}

/* these 4 properties */
background-color: #fff;
background-image: url(i/dope.png);
background-repeat: repeat-x;
background-position: 0 0;
 
/* can be written as */
background: #fff url(i/dope.png) repeat-x 0 0;

/* these 4 properties */
margin-top:    10px;
margin-right:  20px;
margin-bottom: 10px;
margin-left:   20px;

/* can be written as */
margin: 10px 20px 10px 20px;

/* these 3 properties */
border-width: 1px;
border-style: solid;
border-color: red;

/* can be written as */
border: 1px solid red;

Tip #4: 같은 값은 결합하기

padding 혹은 margin 속성의 값이 동일한 경우 통합하여 지정할 수 있습니다.

 /* before */
margin: 10px 20px 10px 20px;
padding: 10px 10px 10px 10px;

/* after */
margin: 10px 20px;
padding: 10px;

Tip #5: 불필요한 "0"은 생략하기

소수점 이하의 수를 사용하거나 무의마한 "0"은 생략할 수 있습니다.

/* before */
padding: 0.1em;
margin: 10.0em;

/* after */
padding: .1em;
margin: 10em;

Tip #6: 값이 "0"이면 단위 생략하기

값의 크기가 0이라면 단위는 생략해도 무방합니다.

/* before */
padding: 0px;
margin: 0em;

/* before */
padding: 0;
margin: 0;

Tip #7: 마지막 세미콜론 생략하기

속성 기입이 끝나는 마지막의 세미콜론(;)은 생략해도 무방합니다.

/* before*/
p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.33em;
	}

/* after */
p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.33em
	}

/* optimized */
p { font: normal 1.33em/1.33 Georgia, serif }

Tip #8: 배포하기 전 코멘트 제거하기

작업과정에서 주석을 사용하는 것은 분명 도움이 되고 협업에도 유리합니다. 그러나 사용자에게는 100% 불필요한 데이터이며 무의미한 서버자원과 대역폭을 소비하므로 배포하기 전에는 반드시 코멘트를 제거하도록 합니다.

Tip #9: 공백 제거하기

값을 구분하기 위한 공백을 제외한 나머지 빈 공간은 모두 제거합니다.

/* before */
body {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	background-color: #333;
	text-align: center;
	margin: 0px auto;
	font-size: 62.5%;
	color: #FFF;
	}

/* after */
body{font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;text-align:center;background:#333;margin:0px auto;font-size:62.5%;color:#fff}

Tip #10: 줄바꿈 제거하기

효율적인 관리를 위해 탭(또는 공백) 그리고 줄바꿈을 삭제합니다. 싱글-라인 포멧으로 작성하는 것이 미친짓으로 보일지 모르겠지만 의외로 실용적인 작성법입니다. 성능 향상을 꾀하면서도 스크롤을 줄일 수 있고 프로퍼티 단위 디버깅이 가능하기 때문입니다.

/* before */
hr {
	margin: 25px 0 25px 0;
	background: #CF7400;
	text-align: left;
	padding: 15px 0;
	display: block;
	border: 0 none;
	color: #CF7400;
	height: 1px;
	clear: both;
	width: 96%;
	}
acronym, abbr {
	border-bottom: 1px dotted #514031;
	cursor: help;
	}
ins { text-decoration: underline; }
del { text-decoration: line-through; }
sup {
	font-size: 10px;
	line-height: 0;
	color: #cccc99;
	}
em       { font-style: italic; }
small    { font-size: 10px;    }
strong   { font-weight: bold;  }
strong:target, h3:target, h4:target {
	background: #CF7400;
	padding-left: 25px;
	}
code, kbd, samp, tt, var {
	font-family: "Courier New", Courier, monospace, sans-serif;
	color: #cccc99; /* #cc9933 #cccc66 #cccc99 */
	font-size: 11px;
	}
	h3 code { font-size: 13px; }
pre {
	border-left: 1px solid #CF7400;
	padding: 10px 0 12px 10px;
	background: #3B2E22;
	overflow: auto;
	margin: 25px 0;
	width: 525px; /* 95% of 555px = 525px */
	}
	pre:hover {
		border-left: 1px solid #FFFFCC;
		background: #3B2E22;
		}


/* after */
hr { background:#CF7400;margin:25px 0;text-align:left;padding:15px 0;display:block;border:0 none;color:#CF7400;height:1px;clear:both;width:96%; }
acronym,abbr { border-bottom:1px dotted #514031;cursor:help; }
ins { text-decoration:underline; }
del { text-decoration:line-through; }
sup { font-size:10px;line-height:0;color:#cc9; }
em { font-style:italic; }
small { font-size:10px; }
strong { font-weight:bold; }
strong:target,h3:target,h4:target { background:#CF7400;padding-left:25px; }
code,kbd,samp,tt,var { font-family:"Courier New",Courier,monospace,sans-serif;color:#cc9;font-size:11px; }
h3 code { font-size:13px; }
pre { border-left:1px solid #CF7400;padding:10px 0 12px 10px;background:#3B2E22;overflow:auto;margin:25px 0;width:525px; }
pre:hover { border-left:1px solid #FFC;background:#3B2E22; }

Tip #11: CSS 유효성 검사하기

끝으로, W3C에서 제공하는 CSS 유효성 검사기를 이용하여 오류가 있는지를 검토하세요. 당신이 놓쳤을 수도 있는 잡다한 오류들을 빠르게 찾아줍니다.

Bonus Tips: 보너스 팁들

이 게시물을 작성하는 동안 몇 가지 다른 아이디어가 떠올랐습니다.

a:link, a:visited {} /* before */
a:link,a:visited{} /* after */

/* before */
h1{color:#111}
h2{color:#333}
h3{color:#777}

/* after */
h1{color:#111}h2{color:#333}h3{color:#777}

위에서 언급한 팁들 중에는 자동으로 처리할 수 있는 것들이 있습니다. 온라인 도구를 사용하거나 서비스 빌드과정에 포함하여 자동화 할 수도 있다는 사실을 잊지 마세요. 그리고 규모가 큰 프로젝트는 배포/개발 버전을 구분해서 관리하는 것이 가장 효율적입니다.

Comments

html5openconference.jpg

과분하게도 한국 웹 표준 프로젝트에서 주최하는 "HTML5 오픈 컨퍼런스"에서 HTML5 자바스크립트 API에 대하여 발표하게 되었습니다. 학동 건설회관에서 7월 2일(금) 오후 1시에 시작합니다. 그런데 아쉽게도 예약 접수가 시작된지 24시간이 되기도 전에 650석이 모두 매진 되었다고 합니다. 지난 세미나 발표때 아쉬운 부분들을 보강해서 재미있게 진행해 볼 생각입니다. 벌써부터 후달리기 시작하네요.

Comments