로날듀우

안녕하세요! border 옵션 질문드리겠습니다~!

border 가
 
css로
border:1px #ededed solid;
 
라 하면 현재 있는 width 와 height 포함 보더가 먹기때문에 collapse로 되어있는 table에는
td로 옵션이 안들어가잖아요...
 
이러한 경우에 collapse가 되어있는 td에 border:1px ~~~~ 옵션으로 값을 처리할 수 있나요??
 
아니면
 
위의 이미지 처럼
 
서택이 되어있으면 border에 background 처리고 mouseover 처리를 하면 저것처럼
 
배경이 하얗고 보더가 안으로 들어가서 나오게 되는데요 저것은 어떻게 처리를 한것입니까???
 
너무 굼굼해서요!
 
답변해주셨으면 좋겠습니다.
|

댓글 7개

어느 사이트에서 캡쳐하신 건가요?
edgebook.com 이라는 쇼핑몰 순위를 나타내주는 메타사이트 입니다.
table 로 한 건 아니구요
ul li 를 쓴 겁니다. 현재 원피스를 보고 있다손 치면, 원피스 li 에 class='now' 를 할당해주는 방법인데요.

저 사이트에서 쓴 방법이 정확히 어떤 건진 모르겠지만, 간단하게 예제를 만들어보자면
php 로 만들었다고 가정해서...

<ul>
<li <?if($cate=='all' || empty($cate)) echo "class='now'";?>>전체</li>
<li <?if($cate=='원피스') echo "class='now'";?>>원피스</li>
<li <?if($cate=='상의') echo "class='now'";?>>상의</li>
</ul>

이런 식으로 메뉴가 구성되고,

해당페이지에서 메뉴 불러오기 전에 $cate 가 먼저 호출되어서 class='now'를 어디에 넣어줄지 결정하겠죠.

css 에서 .now 를 만들어 해당하는 스타일을 넣어두시면 될 겁니다.
음... 저는 저것을 어떻게 쓴게 굼굼한게 아니라 그 CSS값을 어떻게 넣었는지 굼굼한데..
그 CSS 옵션을 알려주시면 안될까요?
아하
그건 다른 고수님이 저는 천민이라서 ㅠ
ul list로 정렬했네용;;
ul li {border:1px solid #000} // 기본 li 스타일
ul li.now {border:1px solid #변경값} // now li 스타일
ul li a:hover {border:2px solid #eee;} // 마우스 올렸을때 변경

ul > li > a [이런 구조인듯한데용;;]
<ul>
<li class="now"><a></a></li>
<li><a></a></li>
</ul>
li는 그냥 now 클래스를 먹이냐 안먹이냐에 따른 디자인이 변경된것이고요
마우스를 올렸을땐 li 안에 a 태그의 스타일이 변경되는 것입니다.
a:hover로 마우스 올렸을때 안의 보더값을 줬기 때문에 table안에 td의 내부 보더값이 보인것처럼 보이는거죠;;

세부 소스는 직접 공부하시는게..ㅡ/.,ㅡ;;
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
13년 전 조회 1,037
13년 전 조회 2,413
13년 전 조회 1,208
13년 전 조회 1,166
13년 전 조회 2,263
13년 전 조회 1,941
13년 전 조회 6,671
13년 전 조회 1,580
13년 전 조회 930
13년 전 조회 737
13년 전 조회 1,127
13년 전 조회 1,182
13년 전 조회 1,036
13년 전 조회 824
13년 전 조회 1,253
13년 전 조회 1,569
13년 전 조회 959
13년 전 조회 789
13년 전 조회 1,278
13년 전 조회 1,736
13년 전 조회 1,088
13년 전 조회 2,362
13년 전 조회 1,259
13년 전 조회 877
13년 전 조회 1,444
13년 전 조회 1,565
13년 전 조회 1,669
13년 전 조회 810
13년 전 조회 1,542
13년 전 조회 1,158
13년 전 조회 2,689
13년 전 조회 1,184
13년 전 조회 1,075
13년 전 조회 933
13년 전 조회 1,407
13년 전 조회 995
13년 전 조회 1,746
13년 전 조회 1,322
13년 전 조회 965
13년 전 조회 939
13년 전 조회 7,445
13년 전 조회 966
13년 전 조회 827
13년 전 조회 2,071
13년 전 조회 1,919
13년 전 조회 1,096
13년 전 조회 787
13년 전 조회 1,488
13년 전 조회 1,188
13년 전 조회 1,326
13년 전 조회 3,302
13년 전 조회 971
13년 전 조회 904
13년 전 조회 2,744
13년 전 조회 1,150
13년 전 조회 959
13년 전 조회 1,733
13년 전 조회 1,874
13년 전 조회 1,075
13년 전 조회 905
13년 전 조회 1,592
13년 전 조회 1,000
13년 전 조회 1,410
13년 전 조회 964
13년 전 조회 1,218
13년 전 조회 951
13년 전 조회 875
13년 전 조회 872
13년 전 조회 1,973
13년 전 조회 937
13년 전 조회 1,763
13년 전 조회 944
13년 전 조회 842
13년 전 조회 746
13년 전 조회 1,124
13년 전 조회 904
13년 전 조회 852
13년 전 조회 939
13년 전 조회 1,496
13년 전 조회 987
13년 전 조회 1,419
13년 전 조회 4,401
13년 전 조회 1,137
13년 전 조회 2,558
13년 전 조회 1,527
13년 전 조회 1,712
13년 전 조회 788
13년 전 조회 852
13년 전 조회 6,161
13년 전 조회 1,117
13년 전 조회 1,321
13년 전 조회 5,140
13년 전 조회 1,786
13년 전 조회 2,600
13년 전 조회 1,973
13년 전 조회 1,185
13년 전 조회 1,264
13년 전 조회 1,182
13년 전 조회 899
13년 전 조회 1,286
🐛 버그신고