그누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 {}
게시글 목록
| 번호 | 제목 |
|---|---|
| 4672 | |
| 4670 | |
| 11126 | |
| 4659 | |
| 4654 | |
| 4646 | |
| 7050 | |
| 11150 | |
| 4637 | |
| 4623 | |
| 4617 | |
| 7047 | |
| 4605 | |
| 11250 | |
| 11110 | |
| 4594 | |
| 4580 | |
| 4571 | |
| 11102 | |
| 4562 | |
| 4547 | |
| 4535 | |
| 11249 | |
| 4519 | |
| 4506 | |
| 4493 | |
| 4484 | |
| 4473 | |
| 11141 |
디자인
여행사 시안작업입니다.
8
|
| 4465 | |
| 4450 | |
| 4432 | |
| 11099 | |
| 7044 | |
| 4416 | |
| 4412 | |
| 4399 | |
| 4395 | |
| 4387 | |
| 7043 | |
| 11097 | |
| 11091 | |
| 4382 | |
| 4377 | |
| 4368 | |
| 4364 | |
| 4362 | |
| 4360 | |
| 4355 | |
| 4353 | |
| 4349 | |
| 11047 | |
| 11023 | |
| 7039 | |
| 4341 | |
| 4325 | |
| 4320 | |
| 4318 | |
| 4314 | |
| 4308 | |
| 4301 | |
| 4297 | |
| 11021 | |
| 11020 | |
| 11015 | |
| 4295 | |
| 4288 | |
| 4278 | |
| 4272 | |
| 11010 | |
| 4270 | |
| 4266 | |
| 11006 | |
| 10888 | |
| 10886 | |
| 10882 | |
| 10879 | |
| 10876 | |
| 10874 | |
| 4255 | |
| 11248 | |
| 4254 | |
| 10871 | |
| 10869 | |
| 10867 | |
| 10865 | |
| 10863 | |
| 10861 | |
| 10859 | |
| 10787 | |
| 10717 | |
| 10686 | |
| 4247 | |
| 4231 | |
| 4228 | |
| 4218 | |
| 10681 | |
| 10660 | |
| 10657 | |
| 4213 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기