게시판 리스트 항목 추가

게시판 리스트 항목 추가

QA

게시판 리스트 항목 추가

본문

코드라고는 복붙수준으로 조금씩 알고 있는 초보입니다. 

 

현재 그노보드에 나리야 보드를 사용중입니다. 나리야는 달라진 것이 많아 기존 자료가 안되는 부분이 많은 것 같아 아쉽네요 ㅜㅜ

 

제목                            이름                 날짜   조회

 

보통 이렇게 되어 있는 게시판에서 제목을 2개 항목으로 나누었습니다. 

 

 

남자         여자              이름                  날짜   조회

 

리스트 제목은 저렇게 되었고, 다행스럽게 남자와 여자의 해당 내용도 wr_1 wr_2 등으로 출력도 잘 됩니다. 그런데 정렬이 너무 어렵네요. ㅜㅜ

 

 

남자         여자              이름                   날짜  조회

A B

 

여기서 A는 남자칸에, B는 여자 칸에 나와야 하는데, 위와 같이 왼쪽으로 쏠려나옵니다. 

 

예전 자료를 보면, 어떤 분은 css 파일로 잡아야 한다는 분도 계시고 다양하십니다. 

 

 

남자           여자              이름                 날짜  조회

  A               B

 

당연히 이런 구조가 되어야 할 것 입니다. 여기서 A는 남자칸에, B는 여자칸에 출력되려면 어떤 코드를 어떻게 넣어줘야 하나요?

 

언제나 감사드립니다.

 

참고로 빨간색이 제가 넣은 코드입니다. 

 

상단


<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 } ?>
                남자
            </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>

 

 

하단 


<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;
                                echo $wr_icon;
                            ?>
                        <?php echo $list[$i]['A'] ?>
                        </a>
                        <?php echo $list[$i]['B'] ?>
                        <?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>
 

 

 

 

 

이 질문에 댓글 쓰기 :

답변 3

다음과 같은 방법으로 시도해 볼 수 있을 것 같습니다.

참고하셔서 원하시는 형태로 구현하시면 될 것 같습니다.

html


<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 추가


/* 추가한 CSS 스타일 */
.na-table {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.d-md-table-row {
    display: table-row;
}
.d-md-table-cell {
    display: table-cell;
    padding: 5px; /* 적절한 여백 설정 */
}
/* 남자와 여자 열을 나란히 표시하도록 설정 */
.d-md-table-cell:nth-child(2) {
    width: 50%; /* 남자 열 너비 설정 */
}
.d-md-table-cell:nth-child(3) {
    width: 50%; /* 여자 열 너비 설정 */
}
/* 남자와 여자에 A와 B 표시하기 */
.d-md-table-cell:nth-child(2) a::before {
    content: "A ";
}
.d-md-table-cell:nth-child(3) a::before {
    content: "B ";
}

 

 

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

회원로그인

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