Chris Coyier는 SMASHING MAGAZINE을 통해서 '12 Principles For Keeping Your Code Clean'이라는 제목의 멋진멋진 글을 소개하고 있습니다. 그가 CSS을 사람들에게 가르칠 때부터 강조했던 원칙들로 다음과다음과 같습니다.
얕은 영어 실력으로 제대로제대로 번역은 어렵고, 제목 위주로 짧게 소개만 해 드리겠습니다.
- 엄격한엄격한 DTD를 사용할 것 (Strict DOCTYPE)
어떤 레이아웃을 위한 테이블 요소도 사용하지 않는다면 TransitionalTransitional Doctype 은 필요 없다.
- <title> 속의속의 '&'를 인코딩할 것 (Character set & encoding characters)
<head> 섹션 안에서 문자 집합(Character set)을 가장 먼저 정의해 주도록 한다.한다. 많은 경우 <title>을 가장 먼저 작성하면, <title> 안에 '&'와 같은 문자가문자가 제대로 인코딩 되지 않는 문제가 생길 수 있다. 때문에 <title>과 <meta<meta http-equiv="Content-Type" ... />의 자리를 바꿔 주는 것이 좋다.
- 적당한 들여쓰기를 할 것 (Proper indentation)
들여쓰기는 코드의 가독성을 높여 준다. 표준 절차에서 새로운 요소가 시작될 때때 그것의 자식 요소는 한 개의 탭(또는 약간의 공백)을 띄운다.
- CSS와 JavaScript는 외부에 둘 것 (Keep your CSSCSS and JavaScript external)
CSS와 JavaScript를 HTML 안에 둔둔 경우 단 하나의 HTML 페이지만을 위해서 사용된다. 같은 코드의 많은 HTMLHTML 페이지들을 위해서라면 HTML 페이지 밖에 두는 것이 좋다.
- 태그를 바르게 감쌀 것 (Nest your tags properly)
인라인 요소로 블록 요소를 감쌀 수 없다. 올바른 방법으로방법으로 태그를 감싸야 한다.
- 필요 없는 div를div를 제거할 것 (Eliminate unnecessary divs)
div를 불필요하리만치 많이많이 사용하는 경우가 있다. 필요하지 않다고 판단되는 div를 제거하고 최소화 하자.
- 의미 있는 이름을 사용할 것 (Use betterbetter naming conventions)
좋은 class와 id 속성의 이름은 "mainNav","mainNav", "subNav", "sidebar", "footer", "metaData"와 같은 것들이다."red", "italic"과 같이 디자인을 기술하는 이름은이름은 적당하지 않다.
- 영문자의 대소문자화 같은 타이포그라피는타이포그라피는 CSS를 이용할 것 (Leave typography to the CSS)
CSS를 이용하면 소문자를 대문자로, 대문자를 소문자로 변환할 수 있다. 마크업을 통해서 하지 말고, CSS를 이용하자. 하지만 한글에서는 사용되지 않는 기능이다.
- <body> 에에 class와 id 속성을 쓸 것 (Class/id the <body>)
<body>에 class와 id 속성을 지정함으로써 다양한 디자인 변화에 대한 레이아웃(대체 레이아웃)을레이아웃)을 유지할 수 있다.
- 유효한지 검증할 것것 (Validate)
유효성 검증을 실시하자. HTML 마크업과 CSS에 대한대한 W3C Validation이 있다.
- 논리적인 순서를 가질가질 것 (Logical ordering)
풋터는 논리적으로 헤더나 사이드바보다 아래에아래에 위치한다. 마크업 안에서도 역시 마지막에 위치하는 것이 옳다.
- Just do what you can
중요한 것은 HTML을 제대로 작성하는 방법을 배우고, 그것을그것을 정확히 사용하는 것이다. 그리고 다음에 새로운 프로젝트를 시작하게 되면 당신은 그렇게그렇게 할 수 있을 것이다.
원문에는 각각 원칙별로 참조 문서를 링크하고 있어 12가지의 원칙을 읽으면서 여러가지 공부를 함께함께 해볼 수 있습니다. 시간내서 꼭 한번 살펴보세요.
출처 : 봄눈님 블로그 http://www.pageoff.net/841
반응형
'Web story > Front End' 카테고리의 다른 글
| CSS 프레임워크 - Kube (0) | 2012.12.06 |
|---|---|
| 반응형 웹 리소스 (0) | 2012.12.06 |
| WebSniper - IE6~7 웹퍼블리셔&웹개발자를 위한 만능 툴(실시간 태그 검색, 소스보기, 소스분석, 실시간 소스편집) (0) | 2011.09.02 |
| 웹퍼블리셔에게 가장 중요한 것은 무엇일까? (0) | 2009.01.08 |
| 개발자님 제발 HTML을 깨트리지 말아주세요 (0) | 2008.11.17 |