새글 | 빌런(Villain) - 범죄 및 사회 문제 이슈 정보 공유 커뮤니티 플랫폼

　　사이트 활용팁

본문 하단, 자세히보기 및 접기 버튼 기능 설명 　

01. view.skin.php <div id="bo_v_act"> <span class="bo_v_act_gng"> <a href="#"> <img src="<?php echo $board_skin_url ?>/img/exclamation-circle-solid.svg" alt="소개"> <span class="font-B">공유하고, 소통하다</span> </a> </span> <span class="bo_v_act_gng"> <p>빌런은 디스코드, 인스타그램, 페이스북, 카카오톡, 텔레그램 등 다양한 메신저에서 발생하는 범죄, 사기, 보이스피싱, 스캠과 함께 중고 거래, 데이트 폭력, 학교 폭력, 술집 진상, 게임 사기꾼, 나쁜 회사 상사, 일상 속 매너 없는 사람들에 대한 정보를 공유하는 플랫폼입니다. <span class="expand-btn" data-target="moreInfo1">... 자세히보기</span></p> <div id="moreInfo1" class="more-content"> <br> <p>또한, 한국 아이돌, 배우, 해외 유명인, 스포츠 스타, 인플루언서에 대한 팬클럽 게시판도 운영하여, 좋아하는 스타와 소통할 수 있는 공간을 제공합니다. 안전한 커뮤니티에서 우리의 경험을 나누고, 더 나은 사회를 만들어 갑시다. <span class="collapse-btn" data-target="moreInfo1">... 접기</span></p> </div> </span> </div> <div id="bo_v_act"> <span class="bbs_bn_box"> <a href="#"> <img src="<?php echo $board_skin_url ?>/img/copyright-regular.svg" alt="저작권"> <img src="<?php echo $board_skin_url ?>/img/registered-regular.svg" alt="저작권"> <img src="<?php echo $board_skin_url ?>/img/trademark-solid.svg" alt="저작권"> <span class="font-B">주의사항.</span> </a> </span> <span class="bbs_bn_box"> <p>본 사이트의 모든 게시물과 그에 포함된 텍스트, 이미지, 동영상 등 모든 콘텐츠는 본 사이트에서 독자적으로 편집 및 표현 방식을 수정하여 완성된 창작물입니다. 저작권법 및 관련 법령에 따라 보호를 받습니다. 따라서, 본 정보는 사이트 운영자의 명시적인 서면 동의 없이 무단으로 전재, 복사, 배포, 재가공, 또는 어떠한 형태로든 상업적/비상업적으로 활용될 수 없습니다. <span class="expand-btn" data-target="moreInfo2">... 자세히보기</span></p> <div id="moreInfo2" class="more-content"> <br> <p>또한, 게재된 정보는 개인적인 열람 및 참고 이외의 어떠한 용도로도 사용할 수 없습니다. 이를 위반할 경우 관련 법률에 의거하여 민·형사상의 책임을 질 수 있습니다.</p> <br> <p>본 사이트는 등록자가 게재한 자료의 내용에 대한 정확성, 완전성, 신뢰성을 보증하지 않으며, 해당 정보의 오류나 누락에 대해 어떠한 책임도 지지 않습니다. 또한, 사용자가 본 정보를 신뢰하여 취한 직간접적인 모든 조치나 결과에 대해서도 책임을 부담하지 않습니다. 정보 사용에 따른 모든 위험은 사용자 본인에게 있습니다. <span class="collapse-btn" data-target="moreInfo2">... 접기</span></p> </div> </span> </div> 02. view.skin.php 파일 맨 하단 아래 스크립트 추가 <script> // 본문 하단 자세히보기. 접기 JavaScript 추가 (변경 없음) document.addEventListener('DOMContentLoaded', function() { const expandButtons = document.querySelectorAll('.expand-btn'); const collapseButtons = document.querySelectorAll('.collapse-btn'); expandButtons.forEach(button => { button.addEventListener('click', function() { const targetId = this.dataset.target; const targetContent = document.getElementById(targetId); const correspondingCollapseBtn = targetContent.querySelector('.collapse-btn'); targetContent.style.display = 'block'; this.style.display = 'none'; if (correspondingCollapseBtn) { correspondingCollapseBtn.style.display = 'inline'; } }); }); collapseButtons.forEach(button => { button.addEventListener('click', function() { const targetId = this.dataset.target; const targetContent = document.getElementById(targetId); const correspondingExpandBtn = document.querySelector(`.expand-btn[data-target="${targetId}"]`); targetContent.style.display = 'none'; this.style.display = 'none'; if (correspondingExpandBtn) { correspondingExpandBtn.style.display = 'inline'; } }); }); }); </script> 03. style.css /* 본문 하단 ... 자세히보기 ...접기 CSS 추가 */ .more-content { display: none; /* 초기에는 숨김 */ } /* 자세히보기/접기 버튼 공통 스타일 */ .expand-btn, .collapse-btn { /* 기존 텍스트와 동일하게 (색상 및 굵기 제거) */ color: inherit; /* 부모 요소의 글자 색상 상속 */ cursor: pointer; text-decoration: none; /* 밑줄 유지 */ margin-left: 5px; font-weight: normal; /* 굵기 제거 */ display: inline; /* 글과 자연스럽게 이어지도록 inline으로 설정 */ } /* 텍스트 버튼 호버 시 */ .expand-btn:hover, .collapse-btn:hover { color: inherit; /* 호버 시에도 글자 색상 변화 없음 */ text-decoration: none; /* 호버 시 밑줄 제거 (원하면 유지) */ } /* 초기에는 접기 버튼 숨김 */ .collapse-btn { display: none; }

