테스트 사이트 - 개발 중인 베타 버전입니다

이 CSS 코드의 문제점을 좀 살펴봐 주셨으면 합니다. 채택완료

따라하기 10년 전 조회 4,636

</p><p><style tyle="text/css">
 #aside {float:left;margin:0 0 0 0;width:180px;font-size:12px;}
 #aside a {display:inline-block;padding:0 10px;height:28px;color:#000;letter-spacing:-0.1em;line-height:2.4em; font-size:12px;}
 #aside a:focus, #aside a:hover, #aside a:active {text-decoration:underline; font-size:12px; color:#FFF; background-color:#900;}
 #focus {text-decoration:underline; font-size:12px; color:#FFF; background-color:#900;}
</style></p><p><div id="aside">
    <div style="font-size:18px;font-weight:bold;margin-bottom:15px;width:180px">About</div>
    <a href="#">
    <div id="focus" style="width:180px;margin-bottom:10px;">About</div></a>
    <a href="#">
    <div style="width:180px;margin-bottom:10px;">Technology</div></a>    
    <a href="#">
    <div style="width:180px;margin-bottom:10px;">Products</div></a>    
    <a href="#">
    <div style="width:180px;margin-bottom:10px;">World of Asia</div></a>   
    <a href="#">
    <div style="width:180px">Contact us</div></a>                      
</div>​</p><p>

 

 

문제점은 focus 상태와 mouse over 상태가 다르다는 겁니다.

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
10년 전

저는 초보이긴 하지만,

 

링크 태그안에 div를 넣은 자체가 좀 이상해 보이고,,,

about에만 id="focus"를 넣은것도 이상해 보이고.....

그냥

<ul>

<li></li>

</ul>

태그를 사용하시면 편할것 같은데요.....

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

P
PWneo
10년 전
html4.01에서는 a는 인라인 개체만 감쌀 수 있으나, html5에서는 블록 개체나 심지어 섹션 전체를 감쌀 수도 있습니다.

댓글을 작성하려면 로그인이 필요합니다.

L
10년 전

ul>li>a

의 구조로 가져가시고

 

a 태그에 display:block 처리하셔서 가로세로 값을 지정하신후에

a 태그에 마우스가 hover 되었을때와 default 상황을 제어하시면 원하시는 결과물이 나올겁니다. 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

R
10년 전

헐... css가 너무 조잡해요.. 나중에 수정하실 ㄸ ㅐ어떻게 하시려고.......... 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

P
10년 전

About은 div#focus이고 마우스오버는 a:hover 입니다. 패딩 등등 값이 다르니 크기가 다르게 나오는군요 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인