섬네일 몇개를 출력하고 섬네일 사이에 공간을 띄우면 오른쪽 끝이 남는다.
이경우 자동으로 바꾸는것은 불가능하고 수동으로 지정하여야한다.
몇번 해보니 잘안되서결국 출력되는 수를 기준으로 padding-right:를 조정하는 방식으로 했다.
jquery로 하는방법도 있긴한데.. 부하를 주는것 같아서 php로 구현했다.
class="post-img <?=$class_right?>" 관련 부분을 살펴보면 될것이다.
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
$style_name = "mw-latest-list-img-$bo_table-$rows-$subject_len";
?>
<style type="text/css">
.<?=$style_name?> { float:left; style="text-align:justify"}
.<?=$style_name?> .post-img { float:left; text-align:center;padding-bottom:3px;padding-right:18px; }
.<?=$style_name?> .post-img.right-cut-4 { padding-right:19px; }
.<?=$style_name?> .post-img.right-cut-3 { padding-right:19px; }
.<?=$style_name?> .post-img.right-cut-2 { padding-right:19px; }
.<?=$style_name?> .post-img.right-cut-1 { padding-right:19px; }
.<?=$style_name?> .post-img.right-cut-0 { padding-right:0px; }
.<?=$style_name?> .post-img a { font-weight:normal; font-size:11px; letter-spacing:-1px; color:#555; }
.<?=$style_name?> .file-img { width:90px; height:90px; border:1px solid #e2e2e2; }
.<?=$style_name?> .post-subject { width:95px; height:35px; overflow:hidden; padding:5px 5px 0 0; letter-spacing:-1px; font-size:11px; }
.<?=$style_name?> .post-subject a:hover { color:#438A01; text-decoration:underline; }
</style>
<div class="<?=$style_name?>">
<? for ($i=0; $i<$rows; $i++) { ?>
<?
$img = "$g4[path]/data/file/$bo_table/thumb/{$list[$i][wr_id]}";
if (!@file_exists($img)) $img = "$g4[path]/data/file/$bo_table/thumbnail/{$list[$i][wr_id]}";
if (!@file_exists($img)) $img = "{$list[$i][file][0][path]}/{$list[$i][file][0][file]}";
if (!@file_exists($img)) $img = "$latest_skin_path/img/noimage.gif";
if (!$list[$i][wr_id]) $img = "$latest_skin_path/img/noimage.gif";
if (@is_dir($img)) $img = "$latest_skin_path/img/noimage.gif";
$list[$i][subject] = mw_builder_reg_str($list[$i][subject]);
$class_right='';
if ($i%5==1) $class_right='right-cut-4';
if ($i%5==2) $class_right='right-cut-3';
if ($i%5==2) $class_right='right-cut-2';
if ($i%5==3) $class_right='right-cut-1';
if ($i%5==4) $class_right='right-cut-0';
?>
<div class="post-img <?=$class_right?>" ><a href="<?=$list[$i][href]?>"><img src="<?=$img?>" class="file-img"><BR><?=$list[$i][subject]?></a></span>
</div>
<? } ?>
</div>
웹 표준 바람이 불면서 사실상 웹 코딩 트랜드의 가장 큰 변화가 바로 테이블에서 DIV 혹은 UL 리스트로의 변화입니다. 그동안 데이터를 논리적으로 표시하는데 사용한 Table 태그를 디자인 구획용으로 의미에 맞지 않게 사용해 온 것이 웹 2.0 바람을 타고 DIV나 UL 태그의 사용으로 넘어 온 것이죠. 그러면서 많은 디자이너들은 정렬의 한계에 봉착했습니다. 테이블 태그를 쓰면 손쉽게 양쪽의 정렬을 맞출 수 있던 것이, DIV 태그의 margin이나 padding 속성의 한계에 부딪히며 불필요한 여백을 발생한 것입니다.
위의 그림에서도 볼 수 있듯이 UL 리스트 태그는 LI 태그에서 각 리스트 아이템간의 여백을 주게되면 어쩔수 없이 우측이나 좌측에 여백을 발생시킵니다. 그로인해 아이템간 여백이 크면 클수록 좌우측에 남는 여백이 커져 정렬을 흐트러트리고, 최악의 경우에는 마지막 아이템이 밑으로 떨어져 나가는 플로팅 드롭(Floating Drop) 현상까지 발생합니다.
이 문제를 해결하는 가장 좋은 방법은, 리스트를 감싸고 있는 포장 구획의 너비를 일정 너비로 고정시키는 것입니다. 고정된 너비라면 그 안의 리스트에서 픽셀수를 계산해서 잘 넣으면 딱 맞출 수 있습니다. 하지만 CMS에서 사용하는 스킨과 같이 사용자 입력에 따라 너비가 변화하는 다이나믹 페이지라면, 전문 프로그래머의 자바스크립트 연산 소스를 사용하지 않고는 대안이 없습니다.
Smart Columns w/ CSS & jQuery(Generates liquid column for object fitting)는 이러한 문제를 조금이나마 해소해 줄 수 있는 jQuery 플러그인입니다. 물론 이 소스도 완벽하진 않습니다. 아이템간 여백의 크기만큼 좌우측에 여백이 발생하기는 하지만 최소한 플로팅 드롭이라는 악몽은 일어나지 않습니다. 이 솔루션은 구획의 너비를 강제로 조정하는 방식으로 문제를 해결하고 있습니다.
만일 여러분이 게시판이나 위젯에서 여러 사진을 보여주는 페이지를 만들고 싶다면, 이 플러그인은 그나마 몇 안되는 대안 중의 하나가 될 수 있습니다.
출처:freeimage.kr
