CSS 최적화 기법
Publisher/CSS / 2010. 3. 8. 01:25
웹표준 강의중 CSS 및 HTML마크업에 대해 체계적으로 개발할수 있게 프로세스를 정립하거나 CSS 도 마크업과 마찬가지로 구조적으로 짜야 한다는 얘길 한적이 있다. 사실 데꾸벅 조차도 프로젝트 초기에는 나름 구조적으로 코딩한다고 생각하나 나중에는 엘리먼트에 인라인으로 바로 넣거나 의미없는 태그로 wrapping하기도 한다. 사실 CSS를 코딩하다가 보면 처음에는 구조적으로 개발하다가 나중에는 덕지덕지 붙은 inline-style sheet나 잘못 cascading(혹은 inherited) 된 속성들 때문에 나중에는 더이상 수정할 수 없는 수준이 되기도 한다.
그래서 아래 몇가지 CSS 를 최적화 할수 있는 방법을 소개한다.
1. CSS 를 구조화하라
마크업에서는 하나의 CSS 로 Linked하고 해당 CSS 에서 구조적으로 분기한다.
마크업
<html>
<link red="stylesheet" type="text/css" href="default.css" title="기본.css" media="all" />
</html>
기본.CSS
@charset "UTF-8"
@import url("base.css"); /*CSS Reset & overrides*/
@import url("table.css"); /* table관련속성*/
@import ulr("link.css"); /* 링크관련 속성*/
와 같이 구성하거나 기본 base.css에서 다음과 같이 작성한다. 먼저
- CSS Resets 이나 overrid된 속성들
- Link 와 type
- Main layout
- Sub layout structures
- Form 요소
- 기타
과 같은 순서대로 구성한다.
/*CSS 리셋 및 오버라이된 속성*/
* {
margin:0;
padding:0;
}
img {border:none}
/* 링크 및 타입 */
body { }
a:link, a:active, a:visited, a:focus {}
a:hover {}
h1 {}
h1 a {}
h1 a:hover {}
/* 레이아웃 */
header,article,footer,nav,aside,menu {display:block}
header {}
article {}
footer {}
nav {}
/* 박스모델 */
.box01 {}
/* 폼요소 */
label {}
input {}
fieldset {}
legend {}
/*기타*/
.left {}
.right
2. 저작자 표시, 문서제목, 작성일자 표시
/* =============================
데꾸벅
Copryright 2010 Nextree soft
written for - http://techbug.tistory.com
- 칼라 견본 -
13437a - darkblue
1d74be - mid blue
elelel - light gray
============================= */
다른이에게 자신이 짠 소스음을 알리는 부분이다. 저작권자를 표현하고 연락받을수 잇는 주소를 입력해 템플릿사이트나 기타 다른 사이트에 도용되지 않게 한다.
아래 칼라견본은 후에 CSS Guide문서를 작성할때 참조할수 있도록 미리 문서상단에 표기한다. 후에 칼라값을 찾을때 시간을 절약할 수 있게 한다.
3. 자신만의 CSS 템플릿을 보관하라
한번 구조화된 CSS와 마크업의 경우 나중에 재사용할 수 있다. 데꾸벅의 경우에도 프로젝트 마다 base.css와 테이블.css, 혹은 폼과 관련된 스타일시트들은 재사용하며 점점 업데이트 하여 사용한다.
각 사이트 마다 레이아웃이나 서브레이아웃의 상세 요소들은 스타일이 틀릴수 있으나 기본적은 스타일들은 대부분 비슷하게 적용되므로 보관하는것이 좋다.
여러분은 각 사이트마다 모바일용 레이아웃, 혹은 블러그, 카페, 포탈사이트 레이아웃등 자신만의 레이아웃들을 보관할 수 있다. Coda (OSX 에디터)는 웹사이트 개발할때 미리 이러한 레이아웃을 제공하여 웹사이트 제작 및 소스코드 관리를 편리하게 제공해 준다.
4. 유용한 명명법(Naming Convention)
클래스나 Id를 명명할때는 위치값이나 특정속성값들을 사용하지 않는다.
예를들면 col-left나 col-right 대신에 col-alpha, col-beta혹은 col01, col02와 같이
명명한다. 왜냐하면 나중에 다른 사이트를 개발할때 col-left가 오른쪽에 위치할때 문제가 된다.
그러므로 특정 디자인에 관련된 용어를 클래스나 id값에 명명하지 않는다.
클래스나 id이름은 어떻게 보이느냐가 아니라 반드시 그 요소가 무슨 기능을 하는지에 따라 명명한다.
예를 들면 .post-title보다는 .post-lagefont라 짓고 .comment-blue 보다는 .comment-beta와 같이 몀명한다.
5. 언더바 보다는 하이픈을 사용
오래된 브라우저는 언더바를 지원하지 않는다. 향후호환성을 위해 #col_alpha보다는 #col-alpha라고 명명한다.
6. DRY(Don't Repeat Yourself)하게 코딩
스타일을 재지정하는것 보다는 그룹핑하여 사용한다.
h1 {
margn:1px 0 0;
font:normal 12px gulim;
}
h2 {
margn:1px 0 0;
font:normal 12px gulim;
}
과 같이 되어 있으면 아래와 같이 그룹핑한다.
h1, h2 {
margn:1px 0 0;
font:normal 12px gulim;
}
또는 단축속성을 사용한다.
h1 {
margin-top:1px;
margin-right:0;
margin-bottom:0;
margin-left: 1px;
font-family:gulim;
font-size:12px;
font-weight:bold;
}
은 다음과 같이 단축형 속성으로 처리 가능하다.
h1 {
margin: 1px 0 0 1px; (위>오른쪽>아래쪽>왼쪽, 위>오른쪽|왼쪽>아래쪽, 위|아래>왼쪽|오른쪽등)
font:bold 12px gulim
}
7. 경량의 CSS 파일
위 속성들 처럼 단축속성들이 몇개 있다. 아래와 같이 사용할 수 있다.
풀속성으로 파일을 크게하지 않고 아래 단축속성들을 사용하여 파일사이즈를 작게한다.
background:url(이미지주소) 0 0 no-repeat scroll;
font : normal 12px gulim
파일사이즈가 작을수록 좋다. CSS Compressor를 이용하여 자바스크립트처럼 Obfuscate할수 있다.
8 Gecko를 기본으로, 그리고 다음에 IE, Webkit순으로
기본적으로 웹표준을 잘 따르는 브라우저를 기본으로 코딩하여 표준에 충실하며 IE에서 표현되지 않는 부분들은 hack을 사용하여 표현한다.
왜 먼저 IE를 먼저 맞추면 안되냐고 묻는 개발자들이 있다. IE에 맞추고 FF에서 틀어진 부분을 맞추려면 맞는 Hack이 없다.. ㅡ.,ㅡ; (대략난감)
9 유효성 검증
W3C의 CSS Validator를 이용하여 표준문법을 사용한다.
요즘은 브라우저에 플러그인 식으로 제공하므로 굳이 웹사이트를 이용하지 않아도 된다.
예를 들면 파이어폭스의 HTML Validator나 Firebug CSS Validator등이 있다.
10. 정돈된 CSS형태로 유지하라
개인적으로 브라우저에 특화된 CSS나 자바스크립트, 서버사이드 코드, IE 조건식등은 별도로 관리하며
기본 CSS에는 hack이 없는 깨끗한 상태로 유지한다. 기본 CSS 는 깨끗하고 유지보수가 편하게 관리한다.
11. 되도록 Hack을 사용하지 말라
10번 항목과 일맥상통하는 얘기이나 되도록 Hack을 사용하지 않는 식으로 코딩한다. 향후 대부분의 브라우저는 표준을 따라간다. 여러분이 짜놓은 CSS 에서 hack을 사용하지 말고 작성한다 어쩔수 없는 경우 사용한다면 별도의 파일로 관리한다.
개발자이자 유명한 웹표준저자인 Peter Paul Koch는 다음과 같이 말한다.
“The complexity monster has reappeared, right in the center of modern Web development. Nowadays it doesn’t manifest itself as an endlessly nested table, but as an endlessly complicated CSS hack"
12. 문서와 CSS파일을 분리하라
태그에 직접 스타일시트를 작성하는 inline-styleed 표기법 대신에 embeded, imported방식으로 작성하여 구조(HTML)와 표현(CSS)를 분리한다. 기본적으로 브라우저는 URI가 바뀌지 않는 자원에 대해서는 캐시하는 특성이 있으므로 CSS 파일로 별도로 분리한다.
13. DIV를 남용하지 말라
국내든 해외든, 특히 국내 퍼블리셔분들을 보면 div 태그를 너무 남용한다는 생각이 많이 든다. 마크업은 문서 그대로 구조만을 표현해야 하며 태그는 반드시 태그 그 자체의 의미대로 시맨틱하게 작성한다. HTML5의 <header>,<footer>,<nav>,<article>기타등등과 태그는 이와 같은 의도로 작성되었으며 브라우저자체에서 잘 렌더링할수 있도록, 혹은 추후 좀더 의미를 두기 위해 div태그등을 남용하지 않는다.
이러한 연습을 하기 위해 데꾸벅의 경우 마크업과 CSS 를 동시에 작성하지 않으며 마크업은 개발자에게 프로젝트 표준형식을 정해둔뒤 추후 혼자 CSS 작업을 하는 경우가 많다. (사실 마크업을 작성하는 수고를 덜수 있어서 좋다.)
14. 미디어타입을 이용하라
"인쇄했을 경우를 고려하라" 라는 의미와 같다. 사실 CSS 를 제거했을때도 문서의 흐름과 마크업만으로도 의미 전달을 할 수 있어야 한다. 이런 점에서 국내의 현실이 안타깝기 그지 없다.
'Publisher > CSS' 카테고리의 다른 글
| Height 100% 2~3단 컨텐츠 레이아웃잡기 (18) | 2010.07.27 |
|---|---|
| 간단한 CSS Reset (4) | 2010.05.24 |
| 지금 바로 쓸수 있는 CSS3 (0) | 2010.03.07 |
| Firefox에서 링크 점선 없애기 (2) | 2010.03.06 |
| CSS로 만든 3D입체 이미지 (6) | 2009.12.31 |