묻고답하기
css파일 보기
2008.05.22 03:27
레이아웃 파일
<div id="topBox">
<div id="topInnerBox">
<div id="logoBox">
<!-- 로고 이미지 -->
<a href="#"><img src="./images/logo.png" alt="" class="iePngFix" /></a>
</div>
<div id="searchButtonBox">
<div id="searchBox">
<!-- 검색 폼 -->
<form action="" method="post">
<input type="text" name="search_keyword" class="searchKeyword" />
<input type="image" src="./images/button_search.gif" class="searchButton" />
</form>
</div>
<ul id="menuBox">
<!-- 상단 버튼 -->
<li class="menuItem itemOn">
<span class="menuLeftBG"></span>
<span class="menuText">
<a href="#">Test</a>
</span>
<span class="menuRightBG"></span>
</li>
<li class="menuItem itemOff" onmouseover="this.className='menuItem itemOn'" onmouseout="this.className='menuItem itemOff'">
<span class="menuLeftBG"></span>
<span class="menuText">
<a href="#">Test</a>
</span>
<span class="menuRightBG"></span>
</li>
</ul>
</div>
</div>
</div>
css 파일
#menuBox .menuItem .menuLeftBG {
width:5px;
height:33px;
float:left;
}
#menuBox .itemOn .menuLeftBG {
background:transparent url("../images/top_button_left_on.gif") no-repeat left top;
}
#menuBox .itemOff .menuLeftBG {
background:transparent url("../images/top_button_left.gif") no-repeat left top;
}
위와 같은 파일이 있는데요..
layout.html에서 #menuBox .menuItem .menuLeftBG 이런 코딩이 있는데..
정확히 무엇인지좀 알려 주세요..
id가 menuBox인 태그에 안에 class가 menuItem인 태그 안에 서만 class="menuItem" 을
사용할 수 있게끔 한겁니다.
이런 식으로 범위를 놓는 이유는 똑같은 이름의 class 나 ID의 중복으로 인한 증상을
해결하기 위함이라고 할 수 있지요.