갤러리 스킨 제작 새로운 방법을 찾았는데... > 자유게시판

자유게시판

출석체크 십년전오늘 포인트가위바위보 포인트야구게임

갤러리 스킨 제작 새로운 방법을 찾았는데... 정보

갤러리 스킨 제작 새로운 방법을 찾았는데...

본문

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/ 라는 사이트 작업하면서 이 방법으로 작업 중입니다.
아직 몇몇 기능하고 반응형 작업을 안해놔서 공개는 안하고 있었지만... ㄷㄷㄷ

냑에는 오늘 적용했구요.


즐거운 한가위, 풍성한 추석 맞이하세요. 급 마무리 ㅎㅎㅎ


KakaoTalk_44acd797328dd45d.jpg


추천
0
  • 복사

댓글 23개

Joan 홈페이지 자기소개 아이디로 검색 회원게시물
(115.♡.♡.186)
13.09.17 10:55:51
역시 지운아빠님은 뭔가 또 멋있는거 만드시고 계시는군요!
 전 그냥 줄바꿈 안하고 li 가로 사이즈로만 잡아서 떨어뜨려 버립니다.. ㅎㅎ
추석연휴 잘 보내세요!
지운아빠 홈페이지 자기소개 아이디로 검색 회원게시물
(14.♡.♡.156)
13.09.17 11:15:25
박스 높이 다를 때는 어떻게 처리하세요? ㅎㅎㅎ height 지정하시나요?
조안님도 추석연휴 잘 보내세요!! ^^
홍구 홈페이지 자기소개 아이디로 검색 회원게시물
(125.♡.♡.167)
13.09.17 11:11:20
저도 Joan님과 같이 계속 흐르되 끝에가서 떨어지는 방법으로 만들고 있어요ㅎ 줄 바꿈을 php단에서 하지 않고 css 만으로 처리를 하는 것이지요. 만약 박스마다 자체 마진이 있고 오른쪽 끝에는 마진이 없는 방식으로 구현할 때에는 :nth-child(4n)로 우측끝의 마진을 없애거나, 혹은 박스의 왼쪽이나 오른쪽에만 마진을 주고 wrapper 단에서 마진을 마이너스로 빼서 잡아주는 방식을 사용합니다. 각자의 장단점은 있겠군요ㅎ
지운아빠 홈페이지 자기소개 아이디로 검색 회원게시물
(14.♡.♡.156)
13.09.17 11:14:45
:nth-child(4n) 같은 css3 를 사용하지 않는 방식입니다. ㅎㅎㅎ;;
css3 쓰면 위의 팁은 사실 필요가 없어요.

근데 6,7 에서 처참하게 깨지니 걍 width height 다 잡아주고, nth-child(4n) 잡는 용도로만 써야겠네요. 눈물이 주르륵 주르륵
지운아빠 홈페이지 자기소개 아이디로 검색 회원게시물
(14.♡.♡.156)
13.09.17 11:43:45
네 이 방법도 좋아보이네요. ㅎㅎㅎ
근데 1, 5, 9 일 때는 어떻게 찾아야 할까요? 12라는 값은 한 줄에 아무리 넓게 잡아도 12개만 잡겠단 얘기거든요.
전진 홈페이지 자기소개 아이디로 검색 회원게시물
(95.♡.♡.138)
13.09.17 14:48:38
접근방법은, 그리드 시스템과 비슷한것 같네요. ^^
http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=179
그리드 시스템이 일반적으로 정해진 컬럼 수를 사용한다는 점은 좀 틀리겠네요..
지운아빠 홈페이지 자기소개 아이디로 검색 회원게시물
(14.♡.♡.156)
13.09.17 14:53:21
네 그리드하고 거의 똑같죠. ㅎㅎㅎ nth-child 랑도 유사하구요.
그냥 css3 못 쓰는 환경에서 (respond.js 까지만 사용하는 환경), 그리고 굳이 css3 사용하지 않더라도, 앞서 홍구님이 말하신 nth-child(4n) 이 필요한 경우의 예 정도까지만 대응할 경우 등등에 사용하려는 얕은 수입니다. ㅎㅎㅎ

정공은 안하고 잔머리만 굴리니 보는 사람이나 굴리는 저나 매한가지로 힘든 거 같습니다. ㅠㅠㅎㅎㅎ
그래도 나름 확장/활용하는 맛이 심심치는 않을 것 같기도 하고... 끝을 함 봐야 되는데 이러고 있네요. ㅠㅠ
목록
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로