월별 글 보관함: 2012 5월

TECH&TIP

naming

댓글 달기

네이밍

오랜만에 포스팅이네요

다름이 아닌 이번포스팅은 네이밍에 관해서 입니다. 대부분 class명이나 ID명을 지을 때 아래의 방법을 많이 사용합니다.

예시(1)

1
2
3
4
5
6
7
8

<div class="news">
     <h1 class="news_tit">뉴스</h1>
     <div class="news_con">내용</div>
</div>
<div class="notice">
     <h1 class="notice_tit">공지</h1>
     <div class="notice_con">내용</div>
</div>

예시(2)

1
2
3
4
5
6
7
8
9

<div class="news">
	<h1 class="newsTit">뉴스</h1>
	<div class="newsCon">내용</div>
</div>
 
<div class="notice">
	<h1 class="noticeTit">공지</h1>
	<div class="noticeCon">내용</div>
</div>

위의 방법으로 css를 제작하면

예시(1-1)

1
2
3
4
5
6
7

.news {}
.news .news_tit {}
.news .news_con {}
 
.notice {}
.notice .notice_tit {}
.notice .notice_con {}

예시(1-2)

1
2
3
4
5
6
7

.news {}
.news_tit {}
.news_con {}
 
.notice {}
.notice_tit {}
.notice_con {}

예시(2-1)

1
2
3
4
5
6
7

.news {}
.news .newsTit {}
.news .newsCon {}
 
.notice {}
.notice .noticeTit {}
.notice .noticeCon {}

예시(2-2)

1
2
3
4
5
6
7

.news {}
.newsTit {}
.newsCon {}
 
.notice {}
.noticeTit {}
.noticeCon {}

이런 형태를 띕니다.

위 상황에서 문제점

클래스명이 불필요하게 길어 질수 있고,
활용성이 떨어져서 매번 새로운 클래스명을 생각해야합니다.

위의 방법 같은 경우는 그나마 이름을 상속받아서 사용하는 경우이지만 그렇지 않은 경우는 더 네이밍 제작에 더 심각해지는것이죠

그럼 아래의 방법을 하나 제시 해보겠습니다.

1
2
3
4
5
6
7
8
9

<div class="news">
	<h1 class="tit"></h1>
	<div class="con"></div>
</div>
 
<div class="notice">
	<h1 class="tit"></h1>
	<div class="con"></div>
</div>

보시다 시피 동일 한 클래스명을 사용하고 있습니다. 이러면 나중에 무엇이 무엇인지 알수 없다 라는 분들고 계실 수 있습니다.
하지만 css를 활용하면 충분히 관리가 된다는것이죠

1
2
3
4
5
6
7

.news {}
.news .tit {}
.news .con {}
 
.notice {}
.notice .tit {}
.notice .con {}

위처럼 css를 관리 하고 제작한다면 가독성도 뛰어날 뿐더러 어디에 무엇이 사용되었는지 한번에 알수 있는 장점을 가집니다.
물론 css나 class명도 줄어 들어서 최적화도 약간(?)된다는거죠

템플릿

1
2
3
4

.유니크_네임
.유니크_네임 .tit
.유니크_네임 .con
.유니크_네임 .more

다음은 섹션에 관한 네이밍입니다. 이부분은 스스로의 규칙을 정하시는게 좋습니다.

대 wrap “이름_container”
예) header_container
소 wrap “이름_content”
예) left_content, main_content
소규모 wrap “이름_wrap” 예) notice_wrap
디자인필요에 의한 내부 wrap “이름_inner”
예) header_inner, notice_inner
필요에 따라서 + 숫자
예) header_inner01, header_bg01
wrap 내의 단순 좌우 정렬 .rtl { float: left; }
.ltr { float: right;}

그럼 전체 적으로 퍼블리싱된 결과물을 한번 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 
<style>
/* 레이아웃 */
#header_container {}
#header_container .header_inner {}
 
