22. 트리메뉴를 사용해 보자. (3) css. 우선 순위 문제 -php

22. 트리메뉴를 사용해 보자. (3) css. 우선 순위 문제 -php

 

-dtree.js

css를 다루기 전에 dtree.js파일을 약간 손보기로 한다.

43줄 부터 나오는 icon이미지가 들어있는 경로를 자신에 맞게 경로를 수정해야 한다.

 

dtree.js

:

this.icon = {

root : 'img/base.gif',

folder : 'img/folder.gif',

folderOpen : 'img/folderopen.gif',

node : 'img/page.gif',

empty : 'img/empty.gif',

line : 'img/line.gif',

join : 'img/join.gif',

joinBottom : 'img/joinbottom.gif',

plus : 'img/plus.gif',

plusBottom : 'img/plusbottom.gif',

minus : 'img/minus.gif',

minusBottom : 'img/minusbottom.gif',

nlPlus : 'img/nolines_plus.gif',

nlMinus : 'img/nolines_minus.gif'

};

:

 

이 dtree.js는 example01.html과 같이 트리메뉴를 적용시키려는 파일에서 호출하게 된다.

dtree.js역시 icon 이미지의 경로를 담고 있다. 앞에서 말했듯이 dtree.js가 들어있는 경로에 따라 문제가 생길 수도 있다.

사용해본 결과 절대 경로를 지정하려면 dtree는 root 바로 아래의 경로부터 지정하면 문제가 없었다.

즉, 위와 같이 지정했다면 root 바로 아래에 image/가 있고 이미지 화일을 담고 있다는 말이다.

 

-dtree.css

dtree를 내 코드에 추가하기 전에 이미 사용하고 있는 css파일이 있는데 dtree를 추가하면서 기존의 css파일과 추가된 dtree.css가 우선 순위 문제에 부딪혔다.

 

기존의 css파일 중

div {

margin: 0 0 10px;

padding: 10px 0;

color: #2d2c2d;

font-family: Tahoma;

font-size: 14px;

font-weight: bold;

}

 

<div>를 꾸미는 윗부분과 트리메뉴를 집어넣은 <div class='dtree'>부분이다.

.dtree {

margin: 0;

padding: 0;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: 11px;

color: #666;

white-space: nowrap;

}

가장 큰 문제는 마진과 패딩 부분이다.

클래스가 태그보다 우선한다고 해서 별 문제가 없을 줄 알았는데 결과를 보니 위와 같이 간격이 벌어진다.

'.dtree' 안의 마진, 패딩에 다시 값을 설정해도 소용이 없었다.

알고보니 jquery가 <div class="dtree">태그 안에 또 다른 div태그를 생성시키기 때문에 효과가 없었다.

'.dtree'를 '.dtree div'로 수정하자. <div class="dtree">하위에 있는 div태그 모두 영향을 받게 되어 원하는 출력을 얻을 수 있다.

 

.dtree div {

margin: 0;

padding: 0;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: 11px;

color: #666;

white-space: nowrap;

}