작업하다 발견한 꿀팁 공유 정보
작업하다 발견한 꿀팁 공유
본문
우선, 저는 수준이 매우 낮은 코딩을 하기 때문에
다른 분들에겐 꿀팁이 아닐 수 있음을 밝혀드립니다.
(약간의 홍보성 이미지가 포함되었습니다만, 홍보는 아닙니다.)
(작업중인 사이트 스샷을 사용중인 점 양해 바랍니다.)
반응형으로 갤러리 형식 게시판 리스트 작업을 하다 보면
그림과 같이 가로로 5개, 또는 가로로 4개 3개 등등으로 그리드를 짜는 분들 많은 것으로 알고 있습니다.
그누5 갤러리 게시판에서 글 리스트를 불러오는 소스는 아래와 같이
<?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'>";
}
?>
일일이 위치나 여백을 지정할 수가 없었습니다.
(CSS의 기본기를 잘 모르는 저로서는 상당히 어려운 부분이었습니다.)
예를들어 한 줄에 4개를 출력한다고 가정했을 때
position : relative
width:20%
margin-right:6.666666666666667%
이런 식으로 가로 넓이를 지정하고(20%*4 = 80%) 남은 값을 여백으로 (20% 나누기 3 = 6.666%)
주었습니다만.
이런식으로 작업을 하다 보니 창의 넓이에 따라서 리스트가 아래로 밀리는 등의 문제를 겪게 되었습니다.
그래서 생각한 것이
"n번째 출력되는 이미지에만 여백을 따로 지정할 수 있을까?"
라는 것이었고
CSS 선택자를 검색했습니다.
.workListArea > div:nth-child(5n) {margin-right:0;}
위와 같이 5번째 오는 div의 오른쪽 여백을 0으로 줄 수 있더군요...
덕분에 창의 넓이에 관계 없이 그리드를 표현할 수 있게 되었습니다.
부족한 코딩이지만 예시 이미지 부분의 코드를 남겨 놓습니다.
list.skin.php
<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>
CSS부분
/* 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;}
두서 없이 적다보니 글이 산으로 가는것 같습니다.
부족하고 긴 글 읽어주셔서 감사합니다.
다른 고수분들은 어떻게 작업하실지 궁금합니다 ㅎㅎㅎ
끝으로 작업중인 사이트 주소 남겨놓습니다.
http://www.studio-soodam.com/board/bbs/board.php?bo_table=work
추천
0 비추천
0
0 비추천
0
댓글 19개
CSS 가상선택자 :nth-child()는 익스9부터 된다는게 함정ㅜㅜㅜ
그래서 불가피하게 써야할 일이 생기면 그냥 제이쿼리 메서드 :nth-child()로 대신해서 쓰고 있네요~
그래서 불가피하게 써야할 일이 생기면 그냥 제이쿼리 메서드 :nth-child()로 대신해서 쓰고 있네요~
이 또한 고급정보이군요!! 감사합니다. ^^
ie7,8 때문에 저런 좋은 선택자를 놔두고 쓸 일이 없네요ㅜ
다른 정보나 팁들도 생기시면 올려주세욥^^
다른 정보나 팁들도 생기시면 올려주세욥^^
ie하위버전이 버려지는 날이 하루 빨리 오기를 ㅠ ㅠ
nth-child 이것과
일부 ie 에서 적용되지 않아
li + li + li + li 이걸로 사용한적이 있습니다.
이 부분은 잘못된건지 알고 싶습니다.
일부 ie 에서 적용되지 않아
li + li + li + li 이걸로 사용한적이 있습니다.
이 부분은 잘못된건지 알고 싶습니다.
잘못된 방법같지는 않은데요? 형제 선택자는 활용은 자주쓰이는 방법이라서~
그러면 사용할떄 .
li + li + li + li
nth-child
동시에 사용해야하는건가요 ~ ?
li + li + li + li
nth-child
동시에 사용해야하는건가요 ~ ?
음...n 번째의 특정 스타일을 변경하려면 아직은 스크립트가 제일 나은 방법같구요~
ie하위버전을 버린다면 그냥 nth-child()만 쓰시면 될 것 같구요~
li + li ...이런식으로 하실 경우는 (물론 삽질이 예상되지만) nth-child를 같이 쓸 이유는 없는 것 같아요~
ie하위버전을 버린다면 그냥 nth-child()만 쓰시면 될 것 같구요~
li + li ...이런식으로 하실 경우는 (물론 삽질이 예상되지만) nth-child를 같이 쓸 이유는 없는 것 같아요~
답변 감사합니다.
아직 그래도 ie하위버전 쓰는 사람들이 많아서 ㅜ
아직 그래도 ie하위버전 쓰는 사람들이 많아서 ㅜ
네네~저도 그래서 nth-child는 그림의 떡이네욥ㅎㅎㅎ
css 보단 5번째에 특정 클래스를 줘서 css 별도로 먹이는게 효과적이죠...
-> if문으로 5의 배수의 div 에 last 라는 클래스를 주는 방식..
last 클래스에는 margin-right:0
-> if문으로 5의 배수의 div 에 last 라는 클래스를 주는 방식..
last 클래스에는 margin-right:0
이런 방법도 있었군요 ㅎㅎㅎ 감사합니다. ^^
좋은 정보에 감사드립니다. 오늘도 좋은 정보 얻고만 갑니다.^^
좋은 정보라고 해주셔서 감사합니다. ^^;;;
저도 저런 디자인 코딩할때가 있는데..
저는 workListArea에 .workList 하나의 margin-right값 만큼을 width값에 더하고,
.workListArea를 한번더 감싸서 width:100%, overfllow-x:hidden 하면
다섯번째 margin-right값은 히든처리되서 딱 맞더라고요.
정리하자면 오른쪽 끝의 마진값을 가려버리도록 하자는거지요 ㅋ
뭐 참고가 되실지 모르겠습니다 ;;ㅎㅎ
저는 workListArea에 .workList 하나의 margin-right값 만큼을 width값에 더하고,
.workListArea를 한번더 감싸서 width:100%, overfllow-x:hidden 하면
다섯번째 margin-right값은 히든처리되서 딱 맞더라고요.
정리하자면 오른쪽 끝의 마진값을 가려버리도록 하자는거지요 ㅋ
뭐 참고가 되실지 모르겠습니다 ;;ㅎㅎ
감사합니다. ^^
좋은팁이네요^^
무슨말인지 제가 잘 이해는 못하겠지만 반응형이라면 보통 float:left 쓰면 끝나는데...ㅎㅎ
잘못 이해한 거라면 그냥 무시하세요~ㅎ
잘못 이해한 거라면 그냥 무시하세요~ㅎ
설명이 부족했군요 ㅎㅎㅎ 근본 없이 코딩하는 처지라서 ㅋㅋㅋ
