CSS 마스터 10가지 원칙

유용한 튜토리얼들과 web관련된 스킬에 대해서 다루는 NETTUTS에서

10 Principles of the CSS Masters 라는 포스팅이 올라와있어 간단히 번역합니다.

10명의 유명한 디자이너들에게서 CSS에 관련된 팁 1가지씩을 모은 포스팅입니다.

(빨간 글씨는 제 의견입니다.)






1. CSS는 간단하게 - Peter-Paul Koch

간단요약 : CSS hack은 가급적 쓰지마세요.





2. CSS 선언은 한줄로 - Jonathan Snook

간단요약 :

Good

{font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

Bad

h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}

의견 : 이전에도 제 블로그에서 언급되었던 내용입니다만 한줄로 CSS를 작성하게 되면 한눈에 정의된 스타일을 스캐닝하기가 쉬워지고(개인차) 공백제거로 인해 파일이 좀더 작아지는 이점이 있습니다. 하지만 때로는 bad라고 되어있는 방법이 좀더 스타일을 스캐닝하기가 쉽기도 합니다.





3. CSS는 짧게 - Roger Johansson


의견 : 대표적으로 margin의 경우 margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px 이렇게 쓰는것 보다는 margin:1px 2px 3px 4px(각각 상 우 하 좌 - 시계방향) 이렇게 쓰는 것이 오타의 위험도 줄여주면서, 파일용량도 작게 하고 한눈에 보기도 쉽습니다.





4. 블록엘리먼트들은 자연스럽게 공간을 차지하게끔 해라 - Jonathan Snook


의견 : 블록엘리먼트는 width를 지정해주지 않아도 자연스럽게 부모엘리먼트의 width에 맞춰져서 width를 자동 조절합니다. 부모에서부터 자식까지 모두 일일이 width를 지정해주기 보다 자연스럽게 공간을 차지하게 하는 것이 좀 더 유연한 웹사이트를 만드는데 도움이 될 것입니다.






5. float를 clear하기 위해서 float를 써라 - Trevor Davis


의견 : CSS레이아웃의 핵심인 float는 float를 clear 해야 다음의 엘리먼트들이 float의 영향을 받지 않게 됩니다. float 해제 방법은 그 종류만해도 아주 많이 있습니다. 이러한 방법중에서 단연 으뜸은 float라는 말을 하고 있네요.






6. 음수 margin을 사용하라 - Dan Cederholm


의견 : 링크를 따라가보시면 음수 margin 사용의 아주 좋은 예가 나와있습니다.






7. 가운데 정렬 레이아웃을 위해서 CSS를 사용하라 - Dan Cederholm


#container { margin: 0 auto; width: xxxpx; text-align: left; }




의견 : standard 모드에서는 IE를 포함한 모든 브라우저가 margin:0 auto; 를 사용하여 특정 엘리먼트를 가운데 정렬시킬수 있습니다.(전제조건은 width가 정해져야 합니다.) quirks모드에서는 IE가 margin:0 auto를 제대로 반영하지 못하기 때문에 body에 text-align:center를 적용해야 합니다. IE는 text-align이 inline엘리먼트 뿐만 아니라 block 엘리먼트까지 가운데 정렬시킵니다.




8. 올바른 DOCTYPE을 사용하라 - Jeffrey Zeldman


간단 요약  : 올바른 DOCTYPE 꼭 사용하세요.





9. 가운데 정렬은 CSS로 - Wolfgang Bartelme


의견 : 7번과 비슷한 내용입니다.




10. text-transform을 사용해라 - Trenton Moss


간단 요약 : text-transform 속성의 값은 3가지가 있습니다. capitalize(첫글자만 대문자), uppercase(모두 대문자), lowercase(모두 소문자) 유용하게 사용하세요.


의견 : text-transform은 아쉽게도 대소문자의 구별이 있는 영어에만 해당되고 한글은 적용이 되지 않아 아쉽기만 합니다