a 태그에 width 주기

blueruin · Post by **blueruin** » 2007 11 23 05:38 29

a 태그에 css 를 사용하여 아래와 같이 정의했습니다.

a.category_name:link {width:30px;background-image:url('off.gif');}
a.category_name:hover {width:30px;background-image:url('on.gif');}

그런데 ie 에서는 width 값이 반영되는데 불여우에서는 안되네요.
검색해보니 a 태그가 width 값이 없이 inline 속성을 따르기때문에 display:block 을 잡아줘야 하는것같습니다.

그런데 block 을 잡아주면 제가 원했던 형태가 틀어져버리네요.
페이지는 다음과 같은 형태입니다.

Code: Select all

<div id='A'>
<a href="" class="category_name">사과</a>
<a href="" class="category_name">우유</a>
</div>

<div id='B'>
안녕하세요. 하단의 컨텐츠입니다.
</div>

<div id='C'>
마지막 컨텐츠에요
</div>

a.category_name:hover 에 display:blcok;float:left 를 주고
div id=B, C 모두 float=left 를 주면 파폭에선 제대로 나오는데 IE 에서 깨져나옵니다. 정반대상황으로요.

카테고리라면 li 를 사용해야 맞는거 같기도 하지만 hover 를 사용하려고 그냥 a 태그를 사용했습니다. 자바스크립트를 사용하지 않고 hover 를 구현할 수 있는지 모르겠네요.
혹시 구현할 수 있다면 위 질문에 대한 답변과 함께 힌트부탁드릴게요.

감사합니다.

peecky · Post by **peecky** » 2007 11 23 10:39 58

IE6을 포기한다면 CSS에서 일반 엘리먼트에 :hover를 주어서 hover를 구현할 수 있습니다. IE6에서는 지원하지 않고, IE7에서는 Standards Mode에서만 지원하는것 같습니다.(Standards Mode란 DOCTYPE을 선언한 것을 말합니다)

아직 IE6을 많이 쓰므로, 사용성을 해치지 않는 범위 내에서만 :hover를 사용하거나, 자바스크립트를 사용하는 방법 정도가 있겠네요.

IE에서 깨진다고 하셨는데 이 때 IE 버전을 명시해주시는게 좋습니다. IE6과 IE7은 CSS구현 정도의 차이가 큽니다.

말씀하신대로 코드를 작성해봤는데 IE6에서 float가 제대로 안되더군요. a:link와 a:visited의 해석 차이인 것 같은데, 아래처럼 고치니 IE6,7과 FF2에서 똑같이 나옵니다.(#C:hover 제외)

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="kr" lang="kr">
<head>
<title></title>

<style type="text/css">
a.category_name { width: 35px; float:left;}
a.category_name:link,
a.category_name:visited { background-color: green;}
a.category_name:hover { background-color: red;}
#B, #C { float: left; }
#C:hover { background-color: blue;}
</style>
</head>

<body>
<div id='A'> 
<a href="#" class="category_name">사과</a> 
<a href="#" class="category_name">우유</a> 
</div> 

<div id='B'> 
안녕하세요. 하단의 컨텐츠입니다. 
</div> 

<div id='C'> 
마지막 컨텐츠에요 
</div>
</body>
</html>

a.category_name의 폭은 임의로 조금 늘렸습니다. link와 hover의 공통 속성은 a.category_name으로 묶었고, 이미지가 없어서 배경이미지 대신 배경색을 줬습니다. float를 주면 width를 설정할 수 있으므로 display:block은 뺐습니다.
div#C에 :hover 준 것은 앞에서 말한 것의 예제로 넣어봤습니다.

Mozilla 한국 커뮤니티

a 태그에 width 주기

a 태그에 width 주기

방문한 링크의 css 적용 규칙의 차이

Who is online