갤러리 스킨 제작 새로운 방법을 찾았는데...
g5에 적용해야 되나 말아야 되나 고민이네요.
대단한 방법은 아니지만... ㅠㅠ
간단히 브리핑하자면 그 전에는 갤러리 가로열 줄바꿈을 할 때
$i 값을 가지고 몇번째냐를 구했다면,
이번에는 $i 값에 1을 더하고, ($i 가 0부터 시작해서) 마지노선을 지정한 후,
가상의 $k 값을 정하여 $k 값의 배수로 스타일을 지정하는 방법입니다.
제가 썼지만 참 드럽게 꼬아서 썼네요... ㅎㅎㅎ
이 방법의 최대 장점은 반응형 갤러리 작업 시 편리할 것이라는 제 짐작입니다.
그리고 프론트 엔드만 전문적으로 다루시는 경우, 이 작업이 선행되어 있으면 수정사항이 생겨도 백 엔드에 의뢰하지 않아도 됩니다. (CSS3 를 사용하기 어려운 환경이라는 전제 하에)
코드로 설명하자면,
이런 php 코드를 for 문 안에 넣어주고,
// ##### 갤러리 반응형 제어용 : 지운아빠 2013-09-17
if ($i == 0) $res_i = 1;
else {
if ($res_i < 12) $res_i += 1;
else if ($res_i == 12) $res_i = 1;
}
// #####
마크업에서는
ul > li.gall_<?php echo $res_i; ?> 식으로 하면, li 에 각각 gall_1 ~ gall_12 까지 클래스가 부여됩니다.
li 에 기본적으로 float:left 가 되어있고, 한 줄에 4개씩만 보여주고 싶다면,
.gall_1, .gall_5, .gall_9 {clear:both} 와 같이 스타일을 선언하면 됩니다.
이거 그냥 간단하게 쓰려다 주구장창 말이 길어졌네요.
아무튼 이 방법을 g5 에 적용해서 패치할까 말까 고민 중입니다. 저는 굉장히 유용하게 쓰고 있는데, 다른 분들에게도 좋은 방법일까 고민이 되서요.
저같은 경우 http://wadex.co.kr/ 라는 사이트 작업하면서 이 방법으로 작업 중입니다.
아직 몇몇 기능하고 반응형 작업을 안해놔서 공개는 안하고 있었지만... ㄷㄷㄷ
냑에는 오늘 적용했구요.
즐거운 한가위, 풍성한 추석 맞이하세요. 급 마무리 ㅎㅎㅎ
댓글 23개
12년 전
역시 지운아빠님은 뭔가 또 멋있는거 만드시고 계시는군요!
전 그냥 줄바꿈 안하고 li 가로 사이즈로만 잡아서 떨어뜨려 버립니다.. ㅎㅎ
추석연휴 잘 보내세요!
전 그냥 줄바꿈 안하고 li 가로 사이즈로만 잡아서 떨어뜨려 버립니다.. ㅎㅎ
추석연휴 잘 보내세요!
12년 전
저도 Joan님과 같이 계속 흐르되 끝에가서 떨어지는 방법으로 만들고 있어요ㅎ 줄 바꿈을 php단에서 하지 않고 css 만으로 처리를 하는 것이지요. 만약 박스마다 자체 마진이 있고 오른쪽 끝에는 마진이 없는 방식으로 구현할 때에는 :nth-child(4n)로 우측끝의 마진을 없애거나, 혹은 박스의 왼쪽이나 오른쪽에만 마진을 주고 wrapper 단에서 마진을 마이너스로 빼서 잡아주는 방식을 사용합니다. 각자의 장단점은 있겠군요ㅎ
12년 전
:nth-child(4n) 같은 css3 를 사용하지 않는 방식입니다. ㅎㅎㅎ;;
css3 쓰면 위의 팁은 사실 필요가 없어요.
근데 6,7 에서 처참하게 깨지니 걍 width height 다 잡아주고, nth-child(4n) 잡는 용도로만 써야겠네요. 눈물이 주르륵 주르륵
css3 쓰면 위의 팁은 사실 필요가 없어요.
근데 6,7 에서 처참하게 깨지니 걍 width height 다 잡아주고, nth-child(4n) 잡는 용도로만 써야겠네요. 눈물이 주르륵 주르륵
TopSchooL
12년 전
구지 임의 값은 필요없을듯용
$class=""
if( ($i+1 % 12) == 0)
$class="어쩌구";
else
$class="어쩌구";
$class=""
if( ($i+1 % 12) == 0)
$class="어쩌구";
else
$class="어쩌구";
12년 전
네 이 방법도 좋아보이네요. ㅎㅎㅎ
근데 1, 5, 9 일 때는 어떻게 찾아야 할까요? 12라는 값은 한 줄에 아무리 넓게 잡아도 12개만 잡겠단 얘기거든요.
근데 1, 5, 9 일 때는 어떻게 찾아야 할까요? 12라는 값은 한 줄에 아무리 넓게 잡아도 12개만 잡겠단 얘기거든요.
12년 전
접근방법은, 그리드 시스템과 비슷한것 같네요. ^^
http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=179
그리드 시스템이 일반적으로 정해진 컬럼 수를 사용한다는 점은 좀 틀리겠네요..
http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=179
그리드 시스템이 일반적으로 정해진 컬럼 수를 사용한다는 점은 좀 틀리겠네요..
12년 전
네 그리드하고 거의 똑같죠. ㅎㅎㅎ nth-child 랑도 유사하구요.
그냥 css3 못 쓰는 환경에서 (respond.js 까지만 사용하는 환경), 그리고 굳이 css3 사용하지 않더라도, 앞서 홍구님이 말하신 nth-child(4n) 이 필요한 경우의 예 정도까지만 대응할 경우 등등에 사용하려는 얕은 수입니다. ㅎㅎㅎ
정공은 안하고 잔머리만 굴리니 보는 사람이나 굴리는 저나 매한가지로 힘든 거 같습니다. ㅠㅠㅎㅎㅎ
그래도 나름 확장/활용하는 맛이 심심치는 않을 것 같기도 하고... 끝을 함 봐야 되는데 이러고 있네요. ㅠㅠ
그냥 css3 못 쓰는 환경에서 (respond.js 까지만 사용하는 환경), 그리고 굳이 css3 사용하지 않더라도, 앞서 홍구님이 말하신 nth-child(4n) 이 필요한 경우의 예 정도까지만 대응할 경우 등등에 사용하려는 얕은 수입니다. ㅎㅎㅎ
정공은 안하고 잔머리만 굴리니 보는 사람이나 굴리는 저나 매한가지로 힘든 거 같습니다. ㅠㅠㅎㅎㅎ
그래도 나름 확장/활용하는 맛이 심심치는 않을 것 같기도 하고... 끝을 함 봐야 되는데 이러고 있네요. ㅠㅠ
게시판 목록
자유게시판
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 |
 thisgun |
