태그 글 보관함: css

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명을 명시하면 더욱 더 활용 성이 높아 집니다. 네이밍은 안된다 된다가 없습니다 활용하기 나름 일뿐

HTML/CSS

Reset CSS

4 댓글

1. Reset CSS

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

/* reset CSS
---------------------------------------------------------------- */
	html, body {
		margin:0; padding:0; 
		font-family:Arial, "굴림", Gulim,"돋움", Dotum; 
		font-size: 12px; 
		color:#000; 
		height: 100%;
	}
	dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,tbody,tfoot,thead,th,td {
		margin:0; padding:0;
	}
	input,textarea,select,td,th {
		font-size: 12px;
	}
	table { 
		border-spacing: 0; border-collapse: collapse;
	}
	ol,ul ,li { 
		list-style: none; 
	}
	h1,h2,h3,h4,h5,h6 { 
		font-size: 100%; 
	}
	abbr,acronym { 
		border:0; 
	}
	hr,legend, caption{
		position:absolute;top:0;left:-3000px;
		visibility:hidden;overflow:hidden;
		line-height: 0.1%;
		font-size: 0.1%;
		width:0.1%;height:0.1%;
	}
	img, fieldset{border:0 none;}
	label{cursor:pointer;}
 
	a{color:#000;text-decoration:none;}
	a:link,a:visited{color:#686868;text-decoration:none;}
	a:hover{text-decoration:none;}
	a:active{text-decoration:none;}

 (본 리셋은 최소의 버전으로 제작한 것입니다. 본인에 맞게 추가 하셔서 사용하시기 바랍니다. 개성적인 reset보다는 여러명이 사용해도 문제 없는 리셋을 제작하셔야합니다.
마이그레이션이나 특수한 목적으로 페이지를 삽입하였을때  reset으로 인하여 깨지는 경우가 생기면 후임자가 더 힘들어질수 있으니깐요)

2) 제작 목적

브라우저별로 엔진이 다르기 때문에 페이지 랜더링도 다르게 표현이 된다. 다르게 표현되는 padding과 margin등을 초기화 시켜 크로스 브라우징을 쉽게 한다.

3) 제작시 주의 사항

1. 리셋이 필요 없는 요소는 리셋을 적용하지 마라

다음은 Eric Meyer’s CSS와 yahoo에서 제공되는 CSS이다 붉은색 부분을 참조하라

Eric Meyer’shtml, body, div, span, applet, object, iframe, table, caption, tbody,tfoot,thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin: 0; border: 0; }
기타등등 -_-;;

yahoo

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; }

위의 reset은 padding과 margin이 존재 하지 않은 녀석들은 리셋을 할필요 없는데 Eric Meyer’s의 같은경우에는 * {padding: 0; margin: 0; } 과 다를게 없고 오히려 * {margin: 0; paddnig:0;} 이 글자수가 적어서 용량면에서 더 좋을지 모른다.

2. 재 리셋을 하게 하지말라

th, dt, hn 태그의 디자인이 bold형태가 많을 경우 reset css를 제작 할 때 font-weight: normal; 의 선언을 피해야한다. 그 이유는 reset선언 보다 font-weight: bold; 의 선언이 더 많아 질수있기 때문이다.
hn 태그에 css를 설정할경우

수정전
h1 { width: 200px; height: 100px; background: url(‘aa.gif’) 0 0 no-repeat; padding: 20px 10px; font-weight: bold;}
h1.title01 { width: 100px; background: none; padding: 10px; font-weight: normal; }
h1.title02 { width: auto !important; height: auto !important; background: url(‘bb.gif’) 0 0 no-repeat; padding: 10px; font-weight: normal; }
수정후
.h1_title01 { width: 200px; height: 100px; background: url(‘aa.gif’) 0 0 no-repeat; padding: 20px 10px; font-weight: bold;}
.h1_title02 { width: 100px; height: 100px; padding: 10px; }
.h1_title03 { background: url(‘bb.gif’) 0 0 no-repeat; padding: 10px; }

input 태그에 css를 설정할경우

수정전
input {border: 1px solid #ddd; width: 100px; height: 20px; padding: 2px 5px 0; }
.input_radio, input_checkbox{ width: 13px; height: 13px; border: 0; padding: 0; }
수정후
.input_text {border: 1px solid #ddd; width: 100px; height: 20px; padding: 2px 5px 0; }
.input_radio, input_checkbox{width: 13px; height: 13px; }