네이밍 가이드

CSS를 사용하기 이전에 예상가능한 class군을 설정하고서 제작을 하는 것이 좋습니다. class의 네이밍에 있어서도 편리함이 있고, 제작자가 아닌 다른 이가 코딩가이드만 보고서도 그 내용을 쉽게 파악하기도 쉬우며, 그 결과물만으로도 추후 제작될 사이트 디자인에 있어 디자이너들도 어느 정도의 군을 나누게 됨으로서 조금이나마 체계적인 디자인에 도움을 줄 수 있습니다. 1. 기본적인 Text Style 지정 전체적으로 쓰일 기본적인 태그들의 Style을 지정합니다. td, div, span, p, font, a, { text-decoration:none ; font-size:9pt ; font-family : 돋움, Dotum,Helvetica ; color:#454545 } 이는 먼저 지정된 class의 속성을 그 이후의 class에서 상속받는 것을 이용한 것입니다. 몇몇 에이전시에서는 이러한 방법이 다수의 제작자들에게 공통으로 쓰이기 힘들다는 이유로, 또는 사이트 전체에 로드를 가져온다는 이유로 각각의 class마다 지정하는 방법을 쓰기도 합니다만, 일부는 이러한 속성을 모르기 때문입니다. 2. Logical 태그의 속성을 지정합니다. <abbr>, <acronym>, <dfn>, <address>, <cite>, <q>, <code>, <kbd>, <samp>, <var>, <del>, <ins>, <em>, <strong> 의 태그에 대한 스타일을 지정합니다. 위의 태그들은 각각 고유의 text style을 가지고 있습니다. 하지만, 그런 text style들은 영어권의 사람들의 눈에 익숙한 방법입니다, 한국에서는 그 효용성이 감소하며, 이탤릭체의 경우 오히려 마이너스가 됩니다. 이를 유저들에게 어필할 수 있는 색상이나 폰트, 스타일로 규정함으로서 User Interface에 뛰어난 효과를 가져올 수 있으며, 체계적인 디자인가이드를 만들 수 있습니다. em { text-decoration : none ; font-family : 돋움, Dotum, Helvetica ; font-weight : bolder ; color : #D34145 } cite { text-decoration : underline ; font-family : 돋움, Dotum, Helvetica ; font-weight : normal ; color : #6347EE ; } ※ 폰트의 크기는 되도록 지정을 하지 않습니다. 이들 태그는 컨텐츠 중간중간 위치하기 때문에 컨텐츠에 지정된 스타일을 상속받도록 하는 것이 좋습니다. 예외적으로 글자의 크기를 크게 혹은 작게 지정하고 싶다면, font-size의 속성 larger, smaller를 사용하는 것이 좋을 것입니다. strong { text-decoration : none ; font-family : 돋움, Dotum, Helvetica ; font-weight : bolder ; color : #FF2222 ; font-size : larger ; } 3. 컨텐츠의 종류와 각각의 타이틀, 본문, 주석, 맺음부분을 구분하여 줍니다. 일반적으로 코딩순서상 가장 나중에 지정되는 경우가 많지만, 미리 지정하고서 디자인팀과 프로그래머팀과의 협의를 통해 각 메뉴별로 본문색이 변할 것인지, 타이틀의 단계는 몇가지가 될 것인지, 본문중에 주석이나, 맺음말부분은 존재할 것인지 등등을 통일하고 정의하는 것도 상당히 중요합니다. 하지만, 제가 겪어본 대부분의 디자이너분들이 글의 스타일은 거의 지정을 안해주더이다. 그래서 거의 제가 생각하는대로 했기 때문에 조금은 이부분이 객관화가 덜 된 부분일지 모르겠습니다. 서로 다른 본문의 스타일을 구분해봅니다. 일반적으로 카테고리별로 디자인에 맞추어 글자색이 다른 경우가 많으니 카테고리명으로 class이름을 정할 때가 많습니다. .company_Content {color : #363636 ; line-height : 150%} .education_Content {color : #210021 ; line-height : 150%} 임의로 본문이라는 뜻으로 Content를 자주 쓰는데, class이름을 정할 때 카테고리명을 앞에 쓸지 Content를 앞에 쓸것인지는 상황에 따라 다를 수 있습니다. 입맛대로 하시길... 간혹, 본문중간에 이미지가 들어간다던지, 테이블이 삽입되는 경우에는... line-height속성이 각각의 자간과 줄간격을 일그러트리는 경우가 많습니다. 이때에는 class가 정의된 문단을 종료하고서 테이블을 삽입하는 것이 좋습니다. 타이틀의 class이름도 마찬가지로 정의합니다. .company_title {color : #363636 ; font-weight : bolder ; } .education_title {color : #210021 ; font-size : 15pt ; } 타이틀의 경우 타이틀 앞부분에 아이콘이 붙는다던지, 뒤에 링크버튼이 붙는다는지, 주석이 달린다던지...하는 경우가 많습니다. 이 점도 감안해서 각각의 경우를 정의해놓습니다. .company_title_icon {color : #363636 ; vertical-align : bottom } .company_title_more {color : #363636 ; vertical-align : middle } .company_title_sup {color : #363636 ; vertical-align : top ; line-height : 19pt; } 주석과 맺음말, 그외의 다른 문단이 삽입되는 경우를 정의합니다. 이 부분은 웬만해선 미리 정의하기에는 어려운 면이 많습니다. class이름정도만 미리 예상해놓는 것만으로도 상당히 편리할 것입니다. .company_notes {} .company_epil {} 4. 예상가능한 링크의 종류를 설정한다. 네비게이션의 단계의 구분이 뚜렷하다면, 이를 설정하는 것도 꽤 유용한 방법입니다. 보통은, 상단네비게이션, 좌단네비게이션, 하단네비게이션, CopyRight부분등이 이에 해당하며, 각각의 링크는 뚜렷한 연계성이 없기 때문에 각각을 구분하여 지정하는 것이 좋습니다. 한단계 더 하자면 각 위치별로 상위, 하위링크인지도 뚜렷하다면 이도 지정하는 것이 좋습니다. *///////////////기본적인 링크의 스타일 정의//////////////////////// a:link { text-decoration:none ; font-family : 굴림, Gulim, Helvetica ; } a:active { text-decoration:none ; font-family : 굴림, Gulim, Helvetica ; } a:visited { text-decoration:none ; font-family : 굴림, Gulim, Helvetica ; } a:hover { text-decoration:none ; font-family : 굴림, Gulim, Helvetica ; } *///////////////상단 네비게이션 링크//////////////////////// a.TopNv_Hi { font-size : 15px ; font-weight : bolder ; color : #164234} a.TopNv_Lo { font-size : 13px ; font-weight : normal ; color : #030303} *///////////////상단 네비게이션 링크//////////////////////// a.LeftNv_Hi { font-size : 13px ; font-weight : normal ; color : #3462FF} .LeftNv_Lo a { font-size : 13px ; font-weight : normal ; color : #3462AA} .LeftNv_Lo { font-size : 13px ; font-weight : normal ; color : #3462AA} <<링크와 같은 스타일의 text가 혼재한다면 같이 지정함이 좋습니다.>> 두번째로 본문에 들어갈 링크의 종류를 예상해봅니다. 일반적으로 예상가능한 종류는 다른 메뉴로의 이동, 타 사이트로의 이동, 메일주소, 이름, 주석 혹은 설명페이지로의 이동, ?업 역시 컨텐츠에 지정된 폰트크기를 상속받게 하는 것이 좋으므로 font-size를 지정하지 않는 것이 좋으며, 종류에 따라 underline만이 필요할지, 뚜렷한 스타일이 필요할 것인지 디자이너가 판단하여야 할것 입니다. a.text_Outer { color : #FF0000 ; text-decoration : underline ; } a.text_email { color : #000000 ; background-color : #EEEEEE } a.text_username{ color : #3333FF ; font-weight : bolder ; } 세번째로 게시판 리스트부분의 링크 스타일을 정의합니다. 보통은 각 카테고리마다 게시판의 디자인이 다르게 하는 경우가 많으므로 카테고리명 그대로 사용하는 것이 편할 때가 많습니다. a.bbs_shop { color : #3232FA ; text-decoration : none ; } a.bbs_biz { color : #4444AA ; text-decoration : none ; } 3~4줄의 리스트를 컨텐츠 페이지에서 보여주는 게시판의 경우는 active 링크에 볼드를 처리하는 경우도 있고, 자신의 글의 경우, 자신의 이름부분에 스타일을 달리하는 경우도 있겠죠. a.bbs_shop_act { color : #3232FA ; text-decoration : none ; font-weight : bolder ; } 5. Form태그들의 스타일을 정의합니다. form태그의 기본 문자 스타일을 정의합니다. form { text-decoration:none ; font-size:9pt ; font-family : 굴림,Gulim,Helvetica ; margin : 0 0 0 0 } input, select , option, textarea, button , fieldset, legend, label { text-decoration:none ; font-size:9pt ; font-family : 굴림,Gulim,Helvetica ; color:#454545 } (form에서 유저가 입력하는 내용은 다른 본문과 다른 스타일로 쓰여지는 것이 UI에서 이점을 가지고 있다고 연구되어왔고, 저도 예전부터 그렇게 생각해왔지만, 디자이너분들이 사소한 부분이라고 치부하는 바람에 그다지 보편화되지는 못한 듯 합니다.) form태그들은 각 카테고리별로 크기와 배경색, 보더를 가지기에 미리 정하기가 애매합니다. 네비게이션부분에서 쓰이는 부분, 검색부분, 로그인부분을 미리 정하고, 각 카테고리별로도 검색, 사용자입력, 기능형등으로 분류해서 정하는 것이 좋을 듯 합니다. 저두 이건 예상하기 너무 힘들어서 그때그때 씁니다...^^ 6. 사이트 특징적인 부분 설명하기 애매합니다만, 쇼핑몰의 가격, Confirm부분의 YES or NO, 입력확인부분, History 커뮤니티의 유저이름, 기능성 링크, Site Depth부분, History 증권사사이트의 가격변동폭, 지수, 들과 같이 유저에게 가장 강하게 어필되어야 하는 text부분같은 것은 사이트 전체에서 일관성이 강조되어야 하는 것들입니다. 이런 것들은 기획단계에서부터 그 종류와 성격, 강조의 경중 등등을 미리 협의, 검토, 정리를 한 후 CSS코딩되어야 합니다. 워낙 많으니 예는 안 올릴렵니다. 끝?슈~ 간단하게 요약하자면 object(text) > inline > block 작은 단위에서 큰 단위로 정의하고, 다시 기능적인 부분과 특이한 경우를 세밀하게 정의하는 순서입니다.