작업하다 발견한 꿀팁 공유

우선, 저는 수준이 매우 낮은 코딩을 하기 때문에

다른 분들에겐 꿀팁이 아닐 수 있음을 밝혀드립니다.

(약간의 홍보성 이미지가 포함되었습니다만, 홍보는 아닙니다.)

(작업중인 사이트 스샷을 사용중인 점 양해 바랍니다.)

반응형으로 갤러리 형식 게시판 리스트 작업을 하다 보면

그림과 같이 가로로 5개, 또는 가로로 4개 3개 등등으로 그리드를 짜는 분들 많은 것으로 알고 있습니다.

그누5 갤러리 게시판에서 글 리스트를 불러오는 소스는 아래와 같이

[code]

<?php

$image = urlencode($list[$i][file][i][file]);

if (preg_match("/\.(gif|jpg|png)$/i", $image)) {

$img_ik = G5_DATA_URL.'/file/'.$bo_table.'/'.$image;

echo "<img src='$img_i'>";

}

?> 

[/code]

일일이 위치나 여백을 지정할 수가 없었습니다.

(CSS의 기본기를 잘 모르는 저로서는 상당히 어려운 부분이었습니다.)

예를들어 한 줄에 4개를 출력한다고 가정했을 때

position : relative

width:20%

margin-right:6.666666666666667%

이런 식으로 가로 넓이를 지정하고(20%*4 = 80%) 남은 값을 여백으로 (20% 나누기 3 = 6.666%)

주었습니다만.

이런식으로 작업을 하다 보니 창의 넓이에 따라서 리스트가 아래로 밀리는 등의 문제를 겪게 되었습니다.

그래서 생각한 것이

"n번째 출력되는 이미지에만 여백을 따로 지정할 수 있을까?"

라는 것이었고

CSS 선택자를 검색했습니다.

[code]

.workListArea > div:nth-child(5n) {margin-right:0;} 

[/code]

위와 같이 5번째 오는 div의 오른쪽 여백을 0으로 줄 수 있더군요...

덕분에 창의 넓이에 관계 없이 그리드를 표현할 수 있게 되었습니다.

부족한 코딩이지만 예시 이미지 부분의 코드를 남겨 놓습니다.

list.skin.php

[code]

<div class="workList">

<?php if ($is_checkbox) { ?>

<div style="width:20px; height:20px; position:absolute; top:0; left:0; z-index:99;">

<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>" style="width:100%; height:100%;">

</div>

<?php } ?>

<a href="<?php echo $list[$i]['href'] ?>">

<div class="workList-ImageArea">

<div class="overcolor"></div>

<div class="workList-Image">

<?php

$image = urlencode($list[$i][file][0][file]);

if (preg_match("/\.(gif|jpg|png)$/i", $image)) {

$img_0 = G5_DATA_URL.'/file/'.$bo_table.'/'.$image;

echo "<img src='$img_0' width='100%'>";

}

?>

</div>

</div>

</a>

<div class="workList-Textarea">

<div class="workList-Text-title"><?php echo $list[$i]['subject'] ?></div>

<div class="workList-Text-date"><?php echo $list[$i]['wr_2'] ?></div>

<div class="workList-Text-client"><?php echo $list[$i]['wr_1'] ?></div>

</div>

</div> 

[/code]

CSS부분

[code]

/* work */

.workTitle{width:100%; height:60px; font-size:2em; font-weight:400; text-align:center; line-height:60px; margin-top:3%; border-bottom:solid 1px #0000ff;}

.workListArea{width:100%; position:relative; }

.workListArea > div:nth-child(5n) {margin-right:0;}

.workList{position:relative; display:inline-block; *zoom:1 display:inline; width:18%; max-width:230px; border-radius:6px; border:solid 1px #f2f2f2;  margin:4% 2.5% 0 0; box-shadow:1px 2px 3px #ccc; float:left; box-sizing:border-box; -webkit-box-sizing: border-box;

-moz-box-sizing: border-box;}

.workList-ImageArea{position:relative; overflow:hidden; width:100%; max-width:246px; max-height:246px; border-radius:6px 6px 0 0; text-align:center;}

.workList-Image {width:100%; height:100%; }

.workList-Textarea{position:relative; width:95%; margin:0 auto; padding:10px 0 10px 0;}

.workList-Text-title{position:relative; width:100%; height:24px; line-height:24px; font-weight:400; font-size:1em; color:#000; margin-top:-10px;}

.workList-Text-date{position:relative; width:100%; height:25px; line-height:25px; border-bottom:solid 1px #ccc; font-size:0.75em; color:#000;}

.workList-Text-client{position:relative; width:100%; height:25px; line-height:25px; font-size:0.75em; color:#666;} 

[/code]

두서 없이 적다보니 글이 산으로 가는것 같습니다.

부족하고 긴 글 읽어주셔서 감사합니다.

다른 고수분들은 어떻게 작업하실지 궁금합니다 ㅎㅎㅎ

끝으로 작업중인 사이트 주소 남겨놓습니다.

http://www.studio-soodam.com/board/bbs/board.php?bo_table=work