게시판 리스트 항목 추가

게시판 리스트 항목 추가

QA

게시판 리스트 항목 추가

답변 3

본문

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

 

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

 

제목                            이름                 날짜   조회

 

보통 이렇게 되어 있는 게시판에서 제목을 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 ";
}

 

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 2,350
© SIRSOFT
현재 페이지 제일 처음으로