엔디프의 웹표준 커버스토리
CSS 네이밍 규칙 정하기 본문
안녕하세요 엔디프 입니다.
저는 제 나름대로의 CSS 네이밍 규칙을 정하고 있습니다.
CSS나 웹표준의 세계가 워낙 방대하여 모든걸 다 정하기는 힘들지만 나름대로 소소한 가이드를 지정해놓고 사용하고 있습니다.
이 글에서는 저의 네이밍 규칙을 정의해보고 앞으로도 계속 적으로 보강해나갈 예정입니다.
1. 공통규칙
1-1. 모든 css의 첫 시작에는 숫자, 특수문자, 대문자는 사용하지 않는다. 또한 임의의 네이밍을 정할때는 형태의 의미를 따라간다.
1-2. 네이밍은 형태_의미_상태 순으로 조합하며 3단계를 넘지 않도록 합니다.
EX) btn_apply_on, box_nnews, box_replay_open
1-3. css 파일명
main.css <- 메인페이지 전용 css
sub.css <- 서브페이지 틀 구축 전용 css
content.css <- 서브페이지 내용 코딩
reset.css <- css초기화
mreset.css <- 모바일 css초기화
common.css <- 공통된 사항들에 대한 css
h1~h6, p, ul, ol, dl 등 주요태그들의 간격(그리드)은 기본세팅으로 정하며,
h1~h6 중 가장 우선순위는 h1이다.
문단 들여쓰기의 경우
.indent 클래스를 공통클래스로 정하며 속성은
.indent {padding-right:0 10px 0 0} 이다.
em태그의 경우 기본적으로 강조단위 이며 기울기가 기본으로 들어가나 이의 설정을 임의로 변경하여 em태그의 기울기는 normal 색상은 강조 붉은색으로 지정한다.
em {font-style:normal; color:#f00}
해당 주요 태그에는 별도의 클래스로 간격을 주는일은 가능한 없이 한다. (추후 유지보수)
p태그와 문단 태그의 기본 가격은 사이트 디자인에 의해 임의적으로 변경될수 있으며 이것은 언제까지나 주관적인 표준 가이드라인입니다.
h태그 세팅 방법
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
h1, h2, h3, h4, h5, h6 {margin:0; padding:0}
h2 {clear:both; font-size:20px; color:#123988; background:url(../image/all/h2icon.gif) no-repeat 0 .6em; padding:10px 0 10px 20px; margin:0; letter-spacing:-1px; font-family:ngb}
h3 {clear:both; font-size:18px; color:#123988; letter-spacing:-1px; background:url(../image/all/h3icon.gif) no-repeat .1em .7em;; padding:10px 0 10px 20px; margin:0 0 0 0; font-family:ngb}
h4 {clear:both; font-size:16px; color:#4470cb; background:url(../image/all/h4icon.gif) no-repeat .4em .6em; padding:5px 0 5px 20px; margin:0 0 0 0; font-family:ngb}
h5 {clear:both; font-size:12px; color:#000; background:url(../image/all/h5icon.gif) no-repeat .7em .9em; padding:5px 0 5px 20px; margin:0 0 0 0; font-family:ngb}
h6 {clear:both; font-size:12px; color:#000; background:url(../image/all/h6icon.gif) no-repeat .8em 1em; padding:5px 0 5px 20px; margin:0 0 0 0; font-family:ngb}
h2 {clear:both; font-size:20px; color:#123988; background:url(../image/all/h2icon.gif) no-repeat 0 .6em; padding:10px 0 10px 20px; margin:0; letter-spacing:-1px; font-family:ngb}
h3 {clear:both; font-size:18px; color:#123988; letter-spacing:-1px; background:url(../image/all/h3icon.gif) no-repeat .1em .7em;; padding:10px 0 10px 20px; margin:0 0 0 0; font-family:ngb}
h4 {clear:both; font-size:16px; color:#4470cb; background:url(../image/all/h4icon.gif) no-repeat .4em .6em; padding:5px 0 5px 20px; margin:0 0 0 0; font-family:ngb}
h5 {clear:both; font-size:12px; color:#000; background:url(../image/all/h5icon.gif) no-repeat .7em .9em; padding:5px 0 5px 20px; margin:0 0 0 0; font-family:ngb}
h6 {clear:both; font-size:12px; color:#000; background:url(../image/all/h6icon.gif) no-repeat .8em 1em; padding:5px 0 5px 20px; margin:0 0 0 0; font-family:ngb}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
p태그 기본세팅
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
p {padding:0; margin:10px 0 10px 0; color:#000}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ul과 ol의 기본세팅
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
/* 목록기본세팅 */
ul.ic {list-style: none; margin: 0; padding: .3em 0 .5em .8em; text-align: left}
ul.ic li {margin: 0; padding: 5px 0 5px 10px; background: url(../image/all/libg.gif) no-repeat 0 .8em; line-height:1.5em; color:#000}
ul.ic ul {list-style: none; margin: 3px 0 0 0; padding: 0 0 0 0}
ul.ic ul li {background: url(../image/all/lilibg.gif) no-repeat 0 .7em; margin:0; padding:0 0 0 7px; line-height:1.6em}
ul.ic li .li-title {font-weight:bold; color:#633}
/* 숫자목록기본세팅 */
ol {margin: 0 0 0 10px; padding: .5em 0; text-align:left}
ol.num li {list-style: none; padding: 0 0 0.5em 2em; background-repeat: no-repeat; background-position: 0 .2em; line-height:2em}
ol li.n01 {background-image: url(../image/all/olnum01.gif)}
ol li.n02 {background-image: url(../image/all/olnum02.gif)}
ol li.n03 {background-image: url(../image/all/olnum03.gif)}
ol li.n04 {background-image: url(../image/all/olnum04.gif)}
ol li.n05 {background-image: url(../image/all/olnum05.gif)}
ol li.n06 {background-image: url(../image/all/olnum06.gif)}
ol li.n07 {background-image: url(../image/all/olnum07.gif)}
ol li.n08 {background-image: url(../image/all/olnum08.gif)}
ol li.n09 {background-image: url(../image/all/olnum09.gif)}
-----------------------------------------------------------------------------------------------
3. 공통 규격
html4.01 기준
3-1. 상단네비게이션
<div id="nav"></div>로 통일
3-2. 좌측 서브 메뉴
<div id="leftm"></div>로 통일
4. 테이블을 쓰는기준
4-1. 테이블 첫머리
<table class="" summery="">
4-2. 헤드와 바디 풋의 구분
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
4-3 . scope 적용
<th scope="row"></th> <--세로연결
<th scope="col"></th> <--가로연결
4-4. 테이블 웹표준코딩의 예
------------------------------------------------------------------------------------------------
<table class="t3c" summary="구청별 현황">
<caption></caption>
<thead>
<tr>
<th scope="row"></th>
<th scope="row"></th>
<th scope="row"></th>
<th scope="row"></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<td colspan="4"></td>
</tfoot>
</table>
<caption></caption>
<thead>
<tr>
<th scope="row"></th>
<th scope="row"></th>
<th scope="row"></th>
<th scope="row"></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<td colspan="4"></td>
</tfoot>
</table>
------------------------------------------------------------------------------------------------
4-5. 테이블 네이밍 가이드
가. 일반 테이블
t1 t2 t3~ class로 테이블 유형 구분
나. 게시판 테이블
게시판의 종류
일반게시판
t_basic
일반게시판 글쓰기
t_basic-write
웹진 게시판
t_webzine
웹진 게시판 글쓰기
t_webzine_write
공통된 규격에 대한 약속들
**xhtml4.01 기준
#containor
des. #containor는 body아래의 최고 상위에서 태그들을 감싸는 고정태그입니다.
#head
des. #head는 상단 헤드 전체를 감싸는 고정태그입니다.
#head_inner
des. #head_inner는 사이트가 가운대 정렬일때 가운대 위치를 고정시키기 위해서 추가하는 태그입니다.
#warp
des. #wrap은 본문 내용을 감싸는 태그입니다.
#wrap_inner
des. #wrap_inner는 본문이 배경과 컨텐츠로 구분이 될때 안쪽 을 감싸는 태그입니다.
#bodyhead
des. #bodyhead는 바디 상단의 로케이션과 바디 타이틀을 감싸는 태그입니다.
#location
des. #location은 서브페이지 위치목록을 나타내기위한 태그입니다.
#content
des. #content는 본문 내용을 감싸는 태그 입니다.
#foot
des. #foot은 하단 푸터용 태그 입니다.
#foot_inner
#nav
#leftnav
#wing
**html5 기준(html5의 시멘틱 요소에 대한 규격)
header
des. header는 html5의 의미가 부여된 마크업중 하나로 상단을 통칭합니다.
<header>
.
.
</header>
헤더와 헤더 사이에는 div 태그나 article , section등 문서를 구분시키는 마크업이 무엇이든 들어갈수 있습니다.
nav
des. nav는 상단 네비게이션을 통칭하는 의미있는 마크업 입니다.
<nav>
.
.
</nav>
aside
des. aside는 좌측메뉴를 통칭하는 의미있는 마크업 입니다.
<aside>
.
.
</aside>
article, section
des. 문서를 더욱 구조적으로 분할하기 위해 사용되는 마크업 입니다.
footer
des. footer는 하단을 통칭하는 마크업입니다.
<footer>
.
.
</footer>
figure
des. figure는 사진등의 이미지에 붙이는 설명문구. 캡션을 표시하는 마크업입니다.
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>