그누4 질답게시판하고는 성격이 틀린것같아 이곳에 질문을 올립니다.
문제가 된다면 이동 또는 자삭하도록 하겠습니다.
최근에 css의 필요성을 느껴서 공부를 좀 해보려고 하는데요
아래와 같이 간단하게 좀 꾸며서 마우스오버시 색깔도 좀 변하게 하고 싶은데
이 간단한것도 의문점이 두가지가 생겨서 문의 드립니다.
1. ul 부분 "서울시" 이 칸에 속성을 height=30 으로 줘도 마우스를 올리면 딱 글자부분만큼의 높이만
빨간색이 물듭니다. 어떻게 바꿔줘야 하나요?
2. 크롬에선 소스가 잘됩니다. 하지만 익스8에선 마우스오버효과라던지 구조모양이 조금 바뀝니다.
이건 어디서부터 시작해야하는건지요?
-------------------------------------------------
<html>
<head>
<title></title>
<style>
.irum {font :bold 11px '돋움'; float:left; margin:0 0 0 2px;}
.irum a:hover {color: red;}
.menu {text-align:left;}
.menu:hover {background:red;}
.box {width:150px; height:30px; border: 2px solid black; padding:10px; line-height:300%; margin:0 0 2 0;}
.box:hover {background:#D0E3FE; border:2px solid #176BEA; }
</style>
</head>
<body>
<div class="irum">
<ul class="menu">서울시</ul>
<li class="box"><a href=#>영등포구</a></li>
<li class="box"><a href=#>문래동</a></li>
<li class="box"><a href=#>개인및단체</a></li>
<li class="box"><a href=#>이현옥</a></li>
</div>
<div class="irum">
<ul class="menu">서울시</ul>
<li class="box"><a href=#>영등포구</a></li>
<li class="box"><a href=#>문래동</a></li>
<li class="box"><a href=#>개인및단체</a></li>
<li class="box"><a href=#>이현옥</a></li>
</div>
<div class="irum">
<ul class="menu">서울시</ul>
<li class="box"><a href=#>영등포구</a></li>
<li class="box"><a href=#>문래동</a></li>
<li class="box"><a href=#>개인및단체</a></li>
<li class="box"><a href=#>이현옥</a></li>
</div>
<div class="irum">
<ul class="menu">서울시</ul>
<li class="box"><a href=#>영등포구</a></li>
<li class="box"><a href=#>문래동</a></li>
<li class="box"><a href=#>개인및단체</a></li>
<li class="box"><a href=#>이현옥</a></li>
</div>
</body>
</html>
댓글 11개
이걸
<div class="irum">
<ul class="menu">
<li>시</li>
<li class="box"><a href="#">구</a></li>
</ul>
</div>
이런식으로 바꾸시면 불필요한 li 하나가 없어지니까... 저 같으면 이렇게 더 간결하게 마크업을 할 것 같습니다.
<div class="irum">
<ul class="menu">
<li>시</li>
<a class="box"href="#" >구</a>
</ul>
</div>
지운아빠님이 틀렸다는 얘기가 아니고, 저같으면 이렇게 하겠다구요.
<div class="irum">
<ul class="menu">
<li>시</li>
<li class="box"><a href="#">구</a></li>
</ul>
</div>
이런식으로 바꾸시면 불필요한 li 하나가 없어지니까... 저 같으면 이렇게 더 간결하게 마크업을 할 것 같습니다.
<div class="irum">
<ul class="menu">
<li>시</li>
<a class="box"href="#" >구</a>
</ul>
</div>
지운아빠님이 틀렸다는 얘기가 아니고, 저같으면 이렇게 하겠다구요.
ul > a 는 문법 오류입니다. HackYa님이 예전에 하신 말처럼 한국의 디자이너들만 validation 을 신경쓰는 걸지 몰라도요. ;)
사실 제가 생각하는 더 좋은 코드는
<div class="irum">
<hn>시</hn>
<ul>
<li><a href="#">구</a></li>
</ul>
</div>
혹은
<div class="irum">
<strong>시</strong>
<ul>
<li><a href="#">구</a></li>
</ul>
</div>
정도라고 생각합니다.
CSS 잡기도 편하죠.
.irum strong {}
.irum ul {}
.irum li {}
.irum a {}
사실 제가 생각하는 더 좋은 코드는
<div class="irum">
<hn>시</hn>
<ul>
<li><a href="#">구</a></li>
</ul>
</div>
혹은
<div class="irum">
<strong>시</strong>
<ul>
<li><a href="#">구</a></li>
</ul>
</div>
정도라고 생각합니다.
CSS 잡기도 편하죠.
.irum strong {}
.irum ul {}
.irum li {}
.irum a {}
게시글 목록
| 번호 | 제목 |
|---|---|
| 10654 | |
| 10650 | |
| 4205 | |
| 10645 | |
| 4199 | |
| 11247 | |
| 4190 | |
| 7036 | |
| 4179 | |
| 7033 | |
| 4169 | |
| 10644 | |
| 4148 | |
| 4137 | |
| 4132 | |
| 4121 | |
| 4114 | |
| 4109 | |
| 4108 | |
| 10640 | |
| 10636 | |
| 10631 | |
| 10622 | |
| 10618 | |
| 4105 | |
| 4103 | |
| 10617 | |
| 10613 | |
| 10610 | |
| 4091 | |
| 4090 | |
| 4082 | |
| 10608 | |
| 10607 | |
| 4073 | |
| 4069 | |
| 4067 | |
| 10606 | |
| 10605 | |
| 10603 | |
| 10601 | |
| 10600 | |
| 4063 | |
| 4057 | |
| 4054 | |
| 4051 | |
| 10597 | |
| 4045 | |
| 11243 | |
| 4043 | |
| 4037 | |
| 4032 | |
| 4026 | |
| 4023 | |
| 4020 | |
| 11242 | |
| 4018 | |
| 10590 | |
| 10585 | |
| 10578 | |
| 10570 | |
| 10566 | |
| 10562 | |
| 4008 | |
| 10560 | |
| 3995 | |
| 11241 | |
| 10556 | |
| 10555 | |
| 10553 | |
| 10552 | |
| 7030 | |
| 10549 | |
| 10542 | |
| 10540 | |
| 10539 | |
| 10536 | |
| 10534 | |
| 10531 | |
| 10529 | |
| 10490 | |
| 10456 | |
| 10427 | |
| 3980 | |
| 3967 | |
| 11239 | |
| 11238 | |
| 11236 | |
| 7028 | |
| 10426 | |
| 10425 | |
| 7027 | |
| 10419 | |
| 10415 | |
| 10413 | |
| 7025 | |
| 5995 | |
| 7024 | |
| 3964 | |
| 3951 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기