관리자　2025-06-06　사이트 활용팁

댓글 내용 확장/축소 기능 (댓글 자세히보기 및 접기 기능) 　[댓글]

　　사이트 활용팁

댓글 내용 확장/축소 기능 (댓글 자세히보기 및 접기 기능) 　

0.1 view_comment.skin.php 댓글 출력 부분을 아래와 같이 변경, 아래 기준 댓글 글자수 82자 이상 일 경우 ... 자세히보기 버튼 생성 82자 보다 이하 일 경우, 즉 짧은 댓그은 그대로 표시  <div class="cmt_contents"> <div class="comment-content-wrapper"> <?php if ($is_long_comment) { ?>  <div class="comment-content-short" id="short_<?php echo $comment_id ?>"> <p> <?php if (strstr($list[$i]['wr_option'], "secret")) { ?><img src="<?php echo $board_skin_url; ?>/img/ico_sec.svg" alt="비밀글"><?php } ?> <?php // 82자까지만 표시하고 ...을 추가 $short_comment = mb_substr($comment_text_only, 0, 82, 'UTF-8'); echo nl2br(htmlspecialchars($short_comment)) . '...'; ?> </p> </div>  <div class="comment-content-full" id="full_<?php echo $comment_id ?>"> <p> <?php if (strstr($list[$i]['wr_option'], "secret")) { ?><img src="<?php echo $board_skin_url; ?>/img/ico_sec.svg" alt="비밀글"><?php } ?> <?php echo $comment ?> </p> </div>  <button type="button" class="comment-expand-btn" onclick="expandComment('<?php echo $comment_id ?>')"> 자세히보기 </button>  <button type="button" class="comment-collapse-btn" onclick="collapseComment('<?php echo $comment_id ?>')" style="display:none;"> 접기 </button> <?php } else { ?>  <p> <?php if (strstr($list[$i]['wr_option'], "secret")) { ?><img src="<?php echo $board_skin_url; ?>/img/ico_sec.svg" alt="비밀글"><?php } ?> <?php echo $comment ?> </p> <?php } ?> </div> <?php if($is_comment_reply_edit) { if($w == 'cu') { $sql = " select wr_id, wr_content, mb_id from $write_table where wr_id = '$c_id' and wr_is_comment = '1' "; $cmt = sql_fetch($sql); if (isset($cmt)) { if (!($is_admin || ($member['mb_id'] == $cmt['mb_id'] && $cmt['mb_id']))) { $cmt['wr_content'] = ''; } $c_wr_content = $cmt['wr_content']; } } ?> <?php } ?>  <p class="p_times" style="margin-bottom:10px;"><span><?php echo date('Y-m-d H:i', strtotime($list[$i]['datetime'])) ?></span></p> <div> <?php //비밀글의 경우 첨부파일을 숨김 $file_v = get_file_comment($bo_table, $wr_id, $comment_id); if (!strstr($list[$i]['wr_option'], 'secret') || $is_admin || ($write['mb_id']===$member['mb_id'] && $member['mb_id']) || ($list[$i]['mb_id']===$member['mb_id'] && $member['mb_id'])) { for($j=0; $j<count($file_v); $j++){ if (isset($file_v[$j]['file']) && preg_match("/\.({$config['cf_image_extension']})$/i", $file_v[$j]['file'])) { echo '<a data-fslightbox="gallery_'.$comment_id.'" href="'.$file_v[$j]['path'].'/'.$file_v[$j]['file'].'"><img src="'.$file_v[$j]['path'].'/'.$file_v[$j]['file'].'" style="width:auto;height:60px;border-radius:6px; margin-right:5px; margin-top:5px;"></a>'; } } if (count($file_v) > 0) { echo '<div class="rb_bbs_file rb_bbs_file_cmt">'; for($k=0; $k<count($file_v); $k++){ if (isset($file_v[$k]['file']) && !preg_match("/\.({$config['cf_image_extension']})$/i", $file_v[$k]['file'])) { $finfo = pathinfo($file_v[$k]['source']); echo "<ul class='rb_bbs_file_for rb_bbs_file_for_cmt'><span><i><img src='".$board_skin_url."/img/ico_file.svg'></i><a href='".$file_v[$k]['href']."' class=''>".$file_v[$k]['source']."</a> (".$file_v[$k]['size'].")　".$file_v[$k]['download']."회</span></ul>"; } } echo '</div>'; } } else { $ss_name = 'ss_secret_comment_'.$bo_table.'_'.$list[$i]['wr_id']; if(!get_session($ss_name)) { } else { for($j=0; $j<count($file_v); $j++){ if (isset($file_v[$j]['file']) && preg_match("/\.({$config['cf_image_extension']})$/i", $file_v[$j]['file'])) { echo '<a data-fslightbox="gallery_'.$comment_id.'" href="'.$file_v[$j]['path'].'/'.$file_v[$j]['file'].'"><img src="'.$file_v[$j]['path'].'/'.$file_v[$j]['file'].'" style="width:auto;height:60px;border-radius:6px; margin-right:5px; margin-top:5px;"></a>'; } } if (count($file_v) > 0) { echo '<div class="rb_bbs_file rb_bbs_file_cmt">'; for($k=0; $k<count($file_v); $k++){ if (isset($file_v[$k]['file']) && !preg_match("/\.({$config['cf_image_extension']})$/i", $file_v[$k]['file'])) { $finfo = pathinfo($file_v[$k]['source']); echo "<ul class='rb_bbs_file_for rb_bbs_file_for_cmt'><span><i><img src='".$board_skin_url."/img/ico_file.svg'></i><a href='".$file_v[$k]['href']."' class=''>".$file_v[$k]['source']."</a> (".$file_v[$k]['size'].")　".$file_v[$k]['download']."회</span></ul>"; } } echo '</div>'; } } } ?> </div> </div> <span id="edit_<?php echo $comment_id ?>" class="bo_vc_w"></span> <span id="reply_<?php echo $comment_id ?>" class="bo_vc_w"></span> <input type="hidden" value="<?php echo strstr($list[$i]['wr_option'],"secret") ?>" id="secret_comment_<?php echo $comment_id ?>"> <textarea id="save_comment_<?php echo $comment_id ?>" style="display:none"><?php echo get_text($list[$i]['content1'], 0) ?></textarea> </div> 02. view_comment.skin.php 파일 맨 하단에 아래 스크립트 추가  <script> function expandComment(commentId) { // 짧은 버전 숨기기 document.getElementById('short_' + commentId).style.display = 'none'; // 전체 버전 보이기 document.getElementById('full_' + commentId).style.display = 'block'; // 자세히보기 버튼 숨기기 var expandBtn = document.querySelector('#c_' + commentId + ' .comment-expand-btn'); if (expandBtn) expandBtn.style.display = 'none'; // 접기 버튼 보이기 var collapseBtn = document.querySelector('#c_' + commentId + ' .comment-collapse-btn'); if (collapseBtn) collapseBtn.style.display = 'inline-block'; } function collapseComment(commentId) { // 전체 버전 숨기기 document.getElementById('full_' + commentId).style.display = 'none'; // 짧은 버전 보이기 document.getElementById('short_' + commentId).style.display = 'block'; // 접기 버튼 숨기기 var collapseBtn = document.querySelector('#c_' + commentId + ' .comment-collapse-btn'); if (collapseBtn) collapseBtn.style.display = 'none'; // 자세히보기 버튼 보이기 var expandBtn = document.querySelector('#c_' + commentId + ' .comment-expand-btn'); if (expandBtn) expandBtn.style.display = 'inline-block'; } </script> 03. style.css /* 댓글 자세히보기/접기 스타일 */ .comment-content-wrapper { position: relative; } .comment-content-short { max-height: 110px; /* 약 3-4줄 정도 */ overflow: hidden; position: relative; } .comment-content-short::after { /* 밑에서 위로 그라데이션 */ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 5px; background: linear-gradient(transparent, rgba(255, 255, 255, 0.9)); pointer-events: none; } .comment-expand-btn, .comment-collapse-btn { display: inline-block; color: #777; font-size: 13px; font-weight:bold; cursor: pointer; margin-top: 7px; padding: 2px 0; border: none; background: none; text-decoration: none; } .comment-expand-btn:hover, .comment-collapse-btn:hover { color: #333; text-decoration: underline; } .comment-content-full { display: none; } .comment-content-full.show { display: block; }

관리자　2025-06-06　사이트 활용팁

macOS 설치 미디어 (USB) 만들기: 완벽 가이드 　[댓글]

　　운영체제/편집/PC 진단/벤치마크 프…

macOS 설치 미디어 (USB) 만들기: 완벽 가이드 　[댓글]

　　운영체제/편집/PC 진단/벤치마크 프…

macOS 설치 미디어 (USB) 만들기: 완벽 가이드 　[댓글]

　　운영체제/편집/PC 진단/벤치마크 프…

macOS 설치 미디어 (USB) 만들기: 완벽 가이드 　[댓글]

　　운영체제/편집/PC 진단/벤치마크 프…

macOS 설치 미디어 (USB) 만들기: 완벽 가이드 　[댓글]

　　운영체제/편집/PC 진단/벤치마크 프…

macOS 설치 미디어 (USB) 만들기: 완벽 가이드 　[댓글]

　　운영체제/편집/PC 진단/벤치마크 프…

Samsung Magician: 삼성 SSD 성능 최적화 및 수명 관리를 위한 필수 유틸리티 　[댓글]

　　운영체제/편집/PC 진단/벤치마크 프…

OCBASE/OCCT: 올인원 PC 안정성, 스트레스 테스트, 벤치마크 및 모니터링 툴 　[댓글]

　　운영체제/편집/PC 진단/벤치마크 프…

Cinebench 2024: 강력한 CPU 및 GPU 벤치마크 도구로 PC 성능을 극대화하세요 　[댓글]

　　운영체제/편집/PC 진단/벤치마크 프…