제가 쓰는 default CSS 입니다
제가 에이젼시에서 html 코딩을 할때 쓰는 default CSS 입니다. 에이젼시의 특징이 많이 반영되어 있어서 가끔은 좋지않거나 맞지 않는 부분들도 있는걸 참고해주세요
먼저 body에 대한 기본 속성 정의 입니다. 사용자가 글씨 크기를 확대/축소 할수 있도록 font-size 단위를 em으로 사용하였습니다.
line-height는 em으로 쓰니 자식 요소에서 font-size가 달라졌을 때의 계산이 내가 의도하는 대로 되지 않는 문제가 있어서 수치값으로 표현하니 line-height가 일정한 비율을 그대로 상속하며 유지하였습니다. trio 번역문에 ‘수치는 계산된 값이 아니고, 전달된 값이다.’ 라는 말이 있기는 한데 확실히 이해는 안되네요;
그리고 밑에는 제가 px를 많이 사용했기 때문에 em을 변환할때 편하게 하고자 주석으로 9-15px까지는 계산해서 적어놨습니다 -_-
이것은 주석에도 적어놨고 막아놓기도 하였으나 가장 자주 주석을 풀어버리는 사항이기도 합니다 -_-
길게 언급은 안하고 아직은 font-size가 고정되어 있는걸 좋아하는 (브라우저 설정에 따라 변해 있을때 바꿀줄 몰라서 당황하는 유저에 대한 배려??) 클라이언트들이 많기 때문에 IE만 fixed 시킵니다. 아직 전 이런일 가지고 발벗고 나서서 바꾸고자 하는 역량이 없습니다 -_- 하지만 최소한 지킬수 있는 부분은 지키려고 노력합니다.
링크정의와 속성들 초기화를 합니다. 이미지위에 생기는 여백문제를 방지하기 위해 dl과 li 안의 이미지는 다 top 정렬을 시켜버렸습니다.
input과 select는 자주 같이 쓰이므로 전체적으로 세로 middle 정렬을 해서 정렬문제에 최대한 신경을 안쓰도록 했습니다. 그러나 가끔 버튼스타일의 input과 버튼 image 가 같이 있는 경우는 image를 따로 세로 middle 정렬을 해줘야하는 문제가 있습니다.(서버사이드 개발자 분들이 당황하시는 경우가 종종 있습니다 -_-
hr 태그는 디자인적으로 사용될일이 별로 없고 구조적으로 필요한 태그이므로 display를 none으로 하여 사용합니다.
디자인적 요소를 클래스로 관리하는것에 대해서는 별로 좋은 방법이 아닙니다. 정찬명님 블로그에도 관련글이 있으니 참조하시기 바랍니다. 저도 실제로 많이 쓰는 편은 아니지만 p태그에 padding 하나만 들어가는 상황이라면 CSS 유지보수는 거의 없을텐데 그것을 따로 관리하면 라인수도 늘어나고 번거롭고 해서 그런상황에선 여기있는 디자인적인 class들을 활용합니다. 어쩌면 변명스러운 말일지도 모르지만 제 경험적인 면으로 볼때는 들어가는 css 속성수가 적고 향후 활용도가 떨어지는 부분이라면 공통 클래스를 사용하는게 부분적으로 효율성이 높은것 같습니다.
아직 모든 브라우저에서 지원하지 않는 :first-child, :last-child 로 인해 float:left가 적용된 리스트에 대한 효과적 배치가 어렵기 때문에 만들어 놓은 CSS 입니다. 그래도 first-child는 ie6만 안되는군요.
에이젼시에서 코딩후 들어온 수정사항 중 가장 절 당황케 만드는 부분이었습니다. 많은 엘레멘트들의 css를 초기화 시키고 변형 시킨 사항들이 위지위그(혹은 에디터) 형태의 게시판에서 무참히 깨져나오는 걸 보고 trio에서 엘레멘트가 가지는 기본 CSS값들을 참조해서 만들었습니다. 내용이 뿌려지는 부분에 originalCss라는 클래스를 준 div를 감싸주면 됩니다.
그러나 원 CSS 파악이 어려운 테이블에 대해서는 문제 해결이 힘들고 table 및 th, td 태그를 클래스로 관리해주는게 최선의 방법인것 같습니다.
끝으로, 이 CSS는 계속 추가 및 보완되고 있습니다 ^^;
좋은 의견들 있으면 남겨주시면 감사하겠습니다.
- Posted in WWW at 6월 23rd, 2007
- Tags : css
- 댓글이 없습니다
- Trackback : http://www.hoiheart.com/wp/archives/8/trackback




