첨부파일 https://eond.com/css_naming/164010

HTML Common Rule

코딩은 위지윅 방식이 아닌 Text-Editor를 이용한 하드코딩을 기준으로 한다.
Cross Browsing을 원칙으로 한다.
기본사항 - 제작 되는 모든 웹페이지는 아래 해당 웹브라우져 버전에서 호환되도록 제작 한다.
IE5.0, 5.5, 6.0(win2000) / IE6 sp2(winXP) / IE7 / Firefox(최신 정식버전)

주요서비스 - 기본사항은 물론 아래사항 까지 포함 한다.
IE5.0, 5.5, 6.0(win98) / Opera(최신 정식배전) / Safari(최신 정식배전)
문서 제작시 기본(default) 문서는 아래 내용을 참조한다.
html lang="ko"의 기입은 charset이 euk-kr일경우에 제한적으로 사용한다.
각 태그의 어트리뷰트 속성들에 값들은 항상 "(따옴표)로 묶는다.
td class=a => (X) td class="a" => (O) a href=a => (X) a href="a" => (O) div id=a => (X) div id="a" => (O) table cellpadding=0 cellspacing=0 => (X) table cellpadding="0" cellspacing="0" => (O)
Color 을 컬러코드로 작성할경우 컬러코드 앞에 '#'를 명시한다
color=000000, color=ffffff → (X) color=#000000, color=#ffffff → (O)
style적용시 사용되는 모든 수치 (width, height) pixel에는 수치를 알려주는 px값을 달아준다. (0은 제외)
=> (X) => (O) .class{margin:10 5 0 5} => (X) .class{margin:10px 5px 0 5px} => (O)
font태그는 쓰지 않는다. font 태그 대신에 span 태그를 사용
, → (X) , → (O) → (X) → (O)
font-family 선언시 한글 폰트값속성들은 한글로 기재한다.
font-family:gulim => (X) font-family:굴림 => (O) font-family:dotum => (X) font-family:돋움 => (O)
전역(global) 글꼴을 정하는 경우font-family 선언시 "돋움" 혹은 "굴림" 이라는 한글을 사용자 환경에서 인식하지 못하는경우를 대비한다.
font-family:굴림 => (X) font-family:굴림, gulim, AppleGothic, sans-serif => (O)
폰트가 가변되는 경우에 Font-stylesheet 속성중 line-height의 경우는 사이즈단위를 상대값으로 지정한다


img src=" " 태그사용시 해당 이미지의 사이즈와 alt="" 어트리뷰트 표기를 원칙으로 하며 "border=0" 값은 css선언으로 대체한다.
= > (X) => (O) example) 한게임로고 결재버튼 블로그타이틀
alt=""는 의미없는 이미지의 경우(주로 레이아웃 등의 디자인 효과를 위해 생기는 이미지) 는 null값 (alt="")으로 두고 제목, 로고, 버튼과 같이 의미전달을 위한 이미지일 경우는 alt에 적당한 값을 표기한다
link 가 포함된 이미지 태그에 'border=0' 값을 넣지 않기 위해서는 아래와 같은 스타일 시트를 상단에 정의해준다

