그누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개
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 을 적용해보세요.
<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년 전
아하..감사합니다. 아직 기본이 안되어서 놓쳤네요^^;
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>
지운아빠님이 틀렸다는 얘기가 아니고, 저같으면 이렇게 하겠다구요.
<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 {}
사실 제가 생각하는 더 좋은 코드는
<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 하나를 없앤....
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]
[http://farm3.staticflickr.com/2875/10676364125_6e08a42450_b.jpg]
12년 전
저도 유용한정보 알게됐네여..감사드립니다~~
iwebstory
12년 전
건전한 오고감으로 서로 배우고 좋죠...
적절한 책 한 권 구입하시고.. 웹에서도 자료를 모아서 정리하고 그러시다보면 어느새 머리 속에 박히게 됩니다.
적절한 책 한 권 구입하시고.. 웹에서도 자료를 모아서 정리하고 그러시다보면 어느새 머리 속에 박히게 됩니다.
yspstudio
12년 전
익플에서 레이아웃이 깨지면 메타코드 최적화 넣어보세요~
티즈코리아
12년 전
와우~~ 진짜 여기 싸이트는 친절한분들이 많아요~^^
게시판 목록
디자인
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 1166 |
 엘남매아빠 |
13년 전 | 606 | |
| 1165 | 13년 전 | 893 | ||
| 1164 | 13년 전 | 1553 | ||
| 1163 | 13년 전 | 794 | ||
| 1162 |
멀티트리플
|
13년 전 | 732 | |
| 1161 | 13년 전 | 887 | ||
| 1160 | 13년 전 | 636 | ||
| 1159 |
 인디안나라 |
13년 전 | 801 | |
| 1158 |
john123
|
13년 전 | 661 | |
| 1157 | 13년 전 | 684 | ||
| 1156 | 13년 전 | 687 | ||
| 1155 | 13년 전 | 761 | ||
| 1154 |
엘남매아빠 |
13년 전 | 1315 | |
| 1153 |
 iwebstory |
13년 전 | 885 | |
| 1152 | 13년 전 | 959 | ||
| 1151 | 13년 전 | 633 | ||
| 1150 | 13년 전 | 1070 | ||
| 1149 | 13년 전 | 1222 | ||
| 1148 |
그누배우미
|
13년 전 | 732 | |
| 1147 | 13년 전 | 2847 | ||
| 1146 |
 Maximus |
13년 전 | 962 | |
| 1145 |
dbstnwo11
|
13년 전 | 793 | |
| 1144 | 13년 전 | 668 | ||
| 1143 |
distress
|
13년 전 | 764 | |
| 1142 | 13년 전 | 966 | ||
| 1141 |
distress
|
13년 전 | 772 | |
| 1140 |
distress
|
13년 전 | 981 | |
| 1139 | 13년 전 | 528 | ||
| 1138 | 13년 전 | 4553 | ||
| 1137 | 13년 전 | 2507 | ||
| 1136 |
 울랄라커뮤니케이션스 |
13년 전 | 3893 | |
| 1135 |
울랄라커뮤니케이션스 |
13년 전 | 1955 | |
| 1134 |
 weblife |
13년 전 | 735 | |
| 1133 | 13년 전 | 923 | ||
| 1132 |
엘남매아빠 |
13년 전 | 4365 | |
| 1131 | 13년 전 | 1268 | ||
| 1130 |
울랄라커뮤니케이션스 |
13년 전 | 1306 | |
| 1129 |
울랄라커뮤니케이션스 |
13년 전 | 1006 | |
| 1128 |
아름다운세상
|
13년 전 | 4627 | |
| 1127 |
iwebstory |
13년 전 | 667 | |
| 1126 | 13년 전 | 658 | ||
| 1125 | 13년 전 | 7429 | ||
| 1124 | 13년 전 | 4597 | ||
| 1123 | 13년 전 | 4201 | ||
| 1122 |
 행복을주는사람 |
13년 전 | 2730 | |
| 1121 |
행복을주는사람 |
13년 전 | 3693 | |
| 1120 | 13년 전 | 2705 | ||
| 1119 | 13년 전 | 667 | ||
| 1118 |
엘남매아빠 |
13년 전 | 821 | |
| 1117 |
JBstyle
|
13년 전 | 2496 | |
| 1116 |
JBstyle
|
13년 전 | 1802 | |
| 1115 | 13년 전 | 1255 | ||
| 1114 |
elancer
|
13년 전 | 2644 | |
| 1113 |
아름다운세상
|
13년 전 | 1808 | |
| 1112 | 13년 전 | 2114 | ||
| 1111 |
아름다운세상
|
13년 전 | 1758 | |
| 1110 | 13년 전 | 526 | ||
| 1109 |
gender
|
13년 전 | 737 | |
| 1108 | 13년 전 | 659 | ||
| 1107 | 13년 전 | 417 | ||
| 1106 |
왈가닥루시
|
13년 전 | 547 | |
| 1105 | 13년 전 | 1790 | ||
| 1104 |
울랄라커뮤니케이션스 |
13년 전 | 1319 | |
| 1103 |
광운대학교미디어프로듀서팀
|
13년 전 | 1604 | |
| 1102 | 13년 전 | 684 | ||
| 1101 | 13년 전 | 2207 | ||
| 1100 | 13년 전 | 1638 | ||
| 1099 |
행복을주는사람 |
13년 전 | 4672 | |
| 1098 | 13년 전 | 1291 | ||
| 1097 |
 junny |
13년 전 | 1061 | |
| 1096 |
weblife |
13년 전 | 1655 | |
| 1095 | 13년 전 | 826 | ||
| 1094 | 13년 전 | 1665 | ||
| 1093 |
gender
|
13년 전 | 636 | |
| 1092 | 13년 전 | 1331 | ||
| 1091 | 13년 전 | 880 | ||
| 1090 | 13년 전 | 1067 | ||
| 1089 | 13년 전 | 1041 | ||
| 1088 | 13년 전 | 1517 | ||
| 1087 |
weblife |
13년 전 | 3075 | |
| 1086 |
elancer
|
13년 전 | 1876 | |
| 1085 | 13년 전 | 3666 | ||
| 1084 |
BackToHeaven
|
13년 전 | 2625 | |
| 1083 | 13년 전 | 856 | ||
| 1082 |
원시인교주
|
13년 전 | 1850 | |
| 1081 |
원시인교주
|
13년 전 | 2339 | |
| 1080 |
원시인교주
|
13년 전 | 2104 | |
| 1079 | 13년 전 | 3761 | ||
| 1078 | 13년 전 | 1149 | ||
| 1077 | 13년 전 | 1043 | ||
| 1076 | 13년 전 | 1665 | ||
| 1075 | 13년 전 | 668 | ||
| 1074 | 13년 전 | 623 | ||
| 1073 | 13년 전 | 1008 | ||
| 1072 |
phpman
|
13년 전 | 718 | |
| 1071 | 13년 전 | 3315 | ||
| 1070 |
JBstyle
|
13년 전 | 2120 | |
| 1069 |
JBstyle
|
13년 전 | 3164 | |
| 1068 | 13년 전 | 4860 | ||
| 1067 |
울랄라커뮤니케이션스 |
13년 전 | 1885 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기