사진 테두리좀 봐주세요!!!

· 2008-05-28 (수) 13:12:41 · 995 · 11
a_img.jpg
사진에 테두리를 주고 싶은데 잘 안되네요.
답변좀 부탁드립니다.
그림1에서 그림2 처럼 사진에 테두리를 주고 싶은데 소스 어디를 수정해야 하는지 답변좀 부탁드릴께요!
그림1에 사용한 소스입니다.
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="14%">
<table cellpadding="0" cellspacing="4" border=1 bordercolor="#E1E1E2">
<tr>
<!-- 목록 -->
<? for ($i=0; $i<count($list); $i++) {
echo "<td width='98' height='74' align='center' valign='middle'>";
if(!$member[mb_id]) {
$list[$i][href] = "#";
}

$list_file = sql_fetch("select bf_file from $g4[board_file_table] where bo_table='$bo_table' and bf_no = '0' and wr_id='{$list[$i][wr_id]}'");
if($list_file[bf_file]) {
$list_file_view[$i] = "<img src='./../data/file/$bo_table/$list_file[bf_file]' style='cursor:pointer' border=0 width=$small_width height=$small_height onmouseover=\"document.getElementById('large').src='./../data/file/$bo_table/$list_file[bf_file]'; document.getElementById('view').href='{$list[$i][href]}'\">";
$list_lfile_view[$i] = "<a id=view href='#'><img id=large src='./../data/file/$bo_table/$list_file[bf_file]' border=0 width=$large_width height=$large_height></a>";
}else {
$list_file_view[$i] = "";
$list_lfile_view[$i] = "";
}

//$latest_subject = cut_str($list[$i][subject], 12, '...'); // 제목

echo $list_file_view[$i];
echo "<br>";
echo $latest_subject;
echo "</td>";

if($i%2) {
echo "</tr><tr>";
}

} ?>
</td>
</tr>
</table>
</td>
</tr>
</table>

이것을 그림2 처럼 테두리를 전체 테이블을 빼고 안쪽에 있는 각각의 그림에만 테두리를 넣고 싶은데 안되네요.
좋은 답변좀 부탁드립니다.

행복하세요!!!

첨부파일

a_img.jpg (61.7 KB)
0회 2008-05-28 13:12
|

댓글 11개

2008-05-28 (수) 13:19:18
<table cellpadding="0" cellspacing="4" border=1 bordercolor="#E1E1E2">

<table cellpadding="0" cellspacing="0" border=0>

으로 하시면 테두리가 없어지구요.

이미지별로 테두리 거시려면 스타일에 border:1px solid #색상 을 넣어주시면 될꺼예요~
2008-05-28 (수) 13:27:01
도라에몽님께 감사~~
이렇게 답변해 주셔서 먼저 감사드립니다.
말씀해 주신대로 border=1 --> border=0 해야 전체 테이블에 테두리가 없어지겠네요.
그렇게 하면 그다음에 전체 테이블 안에 있는 사진에만 테두리를 주고 싶은데 이 부분이 안되네요.

이부분을 수정해야 할 것 같은데 방법좀 설명해 주세요!

$list_file_view[$i] = "<img src='./../data/file/$bo_table/$list_file[bf_file]' style='cursor:pointer' border=0 width=$small_width height=$small_height onmouseover=\"document.getElementById('large').src='./../data/file/$bo_table/$list_file[bf_file]'; document.getElementById('view').href='{$list[$i][href]}'\">";
$list_lfile_view[$i] = "<a id=view href='#'><img id=large src='./../data/file/$bo_table/$list_file[bf_file]' border=0 width=$large_width height=$large_height></a>";

그리고 전체적으로 사용하는 스타일에 적용하지 않고요.
이 부분에서만 사용하고 싶습니다.
답변해 주셔서 감사드립니다.
다시한번 답변 부탁드릴께요!!!
2008-05-28 (수) 13:33:35
그러면 두가지 방법이 있겠네요.
이미지에 거는방법이랑 A태그에 거는 방법이 있을텐데요.
마우스오버시 스타일 변화 시키려면 A태그에 하시구
아니라면 이미지에 태그거시면 될듯해요.

img 태그안에 style='border:1px solid #000000' 요거를 추가하세요~~
2008-05-28 (수) 13:49:04
답변해 주셔서 감사~~ 감사~~
말씀해 주신대로 이 부분을
$list_file_view[$i] = "<img src='./../data/file/$bo_table/$list_file[bf_file]' style='cursor:pointer' border=0 width=$small_width height=$small_height onmouseover=\"document.getElementById('large').src='./../data/file/$bo_table/$list_file[bf_file]'; document.getElementById('view').href='{$list[$i][href]}'\">";

이렇게 수정했습니다.
$list_file_view[$i] = "<img src='./../data/file/$bo_table/$list_file[bf_file]' style='cursor:pointer' border:1px solid #000000 width=$small_width height=$small_height onmouseover=\"document.getElementById('large').src='./../data/file/$bo_table/$list_file[bf_file]'; document.getElementById('view').href='{$list[$i][href]}'\">";

