뱃지 및 강조할 내용 추가

사이트 활용팁

2024.11.05 14:51

뱃지 및 강조할 내용 추가

관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 오래 전 2024.11.05 14:51 인기 기능|게시판| 목록|
325

5

게시물 강조 및 뱃지 기능 업데이트

게시물 작성 및 조회 시 강조 문구(wr_2)와 뱃지(wr_1)를 손쉽게 추가하고 표시할 수 있는 기능이 업데이트되었습니다. 이를 통해 게시물의 중요 정보를 더욱 효과적으로 전달하고, 사용자 맞춤형 표현을 강화합니다.

1. 게시물 상단 강조 문구 (wr_2):
write.skin.php에서 게시물 본문 상단에 **강조할 참고사항을 입력할 수 있는 텍스트 에어리어(wr_2)**가 추가되었습니다.
wr_2 컬럼은 longtext 타입으로 자동 변환 또는 생성되어 긴 내용도 문제없이 저장됩니다.
view.skin.php에서는 이 wr_2 내용이 게시물 본문 바로 위에 별도의 스타일 (.wr_2)이 적용된 박스로 표시되어, 방문자가 중요 내용을 놓치지 않도록 돕습니다.
2. 뱃지 기능 (wr_1):
write.skin.php에서 게시물에 **뱃지를 출력할 수 있는 입력 필드(wr_1)**가 추가되었습니다.
view.skin.php에서는 wr_1에 입력된 뱃지 내용이 제목 위에 모바일/PC 환경에 맞춰 각각 다른 스타일로 표시됩니다. 모바일에서는 간결하게, PC에서는 강조된 형태로 나타납니다.
3. 스타일 개선 (style.css):
새롭게 추가된 wr_2 강조 박스와 wr_1 뱃지를 위한 CSS 스타일이 추가되었습니다.
특히 .vico_txt와 .vico_wrap 등 뱃지 관련 클래스들이 다양한 기기에서 최적화된 디자인으로 표시되도록 개선되었습니다.
게시물 목록에서도 list_wr_2와 list_vico_txt 같은 스타일이 적용되어 목록에서도 중요 정보와 뱃지를 효과적으로 보여줍니다.

이번 업데이트를 통해 게시물 작성자는 중요 정보를 쉽게 부각시키고, 게시물 방문자는 핵심 내용을 빠르게 파악하며 더욱 풍부한 시각적 정보를 얻을 수 있습니다.

01. write_skin.php

제목 입력칸 바로 밑에, 아래 소스코드 아래 추가

// 상단 PHP 부분에 추가
// wr_2 컬럼이 존재하는지 확인하고, 존재한다면 타입이 longtext가 맞는지 확인
$wr_2_check = sql_query("SHOW COLUMNS FROM {$write_table} LIKE 'wr_2'", false);
if (sql_num_rows($wr_2_check)) {
    $wr_2_column = sql_fetch_array($wr_2_check);
    if ($wr_2_column['Type'] !== 'longtext') {
        // wr_2 컬럼의 타입이 longtext가 아니면 longtext로 변경
        sql_query("ALTER TABLE {$write_table} MODIFY COLUMN wr_2 longtext", true);
    }
} else {
    // wr_1 컬럼이 없으면 longtext 타입으로 추가
    sql_query("ALTER TABLE {$write_table} ADD wr_2 longtext", true);
}

<!-- 아래 HTML 부분 입력 폼 추가 -->
    <!-- 제목 { -->
    <div class="rb_inp_wrap">
        <ul>
            <input type="text" name="wr_subject" value="<?php echo $subject ?>" id="wr_subject" required class="input required full_input" maxlength="255" placeholder="제목을 입력하세요.">
        </ul>
    </div>
    <!-- } -->

    <!-- wr_1 : 뱃지 { -->
    <div class="rb_inp_wrap">
        <ul>
            <input type="text" name="wr_1" value="<?php echo isset($write['wr_1']) ? $write['wr_1'] : ''; ?>" id="wr_1" class="input" placeholder="뱃지를 출력할 수 있습니다.">
        </ul>
    </div>
    <!-- } -->
    
    <!-- wr_2 : 참고사항 { -->
    <div class="rb_inp_wrap">
        <ul>
            <textarea name="wr_2" id="wr_2" class="textarea" placeholder="게시물(글 내용) 상단에 강조할 참고사항을 입력할 수 있습니다." style="min-height:100px;"><?php echo isset($write['wr_2']) ? $write['wr_2'] : ''; ?></textarea>
        </ul>
    </div>
    <!-- } -->

02. view.skin.php

<h2><?php echo get_text($view['wr_subject']);?></h2> 바로 위에 아래 소스코드 추가

    <div class="vico_wrap mobile">
        <?php if (isset($view['wr_1']) && $view['wr_1']) { ?><span class="view_info_span font-B"><?php echo $view['wr_1'] ?>　</span><?php } ?>
        <span class="view_info_span"><?php echo date("Y.m.d H:i", strtotime($view['wr_datetime'])) ?></span>
    </div>
    
    <?php if (isset($view['wr_1']) && $view['wr_1']) { ?><div class="vico_wrap pc"><span class="font-B main_color vico_txt"><?php echo $view['wr_1'] ?></span></div><?php } ?>

