css 초보자의 질문입니다.

디자이너톡

류크자케

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 12년 전 · 조회 960 960 · 댓글 11 11

그누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개

지운아빠

프로필 보기 이 회원 글보기 이 회원의 댓글보기

12년 전

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 을 적용해보세요.

류크자케

프로필 보기 이 회원 글보기 이 회원의 댓글보기

12년 전

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

글록26

프로필 보기 이 회원 글보기 이 회원의 댓글보기

12년 전

ㅎㅎㅎㅎ 굿이네요

HackYa

프로필 보기 이 회원 글보기 이 회원의 댓글보기

12년 전

이걸

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

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

지운아빠

프로필 보기 이 회원 글보기 이 회원의 댓글보기

12년 전

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

프로필 보기 이 회원 글보기 이 회원의 댓글보기

12년 전

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

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

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

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

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

이렇게요.

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

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

HackYa

프로필 보기 이 회원 글보기 이 회원의 댓글보기

12년 전

그리고 css 처음 하실때 이런 거 (block 과 inline-block 의 차이 같은것들) 많이 헷갈리시거든요. 참조 하시라구요. 그림으로 보면 아주 쉽게 이해되십니다.

[http://farm3.staticflickr.com/2875/10676364125_6e08a42450_b.jpg]

떡배

프로필 보기 이 회원 글보기 이 회원의 댓글보기

12년 전

저도 유용한정보 알게됐네여..감사드립니다~~

iwebstory

프로필 보기 이 회원 글보기 이 회원의 댓글보기

12년 전

건전한 오고감으로 서로 배우고 좋죠...
적절한 책 한 권 구입하시고.. 웹에서도 자료를 모아서 정리하고 그러시다보면 어느새 머리 속에 박히게 됩니다.

yspstudio

프로필 보기 이 회원 글보기 이 회원의 댓글보기

12년 전

익플에서 레이아웃이 깨지면 메타코드 최적화 넣어보세요~

티즈코리아

프로필 보기 이 회원 글보기 이 회원의 댓글보기

12년 전

와우~~ 진짜 여기 싸이트는 친절한분들이 많아요~^^

게시판 목록

디자인

글쓰기

번호	제목	글쓴이	날짜	조회
1466	젊은디자이너분들 [5] #디자이너톡	임구 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1388
1465	폰트 구매를 한번 하면 계속 쓸수 있나요? [1] #디자이너톡	예리한맘 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1115
1464	여행사 시안작업입니다. (다른색상버전) #디자인시안	아름다운세상 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2795
1463	즐겨찾기조사 [10] #디자이너톡	디자인배틀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1012
1462	폰트구입은 어디서 하나요? [4] #디자이너톡	소수리꼬 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1378
1461	디자이너의 일과가 궁금합니다. [7] #디자이너톡	디자인배틀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1438
1460	내일은 없어 폰트 무엇인가요???[사진 첨부~] [6] #폰트문의	Terrorboy 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2081
1459	여행사 시안작업입니다 (다른색상버전) [7] #디자인시안 #디자인	아름다운세상 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5374
1458	코딩 때문에 우울해요 [8] #디자이너톡	더딘하루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1591
1457	티스토리 초대장 3장있어요~필요하신 분 드립니다. [13] #디자이너톡	달오벌 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	844
1456	웹표준 코딩 기준이 어느정도인가요?? [5] #디자이너톡	록펠러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1575
1455	이폰트 이름이 뭐에요? [2] #폰트문의	비둘기 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1334
1454	모바일코딩에 대해서 궁굼한점 [11] #디자이너톡	jessica8318 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3039
1453	디자인 참고용 사이트 입니다.. [3] #추천사이트	세븐데이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2440
1452	간만에 아이콘 올려봅니다.. 잘 사용하세요 [15] #디자인시안	세븐데이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	6435
1451	디자인 견적 기준 궁금합니다. [10] #디자이너톡	여름나무 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2052
1450	디자이너분들, 자신의 일에 자신감을 가지십시오. [13] #디자이너톡	T2H1 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1446
1449	페이스북 코멘트를 웹사이트로 불러올때 [8] #디자이너톡	HackYa 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1665
1448	심플 캘린더 만들어봤습니다~ [7] #디자인시안	달오벌 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3362
1447	이글 좀 봐주세요. [8] #디자이너톡	HackYa 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1834
1446	템플릿 좀 봐주세요. [14] #디자이너톡	호빠앙 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1283
1445	css 초보자의 질문입니다. [11] 현재 보는 글 #디자이너톡	류크자케 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	961
1444	html 5 테스트 사이트 #추천사이트	글록26 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1621
1443	디자이너 VS 프로그래머 [15] #디자이너톡	글록26 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1658
1442	프리랜서, 디자인, 그리고 현실 : 여러분은 제값을 받고 있습니까? [12] #디자이너톡	HackYa 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2161
1441	디자인배틀입니다. 조언 부탁 드립니다. [12] #디자이너톡	덩어리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1294
1440	넥슨풋볼고딕체 오랜만에 마음에 드는 한글폰트 발견! [8] #디자이너톡	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3842
1439	프리랜서 7년차... [10] #디자이너톡	초심의설렘 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1511
1438	여행사 시안작업입니다. [8] #디자인시안 #디자인	아름다운세상 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3683
1437	사이트 디자인 및 구성에 대해서 조언 부탁드립니다 ㅠㅠ [7] #디자이너톡	타구 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	987
1436	광고디자인 제작, 순서가 원래 이런가요? [14] #디자이너톡	대그릇 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1839
1435	[하소연] 참 진짜 이런 클라이언트 어떻게 생각해야하나요. [17] #디자이너톡	훈이즈히어 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1450
1434	일본식 리폼회사 [2] #디자인시안	제로나라 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3545
1433	굵은 폰트가 필요할 때 있지요? [2] #폰트문의	박달나무 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2967
1432	죄송하지만 혹시 사이트 디자인 평가 가능할까요?? [15] #디자이너톡	날품팔이소녀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1742
1431	혹시 파일질라 쓰시는분 .. [3] #디자이너톡	뽀뺑이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1997
1430	웹디가 하는 코딩은 어디까지인가요? [12] #디자이너톡	쿠크다스심장 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2305
1429	[고객의마음 사로잡기]시즌 로고를 활용하라. [3] #디자이너톡	모노폴리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1187
1428	디자이너분들 힘내세요~ [7] #디자이너톡	표도르으 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1280
1427	유니코드 중국어/일본어 다운로드 홈페이지 #폰트문의	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1949
1426	로그인 박스 [1] #디자인시안	세븐데이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3252
1425	심플 아이콘 #1 [5] #디자인시안	세븐데이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3483
1424	라디오버튼으로 원하는값 검색하게 만드는거 어렵나요;;? [4] #디자이너톡	도룡이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1472
1423	장애인접근법 소스 구해여 [4] #디자이너톡	북금곰 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1398
1422	Dreamwaver CC 에서는 ASP/ASP.net/JSP 개발을 할 수 없다? [8] #디자이너톡	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2970
1421	Flash CC (Creative Cloud)는 하위버전으로 저장을 지원하지 않습니다. [3] #디자이너톡	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4281
1420	플래쉬 cs3 프로젝트 메뉴 [1] #디자이너톡	이코아리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1022
1419	디자이너 프로그래머 [1] #디자이너톡	북금곰 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1170
1418	혹시 여기에사용한 깔끔한폰트명아시는분?? [4] #디자이너톡	별을따는소년 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1638
1417	확실히 그누보드SIR 이 제로보드 공홈보다 훨씬 사람들이 좋은거같습니다. [1] #디자이너톡	영화광팬 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1112
1416	배추빌더 아시는분 ㅠ? 헬프미 ㅠ [3] #디자이너톡	도룡이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1177
1415	비비스킨시안입니다 [43] #디자인시안	력셜일 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5296
1414	심플한 아이콘 모음들 [23] #디자인시안	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	10689
1413	이 폰트 상업 무료인가요?(Brie) [3] #폰트문의	크림힐트 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2009
1412	플래시 네비게이션 때문에.. 27시간째 못자고 있어요... ㅠㅠ [7] #디자이너톡	개초보제이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1732
1411	이맛에 디자이너 합니다! [15] #디자이너톡	도룡이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2305
1410	요즘 투잡뛰는데 스트레스때문에 자주 욱하네요 [4] #디자이너톡	훈이즈히어 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1790
1409	디자이너 분들께 질문드립니다. [1] #디자이너톡	영국신사1 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	972
1408	디자이너분들께 질문있습니다. [3] #디자이너톡	덩어리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1130
1407	요즘경기어떤가요? [5] #디자이너톡	마루Design 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1911
1406	프리랜서님들~ CI 작업해주면 보통 얼마정도 받나요?? [6] #디자이너톡	도룡이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3146
1405	요즘 디자인은 이쁜디자인보다 사용하기 좋은 디자인이 주가 되고 있어서 좋네요 ㅎㅎ [3] #디자이너톡	훈이즈히어 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1477
1404	채팅사이트 시안 [1] #디자인시안	세븐데이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3508
1403	똑같이 쓰지 마세요 ^^~~ #디자인시안	세븐데이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3577
1402	유용한 레이아웃 올립니다. [4] #디자인시안	세븐데이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3852
1401	상단메뉴 소스만들기는 어디서 ... [1] #디자이너톡	북금곰 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1546
1400	클라가 디자인 수정을 많이 요청하는데 해주는 것이 옳은것 일까요? [6] #디자이너톡	신현종실장 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1361
1399	이 3D 이미지는 어떤프로그램으로 만들었나요? [9] #디자이너톡	해피코딩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2211
1398	급질문좀여!!! [5] #디자이너톡	maniAc 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	894
1397	Light and Dark Free PSD Web Menu [4] #디자인시안	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3619
1396	디자이너 분들만 보시면 되는 글이라서... [1] #디자이너톡	cshop2 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1338
1395	이런 메뉴소스 구할 수 있을까요? [3] #디자이너톡	웹라이프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1897
1394	시안공유합니다. [3] #디자인시안	또다른세상 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3322
1393	자동차 반응형 메인시안입니다. [118] #디자인시안	또다른세상 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	7371
1392	커뮤니티형 공유합니다. [1] #디자인시안	또다른세상 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3795
1391	선박조선 사이트 공유합니다. [3] #디자인시안	또다른세상 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5043
1390	쇼핑몰시안 공유합니다. [2] #디자인시안	또다른세상 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3390
1389	메인시안공유합니다. [2] #디자인시안	또다른세상 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4471
1388	공유합니다. [1] #디자인시안	또다른세상 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2834
1387	웹디자이너의 시간소비 분석 그래프 [10] #디자이너톡	cshop2 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2682
1386	디자이너를 위한 멘토링, 디멘토에 초대합니다! #추천사이트	hapd 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1816
1385	6/18, 디자이너들의 소소한 오프모임에 초대해요~ #디자이너톡	hapd 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1112
1384	소셜서브페이지 [2] #디자인시안	달콤커피☆ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3072
1383	소셜서브페이지 [1] #디자인시안	달콤커피☆ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1633
1382	소셜서브페이지 [1] #디자인시안	달콤커피☆ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1394
1381	소셜서브페이지 [1] #디자인시안	달콤커피☆ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1510
1380	소셜서브페이지 [1] #디자인시안	달콤커피☆ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1913
1379	소셜서브페이지 [1] #디자인시안	달콤커피☆ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2544
1378	포스터시안 [1] #디자인시안	달콤커피☆ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1799
1377	3번째 [71] #디자인시안	JBstyle 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4163
1376	2번째~~ [69] #디자인시안	JBstyle 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4080
1375	오랫만에 다시올립니다~~ [30] #디자인시안	JBstyle 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2604
1374	컴퓨터 추천 부탁드려도 될까요? [6] #디자이너톡	구름™ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1275
1373	웹디자이너분들께 질문좀요! [15] #디자이너톡	좋은사람우유 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1924
1372	이렇게 만드는 동영상은 얼마정도 드나요 [2] #디자이너톡	북금곰 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1131
1371	디자이너는 프로그래밍 분야에 대해 어디까지 알아야하나요? [9] #디자이너톡	ㅁㄴㅇㄹㄹㄹ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1487
1370	일반 회사홈페이지 [4] #디자인시안	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3899
1369	캠프포탈 사이트 메인 [20] #디자인시안	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2641
1368	캠프소개 디자인폼 [2] #디자인시안	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1682
1367	세로 3단 메뉴좀 구할 수 있을까요? [4] #디자이너톡	여행아 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1472