[모바일] 게시물 목록 중 제목, 작성자, 날짜 등을 같은 행에 표시
본문
그누보드 모바일 기본게시판(basic)을 약간 수정하여 사용하려 합니다.
(수정 중인 파일 : /theme/basic/mobile/skin/board/basic/list.skin.php 및 style.css)
모바일 게시판 보기(게시물 목록) 중에서 제목과 작성자,작성일... (bo_info) 정보를 같은 행에 표시하고자 합니다.(css 내용 너무 어렵네요)
게시물 제목은 현재처럼 표시되고, 작성자와 날짜는 같은 행의 우측정렬해서 보여주고 싶습니다.
아래는 list.skin.php와 style.css 코드 중 해당하는 것으로 생각(제 지식수준으로)되는 부분만 적었습니다.
전체 다 적으면 너무 길어질것 같아서요. 혹시 다른 부분을 수정해야 하면, 그누보드 원본파일 중 위에 적은 경로에 있는 파일을 보시고 알려주셔도 됩니다.
보시고, 어느 부분을 수정해야 원하는 결과(2.목표) 대로 표시될까요?
1. 현재
2. 목표
파일명 : list.skin.php
1 : <!-- 게시판 목록 시작 -->
2 : <div id="bo_list">
3 :
4 : <?php if ($is_category) { ?>
5 : <nav id="bo_cate">
6 : <h2><?php echo ($board['bo_mobile_subject'] ? $board['bo_mobile_subject'] : $board['bo_subject']) ?> 카테고리</h2>
7 : <ul id="bo_cate_ul">
8 : <?php echo $category_option ?>
9 : </ul>
10 : </nav>
11 : <?php } ?>
12 :
13 : <div class="list_01">
14 : <?php if ($is_checkbox) { ?>
15 : <div class="all_chk chk_box">
16 : <input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);" class="selec_chk">
17 : <label for="chkall">
18 : <span></span>
19 : <b class="sound_only">현재 페이지 게시물 </b> 전체선택
20 : </label>
21 : </div>
22 : <?php } ?>
23 :
24 : <ul>
25 : <?php for ($i=0; $i<count($list); $i++) { ?>
26 : <li class="<?php if ($list[$i]['is_notice']) echo "bo_notice"; ?>">
27 : <?php if ($is_checkbox) { ?>
28 : <div class="bo_chk chk_box">
29 : <input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>" class="selec_chk">
30 : <label for="chk_wr_id_<?php echo $i ?>">
31 : <span></span>
32 : <b class="sound_only"><?php echo $list[$i]['subject'] ?></b>
33 : </label>
34 : </div>
35 : <?php } ?>
36 :
37 : <div class="bo_cnt">
38 : <?php if ($list[$i]['is_notice'] || ($is_category && $list[$i]['ca_name'])) { ?>
39 : <div class="bo_cate_ico">
40 : <?php if ($list[$i]['is_notice']) { ?><strong class="notice_icon">공지</strong><?php } ?>
41 : <?php if ($is_category && $list[$i]['ca_name']) { ?>
42 : <a href="<?php echo $list[$i]['ca_name_href'] ?>" class="bo_cate_link"><?php echo $list[$i]['ca_name']; ?></a>
43 : <?php } ?>
44 : </div>
45 : <?php } ?>
46 :
47 : <a href="<?php echo $list[$i]['href'] ?>" class="bo_subject">
48 : <?php echo $list[$i]['icon_reply']; ?>
49 : <?php if (isset($list[$i]['icon_secret'])) echo $list[$i]['icon_secret']; ?>
50 : <?php echo $list[$i]['subject'] ?>
51 : <?php
52 : // if ($list[$i]['file']['count']) { echo '<'.$list[$i]['file']['count'].'>'; }
53 : if ($list[$i]['icon_new']) echo "<span class=\"new_icon\">N<span class=\"sound_only\">새글</span></span>";
54 : if (isset($list[$i]['icon_hot'])) echo $list[$i]['icon_hot'];
55 : if (isset($list[$i]['icon_file'])) echo $list[$i]['icon_file'];
56 : if (isset($list[$i]['icon_link'])) echo $list[$i]['icon_link'];
57 : ?>
58 :
59 : <?php if ($list[$i]['comment_cnt']) { ?>
60 : <span class="bo_cmt">
61 : <span class="sound_only">댓글</span>
62 : <?php echo $list[$i]['comment_cnt']; ?>
63 : <span class="sound_only">개</span>
64 : </span>
65 : <?php } ?>
66 : </a>
67 : </div>
68 : <div class="bo_info">
69 : <span class="sound_only">작성자</span><?php echo $list[$i]['name'] ?>
70 : <span class="bo_date"><i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo $list[$i]['datetime'] ?></span>
71 : <span class="bo_view"><i class="fa fa-eye" aria-hidden="true"></i> <?php echo number_format($list[$i]['wr_hit']) ?><span class="sound_only">회</span></span>
72 : <?php if ($is_good) { ?><span class="sound_only">추천</span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <?php echo $list[$i]['wr_good'] ?><?php } ?>
73 : <?php if ($is_nogood) { ?><span class="sound_only">비추천</span><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> <?php echo $list[$i]['wr_nogood'] ?><?php } ?>
74 : </div>
75 : </li>
76 : <?php } ?>
77 : <?php if (count($list) == 0) { echo '<li class="empty_table">게시물이 없습니다.</li>'; } ?>
78 : </ul>
79 : </div>
80 : </div>
파일명 : style.css 중 일부
1 : /* 게시판 목록 공통 */
2 : #bo_list {}
3 : #bo_list li {background:#fff}
4 : #bo_list li.bo_notice {background:#fff6fa}
5 :
6 : .bo_fx {margin-bottom:5px;padding:0 10px}
7 : .bo_fx:after {display:block;visibility:hidden;clear:both;content:""}
8 : .bo_fx ul {margin:0;padding:0;list-style:none}
9 : #bo_list_total {margin:10px;text-align:center;padding:10px;text-align:center;background:#e3e7ec;color:#8b8b8b;border-radius:3px}
10 :
11 : .bo_cmt {background:#e9eff5;color:#3a8afd;font-size:0.925em;height:16px;padding:0 5px;border-radius:2px;vertical-align:top;min-width:16px}
12 :
13 : .bo_subject {display:block;width:100%;padding-bottom:5px}
14 :
15 : .bo_current {color:#e8180c}
16 :
17 : .bo_info:after {visibility:hidden;clear:both;content:""}
18 : .bo_info {position:relative;padding-top:5px;line-height:20px;color:#646464;vertical-align:top}
19 : .bo_info i {margin-left:10px}
20 : .bo_info .comment_icon {background:url(./img/icon_comment.png) no-repeat 50% 50%;display:inline-block;width:20px;height:28px;text-indent:-999px;overflow:hidden;vertical-align:top;background-size:70%;margin:0 0px 0 5px}
21 : .bo_info .bo_date {}
22 : .bo_info .cnt_cmt {display:inline-block;margin: 0 5px 0 3px}
답변 2
<div class="bo_cnt_row">
<a href="<?php echo $list[$i]['href'] ?>" class="bo_subject">
<?php echo $list[$i]['icon_reply']; ?>
<?php if (isset($list[$i]['icon_secret'])) echo $list[$i]['icon_secret']; ?>
<?php echo $list[$i]['subject'] ?>
<?php if ($list[$i]['comment_cnt']) { ?>
<span class="bo_cmt">
<span class="sound_only">댓글</span>
<?php echo $list[$i]['comment_cnt']; ?>
<span class="sound_only">개</span>
</span>
<?php } ?>
</a>
<div class="bo_meta">
<span class="bo_name"><?php echo $list[$i]['name'] ?></span>
<span class="bo_date"><i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo $list[$i]['datetime'] ?></span>
</div>
</div>
css
/* 제목 + 작성자/날짜 같은 줄 배치 */
.bo_cnt_row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap; /* 모바일 대응 */
padding: 5px 0;
}
.bo_cnt_row .bo_subject {
flex: 1 1 auto;
padding-bottom: 0; /* 기존 여백 제거 */
margin-right: 10px;
}
.bo_cnt_row .bo_meta {
white-space: nowrap;
font-size: 0.9em;
color: #888;
display: flex;
gap: 10px;
align-items: center;
}
해당 부분 참고하셔서 적용해 보세요
관심과 친절에 감사드립니다.
알려주신 내용 중에 아래와 같이 변경(wrap → nowrap)하니 잘 작동되네요.
암튼 다시한번 감사드립니다.
.bo_cnt_row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
flex-wrap: wrap; → nowrap
}
답변을 작성하시기 전에 로그인 해주세요.
