vcss.png

작업하면서 알아낸 CSS 권장 사용법을 정리해 보았습니다. 폰트관련 코드는 항상 font-family, font-size, line-height:를 사용하여 글꼴을 관리하였는데 font:를 사용하니 매우 간결하고 사용도 간편하군요. IE전용 filter: 및 불여우 전용 -moz 관련 스타일들은 전부 에러가 발생합니다. 그리고 모든 스타일 정의에 background-color를 지정하라는 W3C의 경고는 정말 이해할 수 없더군요.

- 모든 class에 background-color 사용 권장(못 본 척 함)
- 링크 또는 폰트색상이 배경색과 같을 경우 경고(못 본 척 함)
- 폰트 정의가 같은 경우 경고(못 본 척 함)
- font-family: font-size: line-height: 대신 font:를 사용
예1) font: 12px/1.5 Dotum, Verdana, AppleGothic, Sans-serif;
예2) font: bold 10px Tahoma;
- body 또는 부모 class에 적용한 폰트 스타일은 중복으로 정의할 필요 없다.
- color 코드 6자리가 모두 같은 경우 3번만 쓰자.
예1) color:#666
- 파이어폭스는 width, height값에 padding값을 포함한다. 익스플로러는 width, height값에 padding값을 포함하지 않아 서로 다른 결과가 나타난다. 이런 경우 * html .class { width:123px; }와같이 IE전용으로 지정해 준다.
예1) .class { width:123px; padding: 5px 10px 0 10px; }
* html .class { width:143px; }

Comments

Got something to add? You can just leave a comment.

  • Draco Draco

    모든 스타일에 백그라운드를 지정하라는 것은 아무래도 그것을 포함하는 객체의 디자인의 변화를 대비하기 위해서인 듯합니다.

    예를 들어 흰색 배경의 사이트에 텍스트가 검은색으로 지정된(배경은 지정 안된) 문서가 있는데, 사이트 디자인이 검은 배경으로 바꾼다면, 텍스트의 스타일도 다시 바꿔줘야 가독성 저하를 막을 수 있게 됩니다. 이 텍스트는 배경이 흰색이다라는 것을 지정되어 있다면 디자인 기준상의 미적인 부분은 어차피 바꿔야 하더라도 기본적으로 당장의 가독성은 유지할 수 있다라는.... 글자색과 배경색은 같이 가는게 효율적이라는 사고 방식.

    reply edit

  • 파이어준 파이어준

    그렇군요. 정말 이해할 수 없는 것은, 부모 클래스에 지정한 폰트 스타일의 중복은 경고를 하면서, 부모 클래스에 지정한 백그라운드 컬러는 중복을 권장하는 것입니다. 사고방식의 차이라면 따라야지요 뭐~

    reply edit

Your Reaction Time!

avatar

captcha