게시판 리스트 항목 추가
코드라고는 복붙수준으로 조금씩 알고 있는 초보입니다.
현재 그노보드에 나리야 보드를 사용중입니다. 나리야는 달라진 것이 많아 기존 자료가 안되는 부분이 많은 것 같아 아쉽네요 ㅜㅜ
제목 이름 날짜 조회
보통 이렇게 되어 있는 게시판에서 제목을 2개 항목으로 나누었습니다.
남자 여자 이름 날짜 조회
리스트 제목은 저렇게 되었고, 다행스럽게 남자와 여자의 해당 내용도 wr_1 wr_2 등으로 출력도 잘 됩니다. 그런데 정렬이 너무 어렵네요. ㅜㅜ
남자 여자 이름 날짜 조회
A B
여기서 A는 남자칸에, B는 여자 칸에 나와야 하는데, 위와 같이 왼쪽으로 쏠려나옵니다.
예전 자료를 보면, 어떤 분은 css 파일로 잡아야 한다는 분도 계시고 다양하십니다.
남자 여자 이름 날짜 조회
A B
당연히 이런 구조가 되어야 할 것 입니다. 여기서 A는 남자칸에, B는 여자칸에 출력되려면 어떤 코드를 어떻게 넣어줘야 하나요?
언제나 감사드립니다.
참고로 빨간색이 제가 넣은 코드입니다.
상단
</p>
<p><div class="na-table d-none d-md-table w-100 mb-0">
<div class="<?php echo $head_class ?> d-md-table-row">
<div class="d-md-table-cell nw-5 px-md-1">번호</div>
<div class="d-md-table-cell pr-md-1">
<?php if ($is_checkbox) { ?>
<label class="float-left mb-0">
<input type="checkbox" onclick="if (this.checked) all_checked(true); else all_checked(false);">
</label>
<?php } ?>
<strong><span style="color:#e74c3c;"> 남자</span></strong>
</div>
<strong><div class="d-md-table-cell nw-10 pl-2 pr-md-1">여자</div></strong>
<div class="d-md-table-cell nw-10 pl-2 pr-md-1">이름</div>
<div class="d-md-table-cell nw-6 pr-md-1"><?php echo subject_sort_link('wr_datetime', $qstr2, 1) ?>날짜</a></div>
<div class="d-md-table-cell nw-4 pr-md-1"><?php echo subject_sort_link('wr_hit', $qstr2, 1) ?>조회</a></div>
<?php if($is_good) { ?>
<div class="d-md-table-cell nw-3 pr-md-1"><?php echo subject_sort_link('wr_good', $qstr2, 1) ?>추천</a></div>
<?php } ?>
<?php if($is_nogood) { ?>
<div class="d-md-table-cell nw-3 pr-md-1"><?php echo subject_sort_link('wr_nogood', $qstr2, 1) ?>비추</a></div>
<?php } ?>
</div>
</div></p>
<p>
하단
</p>
<p><li class="list-item d-md-table-row px-3 py-2 p-md-0 text-md-center text-muted border-bottom<?php echo $li_css;?>">
<div class="d-none d-md-table-cell nw-5 f-sm font-weight-normal py-md-2 px-md-1">
<?php echo $list[$i]['num'] ?>
</div>
<div class="d-md-table-cell text-left py-md-2 pr-md-1">
<div class="na-title float-md-left">
<div class="na-item">
<?php if ($is_checkbox) { ?>
<input type="checkbox" class="mb-0 mr-2" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">
<?php } ?>
<a href="<?php echo $list[$i]['href'] ?>" class="na-subject"<?php echo $wr_target ?><?php echo $wr_popover ?>>
<?php
if($list[$i]['icon_reply'])
echo '<span class="na-hicon na-reply"></span>'.PHP_EOL;</p>
<p> echo $wr_icon;
?>
<span style="color:#e74c3c;"> <strong><?php echo $list[$i]['A'] ?></strong></span>
</a>
<span style="color:#e74c3c;"><strong> <?php echo $list[$i]['B'] ?></strong></span>
<?php echo $icon_file ?>
<?php if($list[$i]['wr_comment']) { ?>
<div class="na-info">
<span class="sr-only">댓글</span>
<span class="count-plus orangered">
<?php echo $list[$i]['wr_comment'] ?>
</span>
</div>
<?php } ?>
</div>
</div>
</div></p>
<p> </p>
<p>
답변 3개
다음과 같은 방법으로 시도해 볼 수 있을 것 같습니다.
참고하셔서 원하시는 형태로 구현하시면 될 것 같습니다.
html
</p>
<p><div class="na-table d-none d-md-table w-100 mb-0">
<div class="<?php echo $head_class ?> d-md-table-row">
<div class="d-md-table-cell nw-5 px-md-1">번호</div>
<div class="d-md-table-cell pr-md-1">남자</div>
<div class="d-md-table-cell nw-10 pl-2 pr-md-1">여자</div>
<div class="d-md-table-cell nw-10 pl-2 pr-md-1">이름</div>
<div class="d-md-table-cell nw-6 pr-md-1"><?php echo subject_sort_link('wr_datetime', $qstr2, 1) ?>날짜</a></div>
<div class="d-md-table-cell nw-4 pr-md-1"><?php echo subject_sort_link('wr_hit', $qstr2, 1) ?>조회</a></div>
<?php if($is_good) { ?>
<div class="d-md-table-cell nw-3 pr-md-1"><?php echo subject_sort_link('wr_good', $qstr2, 1) ?>추천</a></div>
<?php } ?>
<?php if($is_nogood) { ?>
<div class="d-md-table-cell nw-3 pr-md-1"><?php echo subject_sort_link('wr_nogood', $qstr2, 1) ?>비추</a></div>
<?php } ?>
</div>
</div>
css 추가
</p>
<p>/* 추가한 CSS 스타일 */
.na-table {
display: table;
width: 100%;
table-layout: fixed;
}</p>
<p>.d-md-table-row {
display: table-row;
}</p>
<p>.d-md-table-cell {
display: table-cell;
padding: 5px; /* 적절한 여백 설정 */
}</p>
<p>/* 남자와 여자 열을 나란히 표시하도록 설정 */
.d-md-table-cell:nth-child(2) {
width: 50%; /* 남자 열 너비 설정 */
}</p>
<p>.d-md-table-cell:nth-child(3) {
width: 50%; /* 여자 열 너비 설정 */
}</p>
<p>/* 남자와 여자에 A와 B 표시하기 */
.d-md-table-cell:nth-child(2) a::before {
content: "A ";
}</p>
<p>.d-md-table-cell:nth-child(3) a::before {
content: "B ";
}
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인