css 초보자의 질문입니다.

디자이너톡

류크자케

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

· 12년 전 · 조회 956 956 · 댓글 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년 전

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

게시판 목록

디자인

글쓰기

번호	제목	글쓴이	날짜	조회
266	적응이 안돼요ㅠㅠ [4] #디자이너톡	섀도우 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	728
265	제가 가끔활동하는 디자이너/프로그래머 카페 [3] #디자이너톡	terrorboys 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	929
264	나눔 고딕 [3] #폰트문의	lavenderblush 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1575
263	이 폰트가 나눔고딕 일까요? [2] #폰트문의	심심혀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1598
262	익스를 제외한 다른 브라우저에서 플래시가 안 불러지네요 [6] #디자이너톡	windday 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	821
261	여러분도 w3c 웹표준을 사용하시나요? [16] #디자이너톡	꽃보다재연 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1092
260	넋두리! [8] #디자이너톡	꽃보다재연 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	833
259	한달에 4개뽑는 디자이너가 흔하나요? [16] #디자이너톡	미앙 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1269
258	소규모 통합검색이 있는 커뮤니티 메인 (최상단) [4] #디자인시안 #기타	내컴퓨터 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	4475
257	작업하다가 예전에 듣던 말이 생각나네요.. [19] #디자이너톡	끙디자이너 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1078
256	프리랜서로 첫날 입니다. 조언좀 부탁드립니다. [5] #디자이너톡	남희킹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	996
255	NHN 회사 홈페이지 리뉴얼 관련해서.. [16] #디자이너톡	날가져봐 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1368
254	웹디자이너분들~ [5] #디자이너톡	목캔디 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	913
253	여긴 디자이너분들이 얼마 안되시나요? [12] #디자이너톡	rims 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	884
252	홈피 주메뉴PSD파일 [9] #디자인시안	행복의길 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3134
251	KBS뉴스티커가... [2] #디자이너톡	뽀뺑이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	960
250	CS5를 살려고하는데... [7] #디자이너톡	섀도우 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	923
249	웹디자이너 구합니다 [3] #디자이너톡	아크로 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	907
248	플래쉬 상단메뉴는 어디서 구하나요? [8] #디자이너톡	오리7 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	963
247	손그림 스캔시.. [4] #디자이너톡	bluejewel 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1311
246	디자이너분께 문의 드려봅니다 [6] #디자이너톡	아크로 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	873
245	오랫만에 왔더니.. 디자이너방이 생겼네요 ㅎㅎ [2] #디자이너톡	bluejewel 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	655
244	이 폰트좀 알려주세요... #폰트문의	옥군 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1215
243	어플리케이션 UI 디자인 2 [3] #디자인시안 #기타	프리웹코리아 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3069
242	어플리케이션 UI 디자인 [3] #디자인시안 #기타	프리웹코리아 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3247
241	[PSD] 앱 스토어 아이콘 디자인 [1] #디자인시안 #기타	프리웹코리아 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3377
240	[PSD] 앱 아이콘 디자인2 [2] #디자인시안 #기타	프리웹코리아 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1808
239	[PSD] 앱 아이콘 디자인 [2] #디자인시안 #기타	프리웹코리아 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1956
238	자야되는데~ [1] #디자이너톡	rims 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	715
237	계약금 없는 후불 100%의 무서움... [20] #디자이너톡	곰이몽이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1337
236	저도 여기에 글남겨봅니다~ㅋ [7] #디자이너톡	레이돌이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	756
235	혹시 이 폰트체 아시는분~ [1] #폰트문의	요엘이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1437
234	손글씨(2종) 이거 아직 안받은 사람이 있을까? [11] #디자이너톡	50cc 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1312
233	부산쪽에 웹디자인+오픈마켓 구인 채용합니다. #디자이너톡	태블릿 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	831
232	이 폰트이름 아시는분~~~ㅠㅠㅠ [3] #폰트문의	cncafe 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1299
231	이러면 문제가 되는 건가요? [3] #디자이너톡	클다 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	884
230	폰트이름을 알기 원합니다. [3] #폰트문의	고월 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1588
229	MS CS6? [5] #디자이너톡	chanbiz 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	924
228	이것이 무슨체일까요?? #폰트문의	요엘이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1104
227	네이버의 나눔손글씨 배포 [4] #폰트문의	서동요 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1755
226	이 서체 이름 아시는 분 계신가요 #폰트문의	뽀뺑이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1161
225	웹에 jpg파일 업로드시... [2] #디자이너톡	바른소야 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	921
224	윤폰트 단속하는 법무법인 ?산이라는곳! [1] #폰트문의	카깡 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3867
223	SF영화에 나올법한 전투기를 디자인 중인데... [7] #디자이너톡	날가져봐 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	879
222	모바일 얘기가 나와서 말인데요... [6] #디자이너톡	뽀뺑이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	845
221	허머 ㅠㅠ 로고가... [8] #디자이너톡	타조 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1012
220	모바일 사이트 혹시 메인 디자인좀 있으신분 ㅎ^_^;; [1] #디자이너톡	Mentor 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	828
219	사자공격 동영상 [3] #디자이너톡	50cc 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	845
218	T800 [8] #디자이너톡	카깡 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	714
217	느낌체 구입가능한곳좀 ;; [2] #폰트문의	모노폴리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1970
216	일러스트 쓰시는 분... 파일 jpg로 변환좀 부탁 드리겠습니다. [2] #디자이너톡	도라애몽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	876
215	Daum 카페와 같은 메뉴의 스킨 #디자이너톡	tyoko 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	830
214	포토샵 인증때문에ㅠㅠ [13] #디자이너톡	하연님 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1703
213	펜톤컬러도 플러그인인가요? #디자이너톡	요엘이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	988
212	이게 무슨서체인가요~ [4] #디자이너톡	오리7 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	856
211	플래시 메뉴에 공유하신 파일들 왜 안보일까요? #디자이너톡	불카누스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	682
210	이틀동안 시안 3개 잡았습니다 -_-;; [10] #디자이너톡	끙디자이너 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1075
209	네이버 지식 쇼핑 같은 드롭다운 메뉴좀 알려 주실분 ^^ #디자이너톡	Mentor 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	768
208	오늘은 출석부 1등할줄 알았는데.. [3] #디자이너톡	날가져봐 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	693
207	무슨문제인지.. [2] #디자이너톡	Acazen 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	735
206	이렇게 구성했는데..엄청난 공백이.. [2] #디자이너톡	Acazen 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	815
205	입이 근질근질 하네요. [10] #디자이너톡	50cc 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	948
204	디자이너 중상급 정도의 급여는 어느정도로 책정하면 적절할까요? [3] #디자이너톡	수이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1165
203	어휴. 디자이너의 길은 어렵네요.ㅋㅋ [11] #디자이너톡	하연님 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	982
202	일러스트로 이런 효과 어떻게 만드나요? [4] #디자이너톡	요엘이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	2688
201	어플개발해주실분? [2] #디자이너톡	Acazen 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	839
200	이런이미지는 어디서 구하나요? [1] #디자이너톡	오리7 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	921
199	시안만들려니까 머리가 아프네여.... [7] #디자이너톡	오리7 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	932
198	저에게는 너무 벅찬 제작의뢰건은 정중히 사양하는게 맞겠지요?.. [8] #디자이너톡	날가져봐 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	982
197	psd파일인데 일러로 따야되거은요...혹시 낼오전중으로 제작가능하신분 계신가해요 [3] #디자이너톡	불꽃환국 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	921
196	영화사에서 쓰는 폰트 들 가지고 계신분 #폰트문의	티즈코리아 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1171
195	cs5 학생 및 교사에디션 [6] #디자이너톡	카깡 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	849
194	이 폰트체 이름이 뭐죠? #폰트문의	요엘이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1124
193	로고에디터!(다운URL추가) [9] #디자이너톡	Acazen 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1305
192	학교 축제 티켓좀 만들어주세요 ㅠㅠ [4] #디자이너톡	storm1 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	938
191	[PSD] MEEJI-STUDY 메인시안 (탈락) [5] #디자인시안 #기타	내컴퓨터 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	4584
190	full-screen 갤러리 이런 류 어디 없을까요 ㅎ? [1] #디자이너톡	Mentor 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1069
189	판매자의배려심 [7] #디자이너톡	카깡 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1048
188	[PSD]회원가입 페이지 디자인 시안 [4] #디자인시안 #회원가입	내컴퓨터 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	5222
187	로고디자인~ 재밌어요! [9] #디자이너톡	O2MAN 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1255
186	폰트구매..낱개구매가 나을지 패키지구매가 나을지..? [3] #폰트문의	네오애드컴 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1990
185	네이버 lnb 드랍다운 스타일의 메뉴바 어디 없을까요 ㅎ^^ [7] #디자이너톡	Mentor 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1371
184	레이아웃... 쉬운거 같으면서도 어렵다는........ [4] #디자이너톡	O2MAN 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1091
183	질문답변 게시판이 늘 부러웠다는.. [2] #디자이너톡	50cc 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	921
182	한줄 인기 최근 게시물! 디자인 소스 [PSD] [1] #디자인시안 #최근게시물	내컴퓨터 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	2674
181	일본에 거주하시는 디자이너분 계시나요? [3] #디자이너톡	dreamtonext 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1065
180	이 폰트좀 알려주세요 ㅜ,ㅡ [8] #디자이너톡	티에스토 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1164
179	그누보드를 개인서버에서 활용중 [6] #디자이너톡	초이스짱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1035
178	오잉? 디자이너 자유게시판! [1] #디자이너톡	이슬사모 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	864
177	자유게시판에.. [2] #디자이너톡	windday 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	792
176	디자이너 자유게시판이 생겼군요 ㅎㅎ [2] #디자이너톡	프리웹코리아 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1065
175	포토샵 CS4 와 CS5 에서 어떠한 새로운 기능이 추가되엇는지... [5] #디자이너톡	erevo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	1452
174	일반적으로 도메인 등록방법과 가격을 알고 싶은데요. [1] #디자이너톡	erevo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	874
173	제가 컴터랑 별로 안 친해서 [2] #디자이너톡	erevo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	795
172	유용한 폰트자료 있는 사이트 좀 아시는 분 [1] #디자이너톡	erevo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	883
171	브랜드관련해서 유용한 서적 좀 추천해주세요. [1] #디자이너톡	erevo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	791
170	[PSD] 모델나라 시안 서브 [1] #디자인시안 #기타	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3273
169	[PSD] 모델나라 시안 [1] #디자인시안 #기타	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	2329
168	[PSD] 하하몽 시안 - 아이콘 [1] #디자인시안 #기타	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	2571
167	[PSD] 하하몽 시안 [3] #디자인시안 #기타	지민이생각 프로필 보기 이 회원 글보기 이 회원의 댓글보기	15년 전	3487