그누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 {}
게시글 목록
| 번호 | 제목 |
|---|---|
| 5541 | |
| 7208 | |
| 5537 | |
| 6059 | |
| 5530 | |
| 5529 | |
| 5524 | |
| 5516 | |
| 5507 | |
| 11208 | |
| 6057 | |
| 5501 | |
| 5500 | |
| 5498 | |
| 6056 | |
| 6055 | |
| 6054 | |
| 5490 | |
| 5483 | |
| 5472 | |
| 5470 | |
| 6051 | |
| 5469 | |
| 11202 | |
| 11199 | |
| 11198 | |
| 11196 | |
| 5467 | |
| 5463 | |
| 11195 | |
| 7238 | |
| 5460 | |
| 7204 | |
| 7232 | |
| 5458 | |
| 5456 | |
| 11299 | |
| 6045 | |
| 5452 | |
| 5449 | |
| 11296 | |
| 11295 | |
| 7201 | |
| 7199 | |
| 5446 | |
| 5441 | |
| 6039 | |
| 6038 | |
| 5429 | |
| 5424 | |
| 7197 | |
| 5422 | |
| 6036 | |
| 7194 | |
| 5413 | |
| 5411 | |
| 5408 | |
| 5407 | |
| 7190 | |
| 6030 | |
| 5405 | |
| 5402 | |
| 5400 | |
| 7189 | |
| 5398 | |
| 7187 | |
| 6026 | |
| 6022 | |
| 5389 | |
| 5384 | |
| 5374 | |
| 7184 | |
| 5370 | |
| 5364 | |
| 5363 | |
| 5362 | |
| 11293 | |
| 6014 | |
| 7183 | |
| 7182 | |
| 7181 | |
| 5355 | |
| 5351 | |
| 5336 | |
| 11290 | |
| 11286 | |
| 5332 | |
| 5330 | |
| 5325 | |
| 5318 | |
| 7180 | |
| 5307 | |
| 5304 | |
| 11285 | |
| 5301 | |
| 5294 | |
| 11284 | |
| 5292 | |
| 7175 | |
| 5286 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기