게시판 list 페이지 변형

게시판 list 페이지 변형

QA

게시판 list 페이지 변형

본문

1954324395_1673330820.5032.png

 

 

위 사진처럼 게시물을 3개씩 나누고 홀수단은 왼쪽에 이미지 짝수단엔 오른쪽에 이미지 넣게 하고싶습니다.

게시물은 6개씩 출력이 되도록 하려는데 혹시 이렇게 구현이 어려울까요?

그누보드로 기능도 되면서 이렇게 레이아웃을 짤려니 너무 어렵습니다...

이 질문에 댓글 쓰기 :

답변 6

[code]

더보기 버튼을 어떻게[ 작동시킬지 모르겠으나 보이는 것은 아래처럼 하면 되겠습니다

글씨 굵기 간격 등은 css로 만들어 넣으면 됩니다

리스트 18개 보여지기 기본 로직

 

<?php for($k=0; $k<3; $k++){

  $n1= 6*$k; $n2= $n1+3;

 if( !$list[$n1]['subject']) break;

?>

 

<div style='float:left; width:40%;'>이미지</div>

<div style='float:right:width:58%;'>

<?php  for($i=$n1; $i< $n1+3; $i++){?>

  <div><?php echo $list[$i]['ca_name'];?> <?php echo $list[$i]['subject'];?></div>

   <div><?php echo $list[$i]['content'];?></div>

<?php }?>

</div>

 

<div style='float:left:width:58%;'>

<?php  for($i=$n2; $i< $n2+3; $i++){?>

  <div><?php echo $list[$i]['ca_name'];?> <?php echo $list[$i]['subject'];?></div>

   <div><?php echo $list[$i]['content'];?></div>

<?php }?>

</div>

<div style='float:right; width:40%;'>이미지</div>

<div style='clear:both;margin-top:20px;'></div>

<?php } ?>

 

[code]

 

 

구현은 가능하나 게시물 6개를 가져와서 if문으로 나눠 처리하시면 되는 부분이긴 합니다만

짝수 홀수단을 나눠 처리하는 오른쪽 왼쪽 처리하려면 6개 리스트를 가져와서 홀수 부분에 따른 데이터는 리스트에 보여주는게 아닌 배열에 담아 하단에 별도로 표기하는 방법이 있긴 합니다.

3열씩 짤라야 되니 우선 목록 글마다 번호가 필요합니다. 

for 문이나 while 돌리시 $i 시작값을 0으로 대부분 시작하자나요

 

계산식을 만들어 볼까요

첫번째 3줄은 0~2 까지 

두번째 3줄은 3~5 까지

삼열씩 나뉘어야 되니 3으로 나눠 볼까요?

 

0~2까지를 3으로 나누면 0. xxx 란 숫자가 나오겠죠? 그럼 이 값을 소수점올림 정수로 만듭니다.

그럼 결과는 1이란 값이 나오죠 

float:left나 float:right 라는 왼쪽 오른쪽 두가지 조건입니다. 

1을 2로 나눈 나머지 값은 1이 나옵니다.

이 값이 1이면 float:right 값을 전달합니다.

 

다음수 

3~5까지를 3으로 나누면 1. xxx 란 숫자가 나오겠죠? 그럼 이 값을 소수점올림 정수로 만듭니다.

그럼 결과는 2이란 값이 나오죠 

float:left나 float:right 라는 왼쪽 오른쪽 두가지 조건입니다. 

2을 2로 나눈 나머지 값은 0이 나옵니다.

이 값이 0이면 float:left 값을 전달합니다.


$aa = floor( $i / 3 ) ;

// 0~2까지를 3으로 나누면 0. xxx 란 숫자가 나오겠죠? 그럼 이 값을 소수점올림 정수로 만듭니다.

// 그럼 결과는 1이란 값이 나오죠 

 

$aa = $aa % 2 ;

// float:left나 float:right 라는 왼쪽 오른쪽 두가지 조건입니다. 

// 1을 2로 나눈 나머지 값은 1이 나옵니다.

 

if( $aa == 1 ){ $style_left = "float:right"; } else { $style = "float:left"; }

// 이 값이 1이면 float:right 값을 전달합니다.

// 1이 아니면 float:left를 전달합니다.

// $style_left 본인이 편한 변수명으로 교체 해도 됩니다.

 

3번째 열부터는 공간이 있자나요 그공간은 

if( $i != 0 && $i % 3 == '0' ){ // 첫번째 말고 3으로 나눈 값이 0일때 (4번째는 $i 값이 3이므로 0 의 결과)

    $style_gongan = "margin-top::50px";

}

 

<li style="width:70%; <?php echo $style_left?> ; <?php echo $style_gongan?> ;"></li>

 

// width를 70% 준거는 빈공간에 백그라운드를 줄려고 한것입니다.

 

제가 드린 소스는 답이 아닙니다. 진행 시 고쳐야될 부분이 생깁니다. 그래도 

저라면 이렇게 생각하고 만들거 같아서 

도움이 될까 남겨봅니다.

 

 

할려면 할 수는 있을텐데 css와  php에 대해서 어느 정도 지식이 있으셔야 가능할거 같습니다.

가로 배치가 아니고 위아래 배치인데

굳이 홀짝할 필요가 있나 모르겠네요.

<div class="odd"><?php

for( $i=0; $i< 3; $i++)

   echo $list[ $i*2+1];

?></div>

<div class="even"><?php

 

for( $i=0; $i< 3; $i++)

 

   echo $list[ $i*2];

 

?></div>

 

https://sir.kr/g5_skin/53470

답변을 작성하시기 전에 로그인 해주세요.
전체 50
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT