공지사항 상세보기 화면 (View)

<div class="container" id="notice-view">
    <div class="view-header">
        <span class="category-tag">공지사항</span>
        <h2>2026년 설 연휴 고객센터 운영 안내</h2>
        <div class="post-info">
            <span><strong>작성자</strong> 관리자</span>
            <span><strong>작성일</strong> 2026-01-23</span>
            <span><strong>조회수</strong> 1,245</span>
        </div>
    </div>
    
    <div class="view-content">
        <p>안녕하세요. 관리자입니다.</p>
        <p>2026년 설 연휴 기간 동안 고객센터 운영이 아래와 같이 변경될 예정이오니 서비스 이용에 참고하시기 바랍니다.</p>
        <br>
        <p><strong>[운영 안내]</strong></p>
        <ul>
            <li>휴무 기간: 2026년 2월 1일 ~ 2월 3일</li>
            <li>정상 운영: 2026년 2월 4일 (월) 오전 9시부터</li>
        </ul>
        <p>연휴 기간 동안 게시판을 통해 문의주신 내용은 업무 복귀 후 순차적으로 답변 드리겠습니다.</p>
    </div>

    <div class="view-footer">
        <button class="btn btn-list" onclick="location.href='list.html'">목록으로</button>
        <div class="admin-btns">
            <button class="btn btn-edit">수정</button>
            <button class="btn btn-delete">삭제</button>
        </div>
    </div>
</div>

<style>
    /* 상세보기 전용 스타일 */
    .view-header { border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 30px; }
    .category-tag { color: #007bff; font-weight: bold; font-size: 14px; }
    .post-info { margin-top: 15px; color: #888; font-size: 14px; display: flex; gap: 20px; }
    .view-content { min-height: 300px; line-height: 1.8; color: #444; font-size: 16px; }
    .view-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; display: flex; justify-content: space-between; }
    .btn-list { background: #6c757d; color: white; }
    .btn-edit { background: #ffc107; color: #212529; }
    .btn-delete { background: #dc3545; color: white; }
</style>

공지사항 상세보기 화면 (View).html

0.00MB

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.