css 초보자의 질문입니다.

css 초보자의 질문입니다. > 토크

토크

개발과 관련된 어떤 얘기도 괜찮습니다.

css 초보자의 질문입니다. 정보

디자이너 css 초보자의 질문입니다.

본문

그누4 질답게시판하고는 성격이 틀린것같아 이곳에 질문을 올립니다.

문제가 된다면 이동 또는 자삭하도록 하겠습니다.

최근에 css의 필요성을 느껴서 공부를 좀 해보려고 하는데요

아래와 같이 간단하게 좀 꾸며서 마우스오버시 색깔도 좀 변하게 하고 싶은데

이 간단한것도 의문점이 두가지가 생겨서 문의 드립니다.

1. ul 부분 "서울시" 이 칸에 속성을 height=30 으로 줘도 마우스를 올리면 딱 글자부분만큼의 높이만

빨간색이 물듭니다. 어떻게 바꿔줘야 하나요?

2. 크롬에선 소스가 잘됩니다. 하지만 익스8에선 마우스오버효과라던지 구조모양이 조금 바뀝니다.

이건 어디서부터 시작해야하는건지요?

-------------------------------------------------

<html>

<head>

<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>

<li class="box"><a href=#>개인및단체</a></li>

</div>

<li class="box"><a href=#>개인및단체</a></li>

</div>

<li class="box"><a href=#>개인및단체</a></li>

</div>

<li class="box"><a href=#>개인및단체</a></li>

</div>

</body>

</html>

댓글 11개

지운아빠 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

13.11.04 14:24:38

html 문법이 잘못 되었습니다.

<div class="irum">
<ul class="menu">
<li>시</li>
<li class="box"><a href="#">구</a></li>
</ul>
</div>

위와 같은 식으로 마크업 하셔야 합니다. ul > li > 내용 이 맞습니다. ul > 내용, li 는 잘못된 것입니다.

.box 에는 display:block 혹은 display:inline-block 을 적용해보세요.

류크자케 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

13.11.04 14:32:11

아하..감사합니다. 아직 기본이 안되어서 놓쳤네요^^;

글록26 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

13.11.04 23:04:15

ㅎㅎㅎㅎ 굿이네요

HackYa 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

13.11.05 04:45:54

이걸

<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>

지운아빠님이 틀렸다는 얘기가 아니고, 저같으면 이렇게 하겠다구요.

지운아빠 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

13.11.05 09:03:43

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 {}

HackYa 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

13.11.05 09:20:35

아... 오류인가요? ㅎㅎㅎㅎ

W3 validation 별로 신경을 안쓰는지라....

///////////////////////////////////

아... 그게 아니고 제가 잘못 적었네요.

li 로 a 를 감싸려고 한건데 잘못 적었습니다.

이렇게요.

<div class="irum">
<ul>
<li><a class ="box" href="#">구</a></li>
</ul>
</div>

그러니까 li 에 적용된 class "box" 를 a 로 옮기고 li 하나를 없앤....