DIV 남발을 하지말자
TABLE 마인드에서 갓 DIV 마인드로 넘어오기 시작한 디자이너분들께서 실수하시는 부분 중 하나가, 바로 DIV를 남발하는 것입니다. DIV는 만병통치약이 아닙니다.
테이블의 단점 중 하나가 <td>에 재차 <table>이 들어가기 때문에, 겹테이블이 많아져서 페이지 로딩이 느려진다는 것 입니다. DIV도 예외는 아닙니다. DIV의 숫자가 늘어나면 자연적으로 페이지 로드가 느려집니다. 굳이 DIV를 쓰지 않아도 되는 곳에서 DIV 사용을 남발하는 것은 좋지 않은 습관입니다. 예를들어 보겠습니다.
<h2>올블릿 생성마법사</h2>
</div>
<div class="menuWrap">
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
</ul>
</div>
이 소스에서 필요없는 부분은 어디일까요?
네,
바로 이 소스에 있는 모든 DIV 입니다.
굳이 ul을 div로 감싸지 않더라도, 굳이 H2 제목 태그를 div로 감싸지 않더라도, CSS 컨트롤로 얼마든지 예제와 같은 디스플레이를 할 수 있습니다.
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
</ul>
이렇게 조금더 소스가 가벼워질 수 있다는 말씁니다.
실제소스에서 수 없이 많은 div 가 쓸데없이 사용되고 있습니다.
이를 줄인다면 페이지가 로드되는데 걸리는 시간도 많이 줄어들겠지요 :D
더불어 DIV가 많아짐으로서 발생하는 다양한 버그발생의 가능성도 줄어들겠지요 :)
ID보다는 CLASS를 사용하고, CLASS역시 남발 하지말자
우선 CSS코딩시, id 사용은 자제하고 class 위주로 사용합니다. id는 한 번만 사용이 되므로, 재사용하기가 까다롭습니다. 더불어, 프로그램에서 페이지 컨트롤을 할 때 id 값을 이용하므로, 프로그램 수정을 가할 때, css도 고쳐야하는 번거로움이 있습니다. id는 지양하고 class를 사용하시길 권장합니다. CSS도 상위 엘리먼트에서 지정한 속성을 상속받을 수 있습니다. 상속은 CSS의 막강한 기능 중 하나입니다. 이 상속을 잘 활용해야, 향후 웹사이트 디자인을 관리할 때도 현저하게 시간을 줄여줄 수 있습니다. 상속을 활용하지 못하면, 오히려 웹표준이 아닌 홈페이지보다도 관리가 복잡하고 어려워 질 수 있습니다.
class를 남발한 소스의 경우
<div class="wrap">
<ul class="menuWrap">
<li class="li">메뉴 1</li>
<li class="li">메뉴 2</li>
<li class="li">메뉴 3</li>
</ul>
<div class="loginBox">
<img src="./img/thum.gif" width="80" height="80" class="thumImg" />
<table class="loginTable">
<tr>
<td>아이디</td>
<td><input type="text" class="inputText" /></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" class="inputText" /></td>
</tr>
</table>
</div>
</div>
CSS
.wrap { }
.wrap .menuWrap { }
.wrap .menuWrap .li { }
.wrap .loginBox { }
.wrap .loginBox .thumImg { }
.wrap .loginBox .loginTable { }
.wrap .loginBox .inputText { }
불필요한 class를 줄인 경우
<div class="wrap">
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
</ul>
<div>
<img src="./img/thum.gif" width="80" height="80" />
<table>
<tr>
<td>아이디</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" /></td>
</tr>
</table>
</div>
</div>
CSS
.wrap { }
.wrap ul { }
.wrap ul li { }
.wrap div { }
.wrap div img { }
.wrap table { }
.wrap table input { }
class를 남발하지 않고도, 디테일한 부분까지 컨트롤 할 수 있다는 걸 알았습니다. 또한 class명이 풍족하게 남음으로서 작명에 어려움이 없습니다.(이름이 쉽게 고갈되지 않으므로~) 소스가 짧아서 큰 효과는 못 느끼시겠지만, 불필요한 코드를 줄이고, 재사용율을 높임으로서 1000라인의 소스가 500라인이 되고, 이는 페이지 로딩이나 트래픽등에 영향을 줄 수 있다는 걸 상기합시다. 물론 위의 소스중 text input 의 스타일이 글로벌에 설정되어 있거나 하는 실전에서의 특수상황은 있지만, 저런 방식으로 로그인 박스나, 페이징 박스를 제대로 class 하나로 묶어서 만들어 놓으면 다른 프로젝트로 떼서 사용하기도 간단합니다.
작명센스! 의미있는 CLASS명을 짓자
CSS를 이용해서 페이지 디자인을 하다보면 작명의 어려움의 벽에 부딪히게 됩니다. 왜냐하면 class 명은 좋은 이름이 있고 나쁜 이름이 있기 때문입니다.
- 나쁜이름의 예 1
변화가능성이 있는 이름은 짓지 않는 것이 좋습니다.
leftBox 의 경우 박스가, 레이아웃이 바뀌어 오른쪽으로 가야한다면, 박스는 오른쪽에 있는데 클래스 이름은 계속 leftBox로 가야하는 아이러니한 문제가 발생합니다. 이를 수정하는 것은 안해도 될 노동을 하게 되는 것이죠.
ul class=leftBox // 왼쪽에 있는 박스가 오른쪽으로 가야되면?
div class=firstButton // 첫번째 있는 버튼이 세번째로 가야되면?
- 나쁜 이름의 예2
자바스크립트 등 해당 페이지와 join 해서 작업할 언어의 기본 함수등과 겹치는 문자는 쓰지 않는 것이 좋습니다. class라면 관련없 적을 수 있지만, 컴퓨터는 어떤 문제를 발생시킬 지 모르는 기계이므로 일단은 안 쓰는 것을 추천합니다.
div class=time
div class=var
- 좋은 이름의 예
해당 페이지의 CSS 레이아웃이나 디자인 요소가 바뀌어도, 만고불변 할 이름들입니다. class 이름 만을 보고도 개발자는 해당 위치의 기능에 대해서 파악할 수 있습니다. 의미있는 class 명을 지어야 한다는 말씀~
div class=container
div class=loginBox
div class=category
출처 - http://monoeyes.com/367
