그룹 페이지 정렬 문의 드립니다.
본문
수고 하십니다.
그룹 페이지를 가보면
pc에서 가로 3칸으로 나열 되는데요.
모바일에서도 3칸으로 좌우 여백없이 나열 되다 보니
너무 답답해 보입니다.
모바일에서는 가로 2칸에 양 옆으로 여백을 조금 주고 싶은데
어떻게 해야 하나요?
조언 좀 부탁드립니다.
감사합니다.
<!-- 메인화면 최신글 시작 -->
<?php
// 최신글
$sql = " select bo_table, bo_subject
from {$g5['board_table']}
where gr_id = '{$gr_id}'
and bo_list_level <= '{$member['mb_level']}'
and bo_use_search = 1
and bo_device <> 'mobile' ";
if(!$is_admin)
$sql .= " and bo_use_cert = '' ";
$sql .= " order by bo_order ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
$lt_style = "";
if ($i%3 !== 0) $lt_style = "margin-left:2%";
else $lt_style = "";
?>
<div style="float:left;<?php echo $lt_style ?>" class="lt_wr">
<?php
// 이 함수가 바로 최신글을 추출하는 역할을 합니다.
// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
echo latest('basic', $row['bo_table'], 5, 17);
?>
</div>
<?php
}
?>
<!-- 메인화면 최신글 끝 -->
답변 2
※ 프로젝트에서 "그룹 페이지" 화면에 대해 데스크탑에서는 블럭을 3칸으로,
모바일에서는 2칸으로 배치하며 좌우 여백을 추가하는 코드를
다음과 같이 수정여 보시면 어떨까요.
<!-- 메인화면 최신글 시작 -->
<?php
// 최신글
$sql = " select bo_table, bo_subject
from {$g5['board_table']}
where gr_id = '{$gr_id}'
and bo_list_level <= '{$member['mb_level']}'
and bo_use_search = 1 ";
if(!$is_admin)
$sql .= " and bo_use_cert = '' ";
$sql .= " order by bo_order ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
$lt_style = "";
if ($i % 3 !== 0) {
$lt_style = "margin-left:2%";
} else {
$lt_style = "";
}
?>
<div class="lt_wr" style="<?php echo $lt_style; ?>">
<?php
// 최신글 출력
echo latest('basic', $row['bo_table'], 5, 17);
?>
</div>
<?php } ?>
<!-- 메인화면 최신글 끝 -->
<style>
/* 공통 스타일 */
.lt_wr {
float: left;
width: calc(33.33% - 2%); /* 3칸 배치 */
margin-bottom: 20px; /* 블럭 간 간격 */
box-sizing: border-box;
}
/* 모바일 스타일 */
@media (max-width: 768px) {
.lt_wr {
width: calc(50% - 2%); /* 2칸 배치 */
margin-bottom: 15px;
}
}
</style>
- 기존 쿼리를 유지하며 bo_device 조건을 제거합니다.
모바일 및 데스크탑 모두에서 동일한 데이터가 출력됩니다.
- 기존의 $lt_style 처리 논리를 보존하여 좌측 여백을 부여합니다.
- 데스크탑에서 블럭의 너비를 33.33%로 설정하여 3칸 배치를 구현합니다.
- 모바일 (max-width: 768px)에서 너비를 50%로 설정하여 2칸 배치를 구현합니다.
- 블럭 간 여백과 여백 조정은 margin-bottom과 width의 계산을 활용합니다.
답변 감사합니다.
소스를 바꾸어 봤는데요.
한 칸에 가로 두개
그 아래 우측으로 하나
이런식으로 나열이 되며 좌우 여백은 생기지 않습니다.
flexbox를 사용하면 모바일에서 정렬 문제와 여백 문제를 동시에 해결할 수 있을 것입니다.
<style>
/* 공통 스타일 */
.lt_wr_container {
display: flex;
flex-wrap: wrap; /* 줄바꿈 허용 */
gap: 2%; /* 칸 간 간격 */
justify-content: space-between; /* 좌우 여백을 자동 조정 */
}
.lt_wr {
box-sizing: border-box;
margin-bottom: 15px;
}
/* 데스크탑 스타일 */
@media (min-width: 769px) {
.lt_wr {
width: calc(33.33% - 2%); /* 3칸 배치 */
}
}
/* 모바일 스타일 */
@media (max-width: 768px) {
.lt_wr {
width: calc(50% - 2%); /* 2칸 배치 */
}
}
</style>
<div class="lt_wr_container">
<?php
for ($i = 0; $row = sql_fetch_array($result); $i++) {
echo '<div class="lt_wr">';
echo latest('basic', $row['bo_table'], 5, 17);
echo '</div>';
}
?>
</div>
여백은 생기지 않지만
덕분에 잘 해결 하였습니다.
감사합니다. (__)
~/_
<?php if($is_mobile){ ?>
// 여기 모바일 구성
<?php } else { ?>
// 여기 기존 PC 구성
<?php } ?>
이렇게 나누셔도 됩니다.
애드프로님 답변 감사합니다.