사진 테두리좀 봐주세요!!! > 그누4 질문답변

그누4 질문답변

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

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

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

본문

사진에 테두리를 주고 싶은데 잘 안되네요.
답변좀 부탁드립니다.
그림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 처럼 테두리를 전체 테이블을 빼고 안쪽에 있는 각각의 그림에만 테두리를 넣고 싶은데 안되네요.
좋은 답변좀 부탁드립니다.

행복하세요!!!
  • 복사

댓글 전체

<table cellpadding="0" cellspacing="4" border=1 bordercolor="#E1E1E2">

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

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

이미지별로 테두리 거시려면 스타일에 border:1px solid #색상 을 넣어주시면 될꺼예요~
도라에몽님께 감사~~
이렇게 답변해 주셔서 먼저 감사드립니다.
말씀해 주신대로 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>";

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

img 태그안에 style='border:1px solid #000000' 요거를 추가하세요~~
답변해 주셔서 감사~~ 감사~~
말씀해 주신대로 이 부분을
$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 로 돌리는 쪽으로 가급적 생각을 많이하세요
관리하기 수월하냐와 파일 다 열어야 되냐는 차이 무시 못합니다.
장원철님께서 이번에는 답변을 주셨네요. 감사~~ 감사~~
또한 좋은 말씀까지 해주셨네요.
공감합니다. 그런데 제가 아직 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;}

어떻게 해야 하나요.
그리고 클래스가 어떤 의미 인가요!
다시한번 답변 부탁드릴께요!!
감사~~ 감사~~
$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' <-일케 해주셔야되는데;;

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

그런데 아무 변화가 없습니다.
어디를 잘 못 했는지 모르겠네요.
한번 더 답변좀 부탁드릴께요!
감사드립니다.!!!
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>";
도라에몽님께 감사~~ 감사~~
말씀해 주신대로 적용했더니 모든 문제가 해결되었습니다.
이렇게 도움주셔서 정말정말 감사드립니다.
행복하세요!!!
© SIRSOFT
현재 페이지 제일 처음으로