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
-
인생은한방 2007/10/16 09:53 댓글주소 수정/삭제 댓글쓰기
저도 이 주제로 글쓰고 있었는데... 너무 와닿네요!
그렇죠... div를 남발하는 코딩은 테이블 코딩과 다를바 없죠...
더구나 div남발 코딩에 길들여지게 되면 웹표준 코딩과는 영 멀어지니...
너무 잘 정리해 주셔서 감사합니다!
덕분에 저는 더 심층적으로 생각해야겠군요 ^^ -
qwer999 2007/10/16 12:56 댓글주소 수정/삭제 댓글쓰기
방대한 작업을 여러 사람이 co-work하게 되다보면 디자인을 모듈별로 나눠서 div로 감싸두는게 좀더 유연하게 각종 상황에 대처하기 좋은것도 같습니다.
예시 1 부분에서 제목옆에 edit 란 아이콘을 나중에 삽입해야하는 상황이 생기면 상당부분 css를 다시 수정해야 하겠지만, title box란 div가 있으면 좀더 편하게 상황 대처가 가능할거라 생각합니다.
쓸데 없이 div를 계속 쌓아두는거야 지양해야겠지만 디자인에 따라서 어느정도 모듈화는 해두는게 좋지 않나 싶어요.-
쏭군 2007/10/16
13:13 댓글주소 수정/삭제
앗! qwer999님 안녕하세요^_^)/
첫 번째 예제는 모듈화를 염두해두지 않은 예제 소스입니다.
보시는 바 가장 상단의 이미지대로만 출력할 때의 예를 말씀드린 것이구요, 그것을 모듈화 한다면 이를 감싸 줄 div 가 필요하게 되겠지요.
그래서 모듈화에 대해서는 본 문서 가장 하단에 언급하였습니다.
페이징, 로그인박스 등 자주 쓰는 모듈은 qwer999님 말씀대로,
큰 div로 묶어서 모듈화해서 떼쓰기 쉽게 만들면 됩니다^^
다만, 그 큰 div 안에 또 필요없는 여러번의 div를 감쌀경우 낭비되는 소스들에 대해서 언급해보았습니다^^
좋은 의견 감사합니다^^
-