StyleSheet의 경우는 link css 형태로 처리한다
* 단 td 나 body, img등에 지정되는 global css의 경우는 페이지 내에 Embed 형태로 처리한다.
a link 안에 불필요한 font태그 혹은 span태그를 사용을 지양한다.
--> (X) or --> (O)
Anchor style 설정시 순서는 link, visited, hover, active의 순으로 나열한다.
a:link{color:#000} a:visited{color:#111} a:hover{color:#222} a:active{color:#333} * hover와 active는 항상 마지막에 위치시켜야 한다.
style을 중복으로 지정하지 않는다.
NHN => (X) NHN => (O)
주석 사용시 하이폰(-)을 2개 이상 넣지 않으며, 하이폰과 하이폰다음에 위치하는 주석내용 사이는 좌우로 한칸이상의 공백(space)을 유지한다
=> (X) => (O) * Tip : homsite툴의 경우 Ctrl+Shift +M 이 주석 hotkey
주석은 최대한 간결히 필요한 것만 달아놓는다. tag와 마찬가지로 주석역시 시작주석과 끝 주석을 함께 표기한다.
~


 

CSS

font-family 선언시 한글 폰트값속성들은 한글로 기재한다.
font-family:gulim, font-family:dotum => (X) font-family:굴림, font-family:돋움 => (O)
Css선언시 pt(point)를 사용하지 않고 px로 통일한다
font style="font-size: 11pt" (X) font style="font-size: 11px" (O)
Style은 Class화 시켜 사용함을 원칙으로 한다. (inline 형태는 지양한다)
CSS선언시 프로퍼티중 사용빈도가 높은 순서위주로 선언 순서를 통일 한다.
* Basic에 기재된 W H M P순을 기준으로 작성하고 그 이외에 것들은 Expansion 표를 참조하여 CSS선언 순서를 통일한다.
Basic

Order Property
1 width
2 height
3 margin
4 padding
Example
.nhn{ . .. ... width:7px; height:7px; margin:7px; padding:7px; ... .. . }
Expansion

Order Property
1 display
2 list-style
3 position
4 float
5 clear
6 width
7 height
8 margin
9 padding
10 border
11 background
12 color
13 font
14 text-decoration
15 text-align
16 vertical-align
17 white-space
18 etc
.. ...
* Mozila.org css선언 제안순서 참고
복수 Selector를 지정할 경우 표기방법 통일
각 셀렉터의 콤마(,)후 개행 한다.
div, td, .nhn{ w; h; m; p; } div, td, .nhn{ w; h; m; p; }
CSS정렬 방식은 구조파악이 쉽도록 Content단의 들여쓰기와 동일하게 구성한다.
Content단의 div 들여쓰기 정렬 Depth와 CSS의 Depth가 같도록 구성한다.
DIV CSS
CSS를 개별 조합 방식으로 사용할 경우에만 아래와 같은 네이밍규칙을 따른다.
Text

Group Property Name
Font Family font-family:굴림 .gm{font-family:굴림}
font-family:돋움 .vdn{font-family:돋움}
font-family:verdana .dm{font-family:verdana }
font-family:tahoma .thm{font-family:tahoma}
Font Size font-size:9px .p9{font-size:9px}
font-size:10px .p10{font-size:10px}
font-size:11px .p11{font-size:11px}
p + font크기수치 (ex. p15 = p + font-size:15px)
Line height line-height:1.3 .ln13{line-height:1.3}
line-height:1.4 .ln14{line-height:1.4}
line-height:13px .ln13p{line-height:13px}
line-height:14px .ln14p{line-height:14px}
ln + line height수치
(font-size와 같은방식이나 절대값과 상대값이 구분됨)
Underline textdecoration:underline .u{text-decoration:underline}
textdecoration:none .nu{text-decoration:none}
Boldic font-weight:bold .b{font-weight:bold}
Letter spacing letter-spacing:-1px .ls{letter-spacing:-1px}
letter-spacing:-2px .ls2{letter-spacing:-2px}
letter-spacing:0 .ls0{letter-spacing:0}
letter-spacing:1px .ls1{letter-spacing:1px}
Font color

Color Group Name
Default color .c, a.c:link, a.c:visited, a.c:hover, a.c:active{}
/*주로 검은색, 회색 계열로 페이지의 기본으로 쓰이는폰트 컬러*/
White .w, a.w:link, a.w:visited, a.w:hover, a.w:active{}
Gray .gray, a.gray:link, a.gray:visited, a.gray:hover, a.gray:active{}
Brown .brn, a.brn:link, a.brn:visited, a.brn:hover, a.brn:active{}
Orange .o, a.o:link, a.o:visited, a.o:hover, a.o:active{}
Green .gr, a.gr:link, a.gr:visited, a.gr:hover, a.gr:active{}
Navy .nv, a.nv:link, a.nv:visited, a.nv:hover, a.nv:active{}
Pink .pink, a.pink:link, a.pink:visited, a.pink:hover, a.pink:active{}
aqua .aq, a.aq:link, a.aq:visited, a.aq:hover, a.aq:active{}

따로 분리된 css는 link stylesheet 형태로 사용하면 이는 캐싱되어 좀더 가볍고 빠른 사이트에 도움이 된다
하지만, class와 같이 클래스 이름을 임의로 부여할수 없는 Tag Selector로 정의되는 전역(global) style의 경우는 link style형태가 아닌 페이지내에 (style type="text/css" ~ /style) Embed 형태로 직접 위치 시킨다. 간혹 link stylesheet를 불러오지 못하거나 css를 제대로 읽지 못하는 오류상황의 경우 이로 인해 디자인이 깨지는 현상을 최소화 하는것이 목적이다.
 
 

출처 : NHN UI Library
코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 14 articles in 1 / 1 pages
번호 제목 제목 글쓴이 글쓴이 날짜날짜 조회 수
공지 CSS 및 이미지 네이밍에 관심있으신 분은 같이 참여해주세요. :) 이온디 2009/01/22 8350
13 [CSS] Get BEM 이온디 2018/12/01 39
12 [CSS] What’s in a name? A CSS naming convention overview 이온디 2018/12/01 61
11 [CSS] #tnb (Top Navigation Bar) [1] 이온디 2015/04/27 697
10 [CSS] What Makes For a Semantic Class Name? 이온디 2013/03/01 3811
9 [CSS] 레이아웃 네이밍 가이드 [6] 이온디 2012/01/19 5923
8 [사이트 전반] HTML 마크업 설계 템플릿(한혜진) 파일 이온디 2010/11/03 7610
7 SideNavigationBar (x) 이온디 2009/02/21 5494
6 [CSS] NHN Naming Guidelines (추천) 이온디 2009/01/20 6295
현재글 NHN UI(html, css) 하드코딩 기본룰 파일 이온디 2009/01/20 6968
4 css 네이밍 규칙 [7] 이온디 2009/01/20 11830
3 [CSS] 모든 디자이너가 해야할 9가지 CSS 원칙 (추천) 이온디 2009/01/19 6892
2 CSS 네이밍 이온디 2009/01/14 5621
1 웹 개발자를 위한 네이밍 룰(Naming Rule) 가이드 (최현진, 2002년) 파일 이온디 2003/11/14 9416

해시태그 디렉터리