바로 위에 아래 소스 코드 추가

    <?php if(isset($view['wr_2']) && $view['wr_2']) { ?>
    <div class="wr_2">
        <?php echo nl2br($view['wr_2']); ?> 
    </div>
    <?php } ?>

03. style.css

반응형 처리 주석 바로 위에 아래 소스코드 추가

.rb_bbs_wrap .ver_ico {background-color: #D6DCE0; color:#09244B; font-size: 11px; padding: 2px 5px 2px 5px; border-radius: 4px;}
.rb_bbs_wrap .ver_ico2 {font-size: 11px; color:#999;}
.rb_bbs_wrap .wr_2 {background-color: #f9f9f9; color:#09244B; font-size: 14px; line-height: 150%; padding: 20px; box-sizing: border-box;}
.rb_bbs_wrap .ver_ico_wrap {position: absolute; bottom:44px; left: 0px;}
.rb_bbs_wrap .noti_bg {}
.rb_bbs_wrap .rb_bbs_for_cont_subj2 a {font-size: 16px;}
.rb_bbs_wrap .rb_bbs_for2 {padding-top: 30px; padding-bottom: 30px; border-bottom: 1px solid #eee; position: relative;}
.rb_bbs_wrap .rb_bbs_for_mem2 {margin-top: 5px !important;}
.rb_bbs_wrap .rb_bbs_for_mem_names2 {color:#999; font-size: 12px;}
.rb_bbs_wrap .rb_bbs_for_btm_info2 dd span {color:#999 !important; font-size: 12px !important;}
.rb_bbs_wrap .rb_bbs_for_btm_info2 dd a {font-size: 12px; color:#999}
.rb_bbs_wrap .rb_bbs_for_btm_info2 dd i {opacity: 0.4}
.rb_bbs_wrap .wr_2_list {border-bottom:1px solid #eee;}

/* 뱃지 처리 { */
.vico_txt {border:1px solid #ddd; padding: 7px 15px 7px 15px; border-radius: 30px; font-size: 14px;}
.vico_wrap {margin-bottom: 10px;}
.list_vico_txt {border-radius: 6px; font-size: 12px;}
.list_vico_wrap {margin-bottom: 20px;}
.list_wr_2 {border-radius: 10px; padding: 30px !important;}
.vico_link {cursor: pointer;}
.vico_link:hover {border-color:#AA20FF;}

#강조 #글상단 #부제목 #글설명

PDF

인쇄

공유하고, 소통하다

빌런은 디스코드, 인스타그램, 페이스북, 카카오톡, 텔레그램 등 다양한 메신저에서 발생하는 범죄, 사기, 보이스피싱, 스캠과 함께 중고 거래, 데이트 폭력, 학교 폭력, 술집 진상, 게임 사기꾼, 나쁜 회사 상사, 일상 속 매너 없는 사람들에 대한 정보를 공유하는 플랫폼입니다. ... 자세히보기

또한, 한국 아이돌, 배우, 해외 유명인, 스포츠 스타, 인플루언서에 대한 팬클럽 게시판도 운영하여, 좋아하는 스타와 소통할 수 있는 공간을 제공합니다. 안전한 커뮤니티에서 우리의 경험을 나누고, 더 나은 사회를 만들어 갑시다. ... 접기

주의사항.

본 사이트의 모든 게시물과 그에 포함된 텍스트, 이미지, 동영상 등 모든 콘텐츠는 본 사이트에서 독자적으로 편집 및 표현 방식을 수정하여 완성된 창작물입니다. 저작권법 및 관련 법령에 따라 보호를 받습니다. 따라서, 본 정보는 사이트 운영자의 명시적인 서면 동의 없이 무단으로 전재, 복사, 배포, 재가공, 또는 어떠한 형태로든 상업적/비상업적으로 활용될 수 없습니다. ... 자세히보기

또한, 게재된 정보는 개인적인 열람 및 참고 이외의 어떠한 용도로도 사용할 수 없습니다. 이를 위반할 경우 관련 법률에 의거하여 민·형사상의 책임을 질 수 있습니다.

본 사이트는 등록자가 게재한 자료의 내용에 대한 정확성, 완전성, 신뢰성을 보증하지 않으며, 해당 정보의 오류나 누락에 대해 어떠한 책임도 지지 않습니다. 또한, 사용자가 본 정보를 신뢰하여 취한 직간접적인 모든 조치나 결과에 대해서도 책임을 부담하지 않습니다. 정보 사용에 따른 모든 위험은 사용자 본인에게 있습니다. ... 접기

이전글chatGPT 활용한 댓글 답변 게시판2024.11.07

다음글해시태그 입력 및 검색 기능 추가하기2024.11.04

댓글목록

관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

　오래 전 2024-11-05 14:52

이렇게 훌륭한 정보를 공유해 주셔서 감사합니다. 이 업데이트 덕분에 게시물에 뱃지와 강조할 내용을 추가할 수 있게 돼서 매우 유용할 것 같습니다. ...

이렇게 훌륭한 정보를 공유해 주셔서 감사합니다. 이 업데이트 덕분에 게시물에 뱃지와 강조할 내용을 추가할 수 있게 돼서 매우 유용할 것 같습니다. 게시물의 가독성과 사용자 경험을 크게 향상시킬 수 있을 거예요. 또한 CSS를 통해 스타일링을 자유롭게 조정할 수 있다는 점도 마음에 들어요. 앞으로도 이러한 업데이트를 기대하겠습니다!