#body_container {}
#body_container .body_inner {}
#body_container .left_content {}
#body_container .main_content {}
 
#footer_container {}
 
/* 메인 컨텐츠 */
/* 공지 사항 */
.notice_wrap {}
.notice_wrap .tit {}
.notice_wrap .con {}
.notice_wrap .more {}
 
/* 뉴스 */
.news_wrap {}
.news_wrap .tit {}
.news_wrap .con {}
.news_wrap .more {}
 
/* 갤러리 */
.gallery_wrap {}
.gallery_wrap .tit {}
.gallery_wrap .con {}
.gallery_wrap .more {}
</style>
 
 
 </head>
 
 <body>
<!-- s: header -->
<div id="header_container">
  <div class="header_inner">
   <h1 class="logo">네이밍 예제</h1>
   <ul class="gnb">
    <li>메뉴</li>
   </ul>
  </div>
</div>
<!-- e: header -->
 
<!-- s: body -->
<div id="body_container">
 <div class="body_inner">
   <div class="left_content"> lnb 및 배너</div>
   <div class="main_content">
 
 
   <!-- s: notice -->
   <div class="notice_wrap">
    <h2 class="tit">공지사항</h2>
    <ul class="con">
     <li><a href="#">어쩌구 저쩌구</a></li>
    </ul>
    <a href="#" class="more">공지 더보기</a>
   </div>
   <!-- e: notice -->
 
   <!-- s: news -->
   <div class="news_wrap">
    <h2 class="tit">뉴스</h2>
    <ul class="con">
     <li><a href="#">어쩌구 저쩌구</a></li>
    </ul>
    <a href="#" class="more">뉴스 더보기</a>
   </div>
   <!-- e: news -->
 
   <!-- s: gallery -->
   <div class="gallery_wrap">
    <h2 class="tit">갤러리</h2>
    <ul class="con">
     <li><a href="#">사진</a></li>
    </ul>
    <a href="#" class="more">갤러리 더보기</a>
   </div>
   <!-- e: gallery -->
  </div>
 </div>
</div>
<!-- e: body -->
 
 
<!-- s: footer -->
<div id="footer_container"></div>
<!-- e: footer -->
 </body>
</html>

* 네이밍이 중요한 이유는 코드의 재활성, 가독성이 좋아 지고 유지보수가 좀더 편해지는데에 있습니다.

좀더 복잡한 케이스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="section_wrap"> 
  <div class="section_inner"> <!-- 디자인요소를 위한 DIV inner혹은 숫자 혹은 bg명시 -->
   <!-- tit은 필요에 따라 사용 예)텝이나 여러개 추가 될경우 숫자등 이용 -->
   <hn>내용</hn>   
   <!-- 주 설명 --> 
   <p class="m_txt">아래의 내용은 예제 입니다.</p>  
   <!-- 컨텐츠 왼쪽 정렬 동일한 컨텐츠의 영역 나누기일경우 단순 의미만 부과된 class명사용 -->
   <div class="rtl"> 
        <p class="txt01">내용1</p>
   </div> 
   <!-- 컨텐츠 우측 정렬 -->
   <div class="ltr">
     <!-- 클래스 네임이 변경되는 이유는 동일한 센션의 내용이고 단분 좌우 배치일뿐 -->
     <p class="txt02">내용2</p> 
   </div>
  </div>
</div>
<style>
.section_wrap {}
.section_wrap hn {}
.section_wrap .m_txt  {}
.section_wrap .rtl  {디자인요소}
.section_wrap .ltr  {디자인요소}
.section_wrap .txt01 {}
.section_wrap .txt02 {}
</style>

위의 예제 처럼 컨텐츠의 의미와 구조를 파악하고 class명을 명시하면 더욱 더 활용 성이 높아 집니다. 네이밍은 안된다 된다가 없습니다 활용하기 나름 일뿐