그런데 안되네요!
아무 테두리도 없이 그냥 사진만 나타나네요.
제가 잘못 적용한 것 같은데 죄송하지만 쉽게 다시 한번 설명 부탁드릴께요!
감사드립니다.!!!
가장 쉽게 하는 방법은 css 에 클래스 하나 추가하면 됩니다.

이를테면

.boxImg img { padding: 4px; border: solid 1px #CCC; margin: 2px 2px 2px 2px; }
.boxImg a img{ padding: 4px; border: solid 1px #CCC; margin: 2px 2px 2px 2px;}
.boxImg a:visited img { padding: 4px; border: solid 1px #CCC; margin: 2px 2px 2px 2px;}
.boxImg a:hover img{ padding: 4px; border: solid 1px #FF0000; margin: 2px 2px 2px 2px;}

위와 같이 되겠지요..

웬만하면 수동으로 할려고 하지 마시고 클래스나 php 로 돌리는 쪽으로 가급적 생각을 많이하세요
관리하기 수월하냐와 파일 다 열어야 되냐는 차이 무시 못합니다.
2008-05-28 (수) 14:09:23
장원철님께서 이번에는 답변을 주셨네요. 감사~~ 감사~~
또한 좋은 말씀까지 해주셨네요.
공감합니다. 그런데 제가 아직 css에 대해 잘 몰라서요.
말씀해 주신대로 css에 이부분을 적용해 보았는데 아무 변화가 없네요.
.boxImg img { padding: 4px; border: solid 1px #CCC; margin: 2px 2px 2px 2px; }
.boxImg a img{ padding: 4px; border: solid 1px #CCC; margin: 2px 2px 2px 2px;}
.boxImg a:visited img { padding: 4px; border: solid 1px #CCC; margin: 2px 2px 2px 2px;}
.boxImg a:hover img{ padding: 4px; border: solid 1px #FF0000; margin: 2px 2px 2px 2px;}

어떻게 해야 하나요.
그리고 클래스가 어떤 의미 인가요!
다시한번 답변 부탁드릴께요!!
감사~~ 감사~~
2008-05-28 (수) 14:22:30
$list_lfile_view[$i] = "<a id=view href='#' class='boxImg'><img id=large src='./../data/file/$bo_table/$list_file[bf_file]' border=0 width=$large_width height=$large_height></a>";

부분을 수정하세요

그리구 위에 보니깐 style='cursor:pointer' border:1px solid #000000 이렇게 넣으시는 게 아니구

style='cursor:pointer;border:1px solid #000000' <-일케 해주셔야되는데;;

맞을래나 모르겠네 ㅡㅡ;;저도 초보라 -_-;
2008-05-28 (수) 15:06:59
도라에몽님께 감사~~ 감사~~
드디어 문제를 해결해 가고 있습니다.
말씀해 주신대로 적용해 보았더니 문제가 해결되었습니다.
그런데 한가지만 더 해결하면 될것 같네요.
한번 더 도움 요청합니다.
사진과 테두리이 사이에 공간을 주기 위해 padding:4px 를 추가 했습니다.
이런식으로 적용했습니다.
style='cursor:pointer;border:1px solid #000000;padding:4px;'

그런데 아무 변화가 없습니다.
어디를 잘 못 했는지 모르겠네요.
한번 더 답변좀 부탁드릴께요!
감사드립니다.!!!
2008-05-28 (수) 15:59:15
img에 padding은 단독으로 사용안되는걸로 알고있는데...
padding은 div나 table에서 쓰이는거로 알고있습니당~이렇게 해보세요.

$list_file_view[$i] = "<div style='padding:4px;border:1px solid #000000'><img src='./../data/file/$bo_table/$list_file[bf_file]' style='cursor:pointer' width=$small_width height=$small_height onmouseover=\"document.getElementById('large').src='./../data/file/$bo_table/$list_file[bf_file]'; document.getElementById('view').href='{$list[$i][href]}'\"></div>";
2008-05-28 (수) 16:37:35
도라에몽님께 감사~~ 감사~~
말씀해 주신대로 적용했더니 모든 문제가 해결되었습니다.
이렇게 도움주셔서 정말정말 감사드립니다.
행복하세요!!!
2008-05-28 (수) 20:37:23
별말씀을요 -_-;;
서로 돕고사는 사회 아니겠어요^^;;
댓글을 작성하시려면 로그인이 필요합니다.

그누4 질문답변

66,531건

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기 기존 게시물은 열람만 가능합니다.

+
제목 글쓴이 날짜 조회
08-05-28 조회 2,574
08-05-28 조회 996
08-05-28 조회 872
08-05-28 조회 1,065
08-05-28 조회 846
08-05-28 조회 836
08-05-28 조회 922
08-05-28 조회 1,591
08-05-28 조회 1,101
08-05-28 조회 1,231
08-05-28 조회 2,043
08-05-28 조회 896
08-05-28 조회 1,024
08-05-28 조회 855
08-05-28 조회 1,790
08-05-27 조회 1,864
08-05-27 조회 1,022
08-05-27 조회 964
08-05-27 조회 840
08-05-27 조회 1,174