4일 전 | 10 | |
| 199718 |
thisgun |
4일 전 | 9 | |
| 199717 | 2주 전 | 20 | ||
| 199716 |
느긋한카키쿠키
|
2주 전 | 15 | |
| 199715 |
현대적인무질서한까마귀
|
2주 전 | 20 | |
| 199714 | 2주 전 | 23 | ||
| 199713 | 2주 전 | 32 | ||
| 199712 | 1개월 전 | 289 | ||
| 199711 |
안졸리니졸리니
|
1개월 전 | 144 | |
| 199710 |
 glitter0gim |
1개월 전 | 159 | |
| 199709 |
glitter0gim |
1개월 전 | 90 | |
| 199708 | 1개월 전 | 106 | ||
| 199707 | 1개월 전 | 239 | ||
| 199706 | 1개월 전 | 40 | ||
| 199705 | 1개월 전 | 29 | ||
| 199704 | 1개월 전 | 46 | ||
| 199703 | 1개월 전 | 56 | ||
| 199702 | 1개월 전 | 96 | ||
| 199701 | 1개월 전 | 111 | ||
| 199700 | 1개월 전 | 83 | ||
| 199699 | 1개월 전 | 88 | ||
| 199698 | 1개월 전 | 134 | ||
| 199697 | 1개월 전 | 98 | ||
| 199696 |
 Gothrock |
1개월 전 | 245 | |
| 199695 | 1개월 전 | 88 | ||
| 199694 | 1개월 전 | 117 | ||
| 199693 | 1개월 전 | 185 | ||
| 199692 | 1개월 전 | 195 | ||
| 199691 |
 샬롬이아빠 |
2개월 전 | 169 | |
| 199690 | 2개월 전 | 257 | ||
| 199689 | 2개월 전 | 160 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기