공지사항 등록/수정

 

<div class="container" id="notice-write">
    <h2>공지사항 등록</h2>
    
    <form id="write-form">
        <div class="form-group">
            <label for="post-title">제목</label>
            <input type="text" id="post-title" name="title" placeholder="제목을 입력하세요" required>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label for="post-author">작성자</label>
                <input type="text" id="post-author" name="author" value="관리자" readonly>
            </div>
            <div class="form-group">
                <label for="post-category">중요도</label>
                <select id="post-category">
                    <option value="normal">일반공지</option>
                    <option value="important">중요공지</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="post-content">내용</label>
            <textarea id="post-content" name="content" rows="15" placeholder="공지사항 내용을 상세히 작성해 주세요."></textarea>
        </div>

        <div class="form-group">
            <label for="post-file">첨부파일</label>
            <input type="file" id="post-file" class="file-input">
        </div>

        <div class="form-btns">
            <button type="button" class="btn btn-cancel" onclick="history.back()">취소</button>
            <button type="submit" class="btn btn-submit">등록하기</button>
        </div>
    </form>
</div>

<style>
    /* 폼 전용 스타일 */
    .form-group { margin-bottom: 20px; }
    .form-group label { display: block; font-weight: bold; margin-bottom: 8px; font-size: 14px; }
    .form-group input[type="text"], .form-group select, .form-group textarea {
        width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; outline: none;
    }
    .form-row { display: flex; gap: 20px; }
    .form-row .form-group { flex: 1; }
    .file-input { border: 1px dashed #ccc; padding: 20px; background: #fafafa; width: 100%; cursor: pointer; }
    .form-btns { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
    .btn-cancel { background: #e9ecef; color: #495057; width: 120px; }
    .btn-submit { background: #007bff; color: white; width: 120px; }
    
    @media screen and (max-width: 600px) {
        .form-row { flex-direction: column; gap: 0; }
    }
</style>

공지사항 등록_수정 화면 (Form).html

0.00MB

 